需求:使用前端框架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"+data.mobil,"",510); }else{ x_admin_show("用户画像","/echarts4.html"+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"+data.mobil,"",510); }else{ x_admin_show("用户画像","/echarts4.html"+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使用表格渲染获取行数据的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]