快捷導(dǎo)航

Layui彈框中數(shù)據(jù)表格中可雙擊選擇一條數(shù)據(jù)的實現(xiàn)

更新時間：2020年05月06日 14:37:56 作者：披甲上戰(zhàn)場

這篇文章主要介紹了Layui彈框中數(shù)據(jù)表格中可雙擊選擇一條數(shù)據(jù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

Layui提供的功能如下（預(yù)覽）

可自行查看：layui官網(wǎng)此模塊的鏈接
著急看雙擊選中直接看標黃色部分

假設(shè)這是個彈窗里的表格和數(shù)據(jù)點擊圓圈，圓圈變綠則為選中，選中后點擊上方查看數(shù)據(jù)按鈕（實際中是確認按鈕，實際中點擊確認按鈕后會關(guān)閉彈窗并把json串帶到原本頁面中）

Layui提供的代碼如下（查看代碼）

<body>
<!-- 表格空架子 -->
<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- 確認（查看數(shù)據(jù)按鈕） -->
<script type="text/html" id="toolbarDemo">
 <div class="layui-btn-container">
  <button class="layui-btn layui-btn-sm" lay-event="getCheckData">獲取選中行數(shù)據(jù)</button>
 </div>
</script> 
<script src="http://res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接復(fù)制所有代碼到本地，上述js路徑需要改成你本地的 --> 
<script>
	layui.use('table', function(){
	 var table = layui.table;
	 table.render({
	  elem: '#test'
	  ,url:'/demo/table/user/'
	  ,toolbar: '#toolbarDemo'
	  ,cols: [[
	   {type:'radio'}
	   ,{field:'id', width:80, title: 'ID', sort: true}
	   ,{field:'username', width:80, title: '用戶名'}
	   ,{field:'sex', width:80, title: '性別', sort: true}
	   ,{field:'city', width:80, title: '城市'}
	   ,{field:'sign', title: '簽名', minWidth: 100}
	   ,{field:'experience', width:80, title: '積分', sort: true}
	   ,{field:'score', width:80, title: '評分', sort: true}
	   ,{field:'classify', width:80, title: '職業(yè)'}
	   ,{field:'wealth', width:135, title: '財富', sort: true}
	  ]]
	  ,page: true
	 });
	 
	 //頭工具欄事件
	 table.on('toolbar(test)', function(obj){
	  var checkStatus = table.checkStatus(obj.config.id); //獲取選中行狀態(tài)
	  switch(obj.event){
	   case 'getCheckData':
	    var data = checkStatus.data; //獲取選中行數(shù)據(jù)
	    layer.alert(JSON.stringify(data));
	   break;
	  };
	 });
	});
</script>
</body>

實際需求實例

點擊【選擇】按鈕，出現(xiàn)彈框
彈框里有數(shù)據(jù)表格
點擊圓圈為選中當前條數(shù)據(jù)
點擊彈框中【確認】把選中條數(shù)據(jù)帶到主頁面

實際代碼實例

主頁面代碼（底，都為自動帶出的輸入框）

靜態(tài)部分

<div>
	<div>
		<span>客戶姓名：</span>
			<form:input path="customerName" readonly="true"/>
		<span onclick="onclick()" title="選擇">
			<input id="selectCustomer"	class="btn" type="button" value="選擇" /></span>
	</div>
	<div>
		<span>客戶性別：</span>
		<form:input path="customerSex" readonly="true"/>
	</div>
	<div>
		<span>客戶年齡：</span>
		<form:input path="customerYears" readonly="true"/>
	</div>
</div>

【選擇】按鈕的彈窗事件

function onclick(){
 var width = window.screen.availWidth*0.8;
 var height = window.screen.availHeight*0.65;
 var iTop=(window.screen.availHeight-30-height)/2;
 var iLeft=(window.screen.availWidth-30-width)/2;
 var url="${xxx}/vvvv/rrrrr/getCustomerList"; //后端代碼就不介紹了
 window.open(url,'客戶信息','height='+height+',width='+width+',top='+iTop+',left='+iLeft+',
 toolbar=no,menubar=no,scrollbars=yes, resizable=yes,location=no, status=no')
}

彈窗頁面代碼

彈窗頁面中–靜態(tài)部分

<table id="contentTable" class="layui-table">
 	<thead>
 		<tr>
 			<th></th>
 			<th>客戶姓名</th>
 			<th>客戶性別</th>
 			<th>客戶年齡</th>
 			<th>...</th>
 		</tr>
 	</thead>
 	<tbody>
 		<c:forEach items="${page.list}" var="customerMain">
 			<tr>
 				<td align="center"><input name="customerId" type="radio" value="${customerMain.id}"></td>
 				<td>${customerMain.customerName}</td>
 				<td>${customerMain.customerSex}</td>
 				<td>${customerMain.customerYears}</td>
 				<td class="hide" >${customerMain.....}</td>
 			</tr>
 		</c:forEach>
 	</tbody>
</table>

彈框頁面上-- == 單擊單選圓圈的事件+雙擊行選中 ==

$(document).ready(function() {
 	//雙擊行 即可執(zhí)行函數(shù)（行數(shù)據(jù)被選中：radio為checked）
  	$("table tbody tr").dblclick(function(i) {
  		$(this).find("input[type='radio']").prop("checked", true)
  	});
  	//圓圈改變狀態(tài)即可執(zhí)行函數(shù)
  	$("#contentTable tbody tr input").change(function () {
    var ischecked = $(this).prop("checked");
    var index=$(this).parent().parent().index()
    var tr=$("#contentTable tbody tr")
    if(ischecked){
      for(var i=0;i<tr.length;i++){
        if(i!=index){
          $("#contentTable tbody tr:eq("+i+") input").prop("checked",!ischecked);
        }
      }
    }
  })
});

彈框頁面上–選擇好數(shù)據(jù)后帶回主頁面的函數(shù)

<script>
	//給彈框中【確認】按鈕綁定事件
	function toSubmit(){
		//此方法在下方
		var data=getRowData();
		if(data==null){
			layer.alert("請先選擇一位客戶")
			return ;
		}
		window.opener.getCustomerData(data);//調(diào)用主頁面上的方法，給主頁面賦值，最下方有具體方法過程
		window.close();//關(guān)閉彈窗
	}
	//給彈框中【返回】按鈕綁定事件
	function closed(){
		window.close();
	}

	//獲取行對象
	function getRowData(){
		var row = null;
		//鎖定行（循環(huán)遍歷找到被選中的行）
		$("table tbody tr").each(function(){
			var radio = $(this).find("td").eq(0).find("input[type='radio']:checked").val();
			if(radio){
				row = $(this) ;
			}
		});
		//如果此行有數(shù)據(jù)則拼接
		if(row){
			var customerId = row.find("td").eq(0).find("input[type='radio']:checked").val();
			var customerName = row.find("td").eq(1).text();
			var customerSex = row.find("td").eq(2).text();
			var customerYears = row.find("td").eq(3).text();
			//拼接模板 $.trim() jQuery.trim()函數(shù)用于去除字符串兩端的空白字符。該函數(shù)可以去除字符串開始和末尾兩端的空白字符(直到遇到第一個非空白字符串為止)。它會清除包括換行符、空格、制表符等常見的空白字符。
			var data = "[{\"customerId\":\""+$.trim(customerId)
					  +"\",\"customerName\":\""+$.trim(customerName)
				    +"\",\"customerSex\":\""+$.trim(customerSex)
				    +"\",\"customerYears\":\""+$.trim(customerYears)
					  +"\"}]";
		}
		return data ;
	}
	
</script>

調(diào)用主頁面上的給主頁面賦值的方法

<script>
	function getCustomerData(data){
		var json = JSON.parse(data);
		$("#customerId").val(json[0].customerId);
	  $("#customerName").val(json[0].customerName);
	  $("#customerSex").val(json[0].customerSex);
	  $("#customerYears").val(json[0].customerYears);
	  ....
	}
</script>

到此這篇關(guān)于Layui彈框中數(shù)據(jù)表格中可雙擊選擇一條數(shù)據(jù)的實現(xiàn)的文章就介紹到這了,更多相關(guān)Layui彈框雙擊數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: