layui数据表格layui.table.render

article/2025/9/17 3:11:17

通过一个简要的例子来介绍一下相关功能。主要我写项目中常用的属性和方法都介绍出来了，如果需要其他功能，可以看看官网。
页面

<table id="demo" lay-filter="demo_table_filter"></table>

<script>
layui.use('table', function(){var demoTable = table.render({elem: '#demo',  //指定原始 table 容器的选择器或 DOM，方法渲染方式必填height: 312,  //设定容器高度(如果设置滚动条，必须定高)url: '/demo/table/user/', //数据接口method:'post', //请求方式parseData: function (res) {  //res是请求返回的数据，可以在parseData中对数据进行一些处理，返回layui要求的格式/*......*/return {'code': 0, //接口状态'msg': '', //提示文本'count': res.length, //数据长度'data': res //数据列表，是直接填充进表格中的数组}},request: { //当接口需要请求参数时，在这修改,属性名不能修改,只能更改参数pageName: 'newName', //开始的页码的参数名称,newName是你接口需要的名字，默认：pagelimitName: 'newNumber' //每页数据量的参数名,newNumber是你接口需要的名字，默认：limit},where: { //这里添加接口需要的除页码页号外的参数。如果无需传递额外参数，可不加该参数token: 'sasasas', id: 123}, page: { //表格添加分页的，如果不需要分页，可以不添加page属性layout: ['prev', 'page', 'next', 'skip', 'limit', 'count'], //自定义分页布局curr: 0, //设定初始在第 0 页，从第0页开始limit: 15, //每页显示15条数据groups: 5, //只显示 1 个连续页码first: false, //不显示首页last: false, //不显示尾页},cols: [[  //表头/*这边还有一下常用属性:hide:Boolean :是否隐藏,可以放标识码之类不显示,操作时需要的参数.align:string :对齐方式type:string  :checkbox,radio等fixed:left/right :固定列,只能固定在左或者右style:"background-color: #5FB878; color: #fff;" :可修改这一列的样式*///res数组的每一条对象中，属性名和field相同，就自动填充。{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},{field: 'username', title: '用户名', width:80},{field: 'sex', title: '性别', width:80, sort: true},{field: 'city', title: '城市', width:80},{field: 'sign', title: '签名', width: 177},{field: 'experience', title: '积分', width: 80, sort: true},{field: 'score', title: '评分', width: 80, sort: true},{field: 'classify', title: '职业', width: 80},{field: 'wealth', title: '财富', width: 135, sort: true},{	//表格最后一栏如果是操作栏，可以删除和修改field: 'opt',minWidth: '150',title: '操作',templet: function (d) {return ` <div class="demo-table-opt demo-table-delete" lay-event="demo_table_delete">刪除</div><div class="demo-table-opt demo-table-edit" lay-event="demo_table_edit">修改</div>`;}}]]}); 
});
</script>

关于表格操作

// 表格操作//table元素中lay-filter属性的参数名↓layui.table.on('tool(demo_table_filter)', function (obj) {var data = obj.data;if (obj.event === 'demo_table_delete') {layer.confirm('确定删除此数据吗？', { closeBtn: 0, title: false, icon: 3, btn: ['确定', '取消'] }, function (deleteLayer)  //点击完弹窗确定按钮后的回调{var index = layer.load(0, { shade: 0.1 });api.holidayDel({ id: data.id }).done(function (resp) //接口访问成功回调{layer.close(index);layer.close(deleteLayer);// $(obj.tr).remove();demoTable.reload(); //重新加载表格layer.msg('删除成功！', { icon: 1, time: 2000, shade: 0.2, shadeClose: true });}).fail(function (resp) //接口访问失败回调{layer.close(index);layer.close(deleteLayer);layer.msg(resp.responseJSON.message, { icon: 5, anim: 6, time: 3000, shade: 0.1, shadeClose: true });;});},function (deleteLayer)  //点击完弹窗取消按钮后的回调{layer.close(deleteLayer);});} else if (obj.event == 'demo_table_edit') {/*进行一些修改操作，比如跳转到修改页面，或者弹窗出修改窗口*/}});//双击行事件layui.table.on('rowDouble(demo_table_filter)', function(obj) {//双击行一般是进入详情页面//例：通过该行的id，进行带参数页面跳转 let id = obj.data.id;location.href = "#/main/second?id=" + id;});