Layui弹框中数据表格中可双击选择一条数据的实现
更新时间：2020年5月7日 11:33 点击：1643
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="http://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 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>到此这篇关于Layui弹框中数据表格中可双击选择一条数据的实现的文章就介绍到这了,更多相关Layui弹框双击数据内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
相关文章
vue+elementui实现点击table中的单元格触发事件--弹框
这篇文章主要介绍了vue+elementui实现点击table中的单元格触发事件--弹框，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- element的dialog弹框在项目中挺常用的。拖拽形式的弹框会提高用户体验，本文实现了vue可拖拽的dialog弹框，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-05-14
- 这篇文章主要为大家详细介绍了vue-openlayers实现地图坐标弹框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-09-25
- 这篇文章主要介绍了使用layui实现左侧菜单栏及动态操作tab项的方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-12-08
- 这篇文章主要介绍了C#实现自定义双击事件,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C# 屏蔽由于崩溃弹出的windows异常弹框,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了Element MessageBox弹框的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要介绍了LayUI+Shiro实现动态菜单并记住菜单收展的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-05-06
- jquery layui分页控件在项目开发阶段经常用到，下面通过本文给大家介绍jQuery layui分页控件的使用，非常不错，感兴趣的朋友一起看下吧...2016-08-24
SpringBoot+Shiro+LayUI权限管理系统项目源码
本项目旨在打造一个基于RBAC架构模式的通用的、并不复杂但易用的权限管理系统，通过SpringBoot+Shiro+LayUI权限管理系统项目可以更好的帮助我们掌握springboot知识点，感兴趣的朋友一起看看吧...2021-04-16- 本文通过实例代码给大家介绍了jquery 双击编辑表格，需要的朋友参考下吧...2017-06-24
- 这篇文章主要介绍了微信小程序 弹框和模态框实现代码的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要为大家详细介绍了react封装全局弹框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-10-15
- 这篇文章主要介绍了Layui弹框中数据表格中可双击选择一条数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-05-07
- 本篇文章为大家介绍了PHP在弹框中获取foreach中遍历的id值并传递给地址栏，有需要的朋友就来参考一下吧。 1.php有时候我们需要再弹框中获取foreach中遍历的数据（例...2017-07-06
- 这篇文章主要给大家介绍了关于.Net学习笔记之Layui多图片上传功能的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用.Net具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2021-09-22
- 在开发winform的时候我发现，当执行双击操作(notifyIcon1_MouseDoubleClick)时，会同时伴随着单击事件(notifyIcon1_MouseClick)的发生。。那如何才能使双击事件不触发单击事件呢？...2020-06-25
- 这篇文章主要介绍了关于Python的pymouse click 双击的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-06-02
- 这篇文章主要介绍了C# MVC 如何使用LayUI实现下拉框二级联动，文中示例代码非常详细，供大家参考和学习，感兴趣的朋友可以了解下...2020-11-03
- 本篇文章主要介绍了详解asp.net core封装layui组件示例分享，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2021-09-22