Layui提供的功能如下（预览）
可自行查看：layui官网此模块的链接
着急看双击选中 直接看标黄色部分
假设这是个弹窗里的表格和数据点击圆圈，圆圈变绿则为选中，选中后点击上方查看数据按钮（实际中是确认按钮，实际中点击确认按钮后会关闭弹窗并把json串带到原本页面中）
Layui提供的代码如下（查看代码）
<body> <!-- 表格空架子 --> <table lay-filter="test"></table> <!-- 确认（查看数据按钮） --> <script type="text/html"> <div> <button lay-event="getCheckData">获取选中行数据</button> </div> </script> <script src="https://res.layui.com/layui/dist/layui.js" charset="utf-8"></script> <!-- 注意：如果你直接复制所有代码到本地，上述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: '职业'} ,{field:'wealth', width:135, title: '财富', sort: true} ]] ,page: true }); //头工具栏事件 table.on('toolbar(test)', function(obj){ var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态 switch(obj.event){ case 'getCheckData': var data = checkStatus.data; //获取选中行数据 layer.alert(JSON.stringify(data)); break; }; }); }); </script> </body>
实际需求实例
点击 【选择】 按钮，出现弹框
弹框里有数据表格
点击圆圈为选中当前条数据
点击弹框中【确认】把选中条数据带到主页面
实际代码实例
主页面代码（底，都为自动带出的输入框）
静态部分
<div> <div> <span>客户姓名：</span> <form:input path="customerName" readonly="true"/> <span title="选择"> <input 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> <thead> <tr> <th></th> <th>客户姓名</th> <th>客户性别</th> <th>客户年龄</th> <th>...</th> </tr> </thead> <tbody> <c:forEach items="${page.list}" var="customerMain"> <tr> <td><input type="radio" value="${customerMain.id}"></td> <td>${customerMain.customerName}</td> <td>${customerMain.customerSex}</td> <td>${customerMain.customerYears}</td> <td >${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); } } } }) });
弹框页面上–选择好数据后带回主页面的函数