Layui数据表格

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Visual Studio

作者：黄海浪

撰写时间：2019年6月3日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

数据表格是我们经常用到的一个功能，而Layui这个插件的数据表格就很好的为我们打开了方便之门，来看一下如何使用Layui做一个数据表格出来

首先你得给它一个table标签

Layui数据表格

然后给它一个表格头部工具栏，也可以不设置

Layui数据表格

然后通过table.render()方法指定该容器

//加载&&初始化layui模块

layui.use(['layer', 'table'], function () {

layer = layui.layer,

layuiTable = layui.table;

//初始化表格

tabUserManager = layuiTable.render({

elem: '#tabUserManager',

url: "selectUserManager",

cols: [[//表头

{ type: "checkbox", fixed: "left" },

{ field: "UserID", title: "UserID", hide: true },

{ field: "UserNumber", title: "用户号码", align: "center" },

{ field: "ClientIdentification", title: "客户标识", align: "center" },

{ field: "ManagerName", title: "用户经理", align: "center" },

{ field: "UserName", title: "用户名称", align: "center" },

{ field: "Businesstype", title: "业务类型", align: "center" },

{ field: "ToVoidNo", title: "用户状态", align: "center" },

{ field: "MinuteBureau", title: "所在分局", align: "center" },

{ field: "ClientName", title: "客户名称", align: "center" },

]],

page: {

limit: 10,//指定每页显示的条数

limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项

toolbar: "#tabUserManagerToolbar",

});

先初始化Layui模块，然后初始化数据表格，elem 是指定原始table容器的选择器或DOM，URL是数据接口，用来接收数据的，而cols是用来设置表头的，toolbar用来设置表格头部工具栏的，

Page是用来分页的，可以设置每页多少行，默认是false。它还可以设置宽度、高度还有很多属性，根据需求去设置，下面看一下效果如何

Layui数据表格

最后不要忘记了要使用Layui做数据表格得先引入