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


Posted in Javascript onMay 06, 2020

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="//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>

实际需求实例

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>

到此这篇关于Layui弹框中数据表格中可双击选择一条数据的实现的文章就介绍到这了,更多相关Layui弹框双击数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 Javascript
Vue SSR 即时编译技术的实现
May 06 #Javascript
深入webpack打包原理及loader和plugin的实现
May 06 #Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 #Javascript
让IDE识别webpack的别名alias的实现方法
May 06 #Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 #Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 #Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 #Javascript
You might like
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
Ajax PHP分页演示
2007/01/02 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
python 的列表遍历删除实现代码
2020/04/12 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Python unittest框架操作实例解析
2020/04/13 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
销售简历自我评价
2014/01/24 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
React实现动效弹窗组件
2021/06/21 Javascript
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫