layui.table快速使用

    科技2024-11-14  11

    创建一个table实例最简单的方法是在页面放置一个元素,代码如下:

    <table id="personageDate"></table>

    绑定容器,设置数据接口,在表头设置对应的字段。渲染方式使用的是方法渲染,将基础参数的设定放在JS代码中,而且table的标签只需要一个选择器。

    //table数据-----------------------------开始 layui.use('table',function() { var table = layui.table //加载personage表格数据-------------------开始 table.render({ elem : '#personageDate',//表格元素选择器 url : 'Personage/selectPersonageAll.do',//数据接口相关参数 limit:5,//每页显示的条数 limits:[5, 10, 20, 30, 40],//每页条数的选择项 page : true,//开启分页 id:'reload',//设置容器唯一ID cols : [ [ //设置表头 //field:设定字段名。字段名的设定非常重要,且是表格数据列的唯一标识 {field : 'personageid',title : '编号',width : 60}, {field : 'name',title : '姓名',width : 75}, {field : 'loginnumber',title : '登录账号',width : 90}, /* templet : 我们都知道LayUi中有模板,就是把我们需要展示的东西放在模板中展示,你就比如我们想要展示一些数据,但是这些数据不是我们想要的数据或者不是我们想要的样子, 这个时候我们可以通过模板前端更改一下,这样就不用经常性的去更改后端的代码,省掉好多的麻烦 */ {field : 'sex',title : '性别',width : 58,templet : function(d) {if (d.sex == 0) {return '女'} else {return '男'}}}, {field : 'phone',title : '电话',width : 120}, {field : 'mailbox',title : '邮箱',width : 60}, {field : 'fax',title : '传真',width : 60}, {field : 'handphone',title : '固定电话',width : 90}, {field : 'youbian',title : '邮编',width : 60}, {field : 'status',title : '状态',width : 60,templet:function(d){if(d.status==0){return'停用'}else{return'启用'}}}, {field : 'time',title : '注册时间',width : 110}, {field : 'comment',width : 200,title : '备注',}, {toolbar : '#perBar',title : '操作'} ] ] }); //加载personage表格数据-------------------结束 }); //table数据-----------------------------结束
    Processed: 0.034, SQL: 8