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颜色选择器ColorPicker实现代码
Nov 14 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 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
使用php4加速网络传输
2006/10/09 PHP
php error_log 函数的使用
2009/04/13 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
vue cli 全面解析
2018/02/28 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
CentOS中升级Python版本的方法详解
2017/07/10 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
最新会计专业求职信范文
2014/01/28 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
导游词之河北野三坡
2019/12/11 职场文书
Nginx配置使用详解
2022/07/07 Servers