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制作的产品广告效果
Dec 08 Javascript
jquery validate demo 基础
Oct 29 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
JS验证字符串功能
Feb 22 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
深入理解Node中的buffer模块
Jun 03 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 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删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
python中图像通道分离与合并实例
2020/01/17 Python
python with (as)语句实例详解
2020/02/04 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
文员个人的求职信范文
2013/09/26 职场文书
专业毕业生个性的自我评价
2013/10/03 职场文书
材料化学应届生求职信
2013/10/09 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
教师队伍管理制度
2014/01/14 职场文书
团队精神口号
2014/06/06 职场文书
银行授权委托书样本
2014/10/13 职场文书
单位作风建设自查报告
2014/10/23 职场文书
党员进社区活动总结
2015/05/07 职场文书
道歉信范文
2015/05/12 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers