站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: Layui弹框中数据表格中可双击选择一条数据的实现
搜索:
您的位置: 主页 > 教程 > 网页编程 > JavaScript > » 正文

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>
            
最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -