关于LayUI中表格行数据监听记录

关于LayUI中表格行数据监听记录

  • table.on("控件"(“表格的绑定名字”))
  • 对于表格中自定义按钮监听
    • toolbar配置

table.on(“控件”(“表格的绑定名字”))

这里控件就是row,点击表格对应行,获取对应数据

table.on('row(useruv)', function (obj) {
 //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
                    var data = obj.data; //获得当前行数据
                    console.log("data")
                    console.log(data)
                    var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
                    var tr = obj.tr; //获得当前行 tr 的DOM对象

                });

官方API文档中已说明,只是自己不细心而已。
链接: LayUi官方

对于表格中自定义按钮监听

toolbar配置

上代码

 ,cols: [[ //标题栏
                {field: 'id', title: 'ID', width: 80, sort: true}
                ,{field: 'participants', title: '参与人员', width: 80}
                ,{field: 'is_dissolved', title: '调解结果', minWidth: 80}
                ,{field: 'images', title: '图片附件', minWidth: 80,toolbar:"#barDemo1"}
            ]]

在table.render中 设置标题栏时需要在自己想要设置的列出加上toolbar:"#barDemo1"
而在html控件中需要的配置如下

此处主意在div中每个按钮都需要配置lay-event这个属性
而在监听事件中需要将控件变成tool

table.on('tool(useruv)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            console.log("data")
            console.log(data)
            var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
            var tr = obj.tr; //获得当前行 tr 的DOM对象
        });

再根据layEvent判断对应的按钮时间 即可。

你可能感兴趣的:(关于LayUI中表格行数据监听记录)