DDR爱好者之家

Layui弹框中数据表格中可双击选择一条数据的实现
站长资源 2024/12/27 佚名
52 1538
DDR爱好者之家 Design By 杰米

Layui提供的功能如下（预览）

可自行查看：layui官网此模块的链接
着急看双击选中 直接看标黄色部分

Layui弹框中数据表格中可双击选择一条数据的实现

假设这是个弹窗里的表格和数据点击圆圈，圆圈变绿则为选中，选中后点击上方查看数据按钮（实际中是确认按钮，实际中点击确认按钮后会关闭弹窗并把json串带到原本页面中）

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

<body>
<!-- 表格空架子 -->
<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- 确认（查看数据按钮） -->
<script type="text/html" id="toolbarDemo">
 <div class="layui-btn-container">
  <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
 </div>
</script> 
<script src="/UploadFiles/2021-04-02/layui.js">


实际需求实例


Layui弹框中数据表格中可双击选择一条数据的实现


    
  
  • 点击 【选择】 按钮，出现弹框
    • 
  
  • 弹框里有数据表格
    • 
  
  • 点击圆圈为选中当前条数据
    • 
  
  • 点击弹框中【确认】把选中条数据带到主页面
    • 



实际代码实例


主页面代码（底，都为自动带出的输入框）


静态部分





<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')
} 





弹窗页面代码


弹窗页面中–静态部分





<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() {
 	//双击行 即可执行函数（行数据被选中：radio为checked）
  	$("table tbody tr").dblclick(function(i) {
  		$(this).find("input[type='radio']").prop("checked", true)
  	});
  	//圆圈改变状态即可执行函数
  	$("#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);
        }
      }
    }
  })
});





弹框页面上–选择好数据后带回主页面的函数





<script>
	//给弹框中【确认】按钮绑定事件
	function toSubmit(){
		//此方法在下方
		var data=getRowData();
		if(data==null){
			layer.alert("请先选择一位客户")
			return ;
		}
		window.opener.getCustomerData(data);//调用主页面上的方法，给主页面赋值，最下方有具体方法过程
		window.close();//关闭弹窗
	}
	//给弹框中【返回】按钮绑定事件
	function closed(){
		window.close();
	}

	//获取行对象
	function getRowData(){
		var row = null;
		//锁定行（循环遍历找到被选中的行）
		$("table tbody tr").each(function(){
			var radio = $(this).find("td").eq(0).find("input[type='radio']:checked").val();
			if(radio){
				row = $(this) ;
			}
		});
		//如果此行有数据则拼接
		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()函数用于去除字符串两端的空白字符。该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止)。它会清除包括换行符、空格、制表符等常见的空白字符。
			var data = "[{\"customerId\":\""+$.trim(customerId)
					  +"\",\"customerName\":\""+$.trim(customerName)
				    +"\",\"customerSex\":\""+$.trim(customerSex)
				    +"\",\"customerYears\":\""+$.trim(customerYears)
					  +"\"}]";
		}
		return data ;
	}
	
</script>





调用主页面上的给主页面赋值的方法





<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>
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米