layui使用表格渲染获取行数据的例子


Posted in Javascript onSeptember 13, 2019

需求:使用前端框架layui生成表格,点击表格中一行数据中的按钮,获取到这行数据。

解决办法:

在render中增加字段:

done: function (res, curr, count) {
         // $('.x-body').find('.layui-table-body').find("table").find("tbody").children("tr").on('click', function () {
         //  var id = JSON.stringify($('.x-body').find('.layui-table-body').find("table").find("tbody").find(".layui-table-hover").data('index'));
         //  var obj = res.data[id];
         //  console.log(obj, 'obj')
         //  // fun.openLayer(obj);
         // })
         table.on('tool(test)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
           var data = obj.data; //获得当前行数据
           var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
           var tr = obj.tr; //获得当前行 tr 的DOM对象
           if (layEvent=="invest_perfer"){
             x_admin_show("投资偏好","/echarts1.html?mobil="+data.mobil,"",510);
           }else{
             x_admin_show("用户画像","/echarts4.html?mobil="+data.mobil,"",510);
           }
         });
       }

然后在按钮中一定要增加lay-event属性:

<script type="text/html" id="userPicBtn">
  <span class="layui-btn" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" lay-event="invest_perfer" >投资偏好</span>
  <span class="layui-btn" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" lay-event="member_photo" >用户画像</span>
 </script>

完整代码:

<table id="userlistTable" lay-filter="test"></table>
 <script>
   layui.use('table', function(){
     var table = layui.table;
 
     //第一个实例
     table.render({
       elem: '#userlistTable'
       ,height: 300
       ,url: '/userlist' //数据接口
       ,page: true //开启分页
       ,cols: [[ //表头
         {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left',align:'center'}
         ,{field: 'name', title: '用户名', width:80,align:'center'}
         ,{field: 'sex', title: '性别', width:100, sort: true,align:'center'}
         ,{field: 'mobil', title: '手机', width:150,align:'center'}
         ,{field: 'log_in_time', title: '加入时间', sort: true, width: 250,align:'center'}
         ,{title: '操作', width: 300, toolbar:'#userPicBtn',align:'center'}
       ]],
       data: [{ id: 1, name: '张三' }, { id: 2, name: '李四' }],//没卵用
       done: function (res, curr, count) {
         // $('.x-body').find('.layui-table-body').find("table").find("tbody").children("tr").on('click', function () {
         //  var id = JSON.stringify($('.x-body').find('.layui-table-body').find("table").find("tbody").find(".layui-table-hover").data('index'));
         //  var obj = res.data[id];
         //  console.log(obj, 'obj')
         //  // fun.openLayer(obj);
         // })
         table.on('tool(test)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
           var data = obj.data; //获得当前行数据
           var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
           var tr = obj.tr; //获得当前行 tr 的DOM对象
           if (layEvent=="invest_perfer"){
             x_admin_show("投资偏好","/echarts1.html?mobil="+data.mobil,"",510);
           }else{
             x_admin_show("用户画像","/echarts4.html?mobil="+data.mobil,"",510);
           }
         });
       }
 
     });
 
 
 
   });
 
 </script>
 <script type="text/html" id="userPicBtn">
  <span class="layui-btn" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" lay-event="invest_perfer" >投资偏好</span>
  <span class="layui-btn" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" lay-event="member_photo" >用户画像</span>
 </script>

效果展示:

点击投资偏好或者用户画像按钮都可以获取该行的数据。

layui使用表格渲染获取行数据的例子

以上这篇layui使用表格渲染获取行数据的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
javascript表单事件处理方法详解
May 15 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 #Javascript
layui表格数据复选框回显设置方法
Sep 13 #Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 #Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 #Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 #Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 #Javascript
深入了解JavaScript 防抖和节流
Sep 12 #Javascript
You might like
PHP中英混合字符串截取函数代码
2011/07/17 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
JS 有名函数表达式全面解析
2010/03/19 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python使用pil生成缩略图的方法
2015/03/26 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
酒店管理自荐信
2013/10/23 职场文书
小学教师师德反思
2014/02/03 职场文书
篝火晚会策划方案
2014/05/16 职场文书
学习之星事迹材料
2014/05/17 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
车间统计员岗位职责
2015/04/14 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书