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 相关文章推荐
基于jquery的商品展示放大镜
Aug 07 Javascript
ExtJS 入门
Oct 29 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
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
全国中波电台频率表
2020/03/11 无线电
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
PHP strtr() 函数使用说明
2008/11/21 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
python读写ini配置文件方法实例分析
2015/06/30 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
python tqdm库的使用
2020/11/30 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
单位承诺书格式
2014/05/21 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
英语辞职信范文
2015/02/28 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
python3中apply函数和lambda函数的使用详解
2022/02/28 Python