Layui组件Table绑定行点击事件和获取行数据

一个项目里面用了layui,简直无数个坑...

这里先记录一个行点击事件的坑,后面慢慢补充.

初始化表格完成后利用事件给table(定位table需要在HTML代码中给table放入指定div)的tr绑定双击事件,然后获取Index,再从数据集里面取出行数据;


done: function(res, curr, count){
    $('#div').find('.layui-table-body').find("table" ).find("tbody").children("tr").on('dblclick',function(){
        var id = JSON.stringify($('#div').find('.layui-table-body').find("table" ).find("tbody").find(".layui-table-hover").data('index'));
        var obj = res.data[id];
        fun.openLayer(obj);
    })
}

在使用 layuitable 组件时,可以通过调用 table.render() 方法来实现数据绑定。具体步骤如下: 1. 引入 layuitable 模块和 jQuery 库,例如: ```html <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> ``` 2. 在 HTML 页面中定义一个 table 元素,例如: ```html <table id="demo" lay-filter="test"></table> ``` 其中,lay-filter 属性用于指定表格的筛选器,后面会用到。 3. 编写 JavaScript 代码,通过 AJAX 请求获取数据,并将数据绑定到表格中,例如: ```javascript // 定义一个数组,用于存放模拟数据 var data = [ {id: 1, name: '张三', age: 20}, {id: 2, name: '李四', age: 22}, {id: 3, name: '王五', age: 25}, {id: 4, name: '赵六', age: 28}, ]; // 使用 table.render() 方法将数据绑定到表格中 layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', // 指定要渲染的元素 data: data, // 指定要绑定数据 cols: [[ // 表头定义 {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'} ]] }); }); ``` 在上面的代码中,首先定义了一个数组 data,用于存放模拟数据。然后使用 layui.use() 方法加载 table 模块,并在回调函数中调用 table.render() 方法将数据绑定到表格中。其中,elem 属性指定要渲染的元素,data 属性指定要绑定数据,cols 属性指定表头定义。 4. 最后,通过 AJAX 请求获取数据并更新表格时,可以调用 table.reload() 方法,例如: ```javascript // 定义一个函数,用于重新加载表格 function reloadTable() { $.ajax({ url: '/getData', // 请求数据的 URL type: 'get', success: function(res) { // 将新数据绑定到表格中 layui.use('table', function(){ var table = layui.table; table.reload('test', { data: res }); }); } }); } ``` 在上面的代码中,首先定义了一个函数 reloadTable,用于重新加载表格。然后通过 AJAX 请求获取数据,将新数据绑定到表格中。需要注意的是,调用 table.reload() 方法时需要传入表格的筛选器(即 lay-filter 属性的值)。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值