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

需求：使用前端框架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使用表格渲染获取行数据的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。