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

需求：使用前端框架获得生成表格，点击表格中一行数据中的按钮，获取到这行数据。

解决办法：

在提出中增加字段：

done:函数(res，curr，count) { //$(').x-body ').查找('。layui-表体').查找(“表”).查找(' tbody ').儿童(' tr ').on('click '，function(){//var id=JSON。字符串($(').x-body ').查找('。layui-表体').查找(“表”).查找(' tbody ').查找('。layui-table-hover ').数据('索引');//var obj=RES . data[id]；//console.log(obj，' obj ')/////fun。open layer(obj)；//}) table.on('tool(test)'，function (obj) { //注：工具是工具条事件名，测试是桌子原始容器的属性lay-filter='对应的值定义变量数据=obj.data//获得当前行数据obj.event//获得外行事件对应的值（也可以是表头的事件参数对应的值)var tr=obj。tr；//获得当前行tr的数字正射影像图对象if(layEvent==' invest _ perfer '){ x _ admin _ show('投资偏好，'/echart 1。html？mobil=' data.mobil ' '，510)；}else{ x_admin_show('用户画像，'/echart 4。html？mobil=' data.mobil ' '，510)；} });}然后在按钮中一定要增加外行事件属性：

脚本类型=' text/html ' id=' usepicbtn ' span class=' layui-BTN ' href=' JavaScript :'rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' lay-event=' invest _ perfer '投资偏好/span=' layui-BTN ' href=' JavaScript :'rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' lay-event=' member _ photo '用户画像/span/脚本完整代码：

table id=' UserListTable ' lay-filter=' test '/table script layui。使用(' table '，function(){ var table=layui。桌子；//第一个实例桌子。render({ elem : ' # UserListTable '，height: 300，url: '/userlist' //数据接口，第：页true //开启分页，cols: [[ //表头{field: 'id '，title: 'ID '，width:80，sort: true，fixed: 'left '，align:'center'}，{field: 'name '，title: '用户名，宽度：80,对齐： '中心}，{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:函数(res，curr，count) { //$(').x-body ').查找('。layui-表体').查找(“表”).查找(' tbody ').儿童(' tr ').on('click '，function(){//var id=JSON。字符串($(').x-body ').查找('。layui-表体').查找(“表”).查找(' tbody ').查找('。layui-table-hover ').数据('索引');//var obj=RES . data[id]；//console.log(obj，' obj ')/////fun。open layer(obj)；//}) table.on('tool(test)'，function (obj) { //注：工具是工具条事件名，测试是桌子原始容器的属性lay-filter='对应的值定义变量数据=obj.data//获得当前行数据obj.event//获得外行事件对应的值（也可以是表头的事件参数对应的值)var tr=obj。tr；//获得当前行tr的数字正射影像图对象if(layEvent==' invest _ perfer '){ x _ admin _ show('投资偏好，'/echart 1。html？mobil=' data.mobil ' '，510)；}else{ x_admin_show('用户画像，'/echart 4。html？mobil=' data.mobil ' '，510)；} });} });});/script script type=' text/html ' id=' usepicbtn ' span class=' layui-BTN ' href=' JavaScript :rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' lay-event=' invest _ perfer '投资偏好/span class=' layui-BTN ' href=' JavaScript :rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' lay-event=' member _ photo '用户画像/span/脚本效果展示：

点击投资偏好或者用户画像按钮都可以获取该行的数据。

以上这篇获得使用表格渲染获取行数据的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。