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="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 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弹框双击数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Layui表格监听行单双击事件讲解
在学MVC过程中,我们一般都是利用layui插件里的layui数据表格加载数据库中的数据,而layui表格里有许多的事件监听,比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行修改.删除操作,双击某条数据调出到其他表中,接下来就讲讲layui表格里的监听行的单双击事件. 如上图所示:因为这个数据表格用到了layui插件,因此在使用前要先引用layui插件里面的css文件以及js文件,然后在"$(function(){});"里面加载和初始化lay
-
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
layui table利用参数新增,修改,删除,查询,双击数据行获取本行数据等.模块化使用layui table表格,通过二次封装实现语法上的解耦使用layui table,使用参数就可以以及外部的方法调用即可实现对layui table表格的操作,通过封装,把更多自主权交给页面自定义,layui:v:2.3.0.感谢layui的作者贤心. 演示效果如下: 以上json显示不完整是录屏的原因,请见谅! var Table = function(ops){ this.dataList = [];
-
Layui弹框中数据表格中可双击选择一条数据的实现
Layui提供的功能如下(预览) 可自行查看:layui官网此模块的链接 着急看双击选中 直接看标黄色部分 假设这是个弹窗里的表格和数据点击圆圈,圆圈变绿则为选中,选中后点击上方查看数据按钮(实际中是确认按钮,实际中点击确认按钮后会关闭弹窗并把json串带到原本页面中) Layui提供的代码如下(查看代码) <body> <!-- 表格空架子 --> <table class="layui-hide" id="test" lay-fil
-
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '<%=path%>/partyMember/getPartyMembersByOrgCode', //width : 1500, height : 'full', cols : [ [ //标题栏 {checkbox : true,LAY_CHECKED : false,filter : 'test'},
-
转换layUI的数据表格中的日期格式方法
转换layUI的数据表格中的日期格式 前端jsp代码 <table class="layui-table" style="width:100%" lay-data="{url:'/why123/user/findUserAll?userType=0', page:true, id:'idTest'}" lay-filter="demo"> <thead> <tr> <th lay-da
-
解决Layui数据表格中checkbox位置不居中的方法
1.情景 使用方法渲染的方式生成数据表格,添加了checkbox,但发现checkbox位置不居中,如下图所示 2.解决办法 通过layui官方社区,找到如下代码,只需要添加如下样式即可解决 .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{ top: 50%; transform: translateY(-50%); } 以上这篇解决Layui数据表格中checkbox位置不居中的方法就是小编分享给大家的全部内容了,
-
layui问题之模拟table表格中的选中按钮选中事件的方法
一.问题 不操作页面,实现table表格中的checkbox选中功能 二.经过 刚开始的思路: 1.通过table的id,找到table渲染时生成的div,即table的下一个兄弟节点div.layui-table-view 2.由于checkbox是固定列,再通过第一步,找到div.layui-table-view的子元素.layui-table-fixed 3.紧接着,找出table的第一行的第一个td里面的input,即tr[data-index="0"] td input(注:
-
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后,选中状态就消失了, 我们希望切换回来的时候, 选中状态还能存在, 因此做了个缓存, 使checkbox 保持选中状态.代码如下: 1.HTML 搜索输入框 <form class="layui-form"> <div class="layui-input-inlin
-
解决layui弹框失效的问题
之前一直用layer弹框组件一直出现这个 layer.js:2 Uncaught TypeError: i is not a function at Object.o.run (layer.js:2) at layer.js:2 at layer.js:2 at layer.js:2问题 后来发现header头部引入js和css文件调换一下就好了,之间文件样式是这样的 <script src="__PUBLIC__/layer/layer.js"></script&g
-
通过T_sql语句向其中一次填入一条数据或一次填入多条数据的方式填充数据
使用T_SQL创建数据库 TestSchool 创建一个学生表 TblStudent 创建学生成绩表 TblScore q tScoreId (成绩 id, 主键 , 自动编号). tSId (学生编号). tEnglish (英语成绩). tMath (数学成绩) 创建老师表 TblTeacher q tTId . tTName . tTGender . tTAge . tTSalary . tTBirthday 并使用T_sql语句向其中一次填入一条数据或一次填入多条数据的方式填入数据. (
-
Flex中对表格中某列的值进行数字格式化保留两位小数
1.问题背景 一般的,表格中展示的比率,对比率的处理是:保留两位小数,并向上保留 2.实现实例 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="libr
-
Layui数据表格之获取表格中所有的数据方法
数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的JS对象数组用来保存数据表格中的原始数据. 2.将上一步创建的JS对象数组也就是原始数据赋给table.render()的data参数. 3.获取表格中的所有数据其实直接获取第一步中创建的JS对象数组即可,参照下面的代码,获取表格中的所有数据就是获取tableContent中的数据. // 存放数据表格中的数据的对象数组tableC