layui 监听单元格点击事件，获取当前点击单元格的内容以及 所在的表头内容

特别是后台的一些管理系统中  业务中还是会碰见这样的需求呢   如果你的后台使用layui写的话  在表格中

layui 也给我们提供了监听单元格的事件  但是好像不能直接获取到单元格内容个  和 对应的表头

其实 还是可以解决  换个角度使劲就会发现新的世界  不是吗

event: 'username'     在每个表头中加一个  event 属性 这样就可以监听表头事件   记住个  event  和 当前列的字段最好保持一样

table.render({
                elem: '#demo'
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    { field: 'id', width: 80, title: 'ID', sort: true }
                    , { field: 'username', width: 80, title: '用户名', event: 'username' }
                    , { field: 'sex', width: 180, title: '性别', sort: true, event: 'sex' }
                    , { field: 'age', width: 180, title: '年龄', sort: true, event:'age' }
                ]],
                data: [
                    { id: 1, username: '张三', sex: '女', age: '23' },
                    { id: 1, username: '李四', sex: '男', age: '19' },
                    { id: 1, username: '王麻子', sex: '女', age: '27' },
                    { id: 1, username: '胖子', sex: '人妖', age: '26' },
                    { id: 1, username: '唐三', sex: '美女', age: '24' },
                ]
            });

 然后我们就可以获取到内容 和 表头内容了    根据那个event判断对应的是那个表头

// 监听单元格点击事件
            table.on('tool(demo)', function (obj) {
                var data = obj.data;
                var type = '';
                switch(obj.event) {
                    case 'sex' :
                        type = '性别';
                        break;
                    case 'username':
                        type = '姓名';
                        break;
                    case 'age':
                        type = '年龄';
                        break;

                }
                console.log('你点击的单元格的内容是' + data[obj.event], '------对应的列是' + type)
            });

我们看下实际的效果哈

关注我  持续 更新前端知识    坚持