初始化表格
开发工具与关键技术:MVC
作者:盘洪源
撰写时间:2019年4月20日星期六
在需要把数据库中表的数据请求到页面上,这里就需要用到初始化表格,把你所查询的字段请求到页面上,以一个表的形式呈现,如下图
需要引用个插件
在页面上首先定义一个表
至于样式那些随自己喜欢设置。
在全局变量中先声明这张表和表格的变量。
Var tabStudent; Var layuiTable;
如果这个表格数据实在页面载入的时候就实现的话,那就在页面加载事件($(function){})中初始化这个表格。
开始必须加载和初始化layui模块(表格模块)
Laye是弹出框的意思,table就是layui模板里的表格。
这个时候就可以初始化表格
通过ID获取原Html表格, 然后运用layui模版的表格进行替换, 这样即为表格的初始化
Elem表格ID,url请求数据的链接,cols表头,page就是数据多的时候进行一个分页,data加载本地数据。
表头里的内容怎么理解呢?
有个复选框上面没有,{ type: “checkbox”, fixed: “left” },checkbox(复选按钮),left(将按钮固定在左边)
{ type: “numbers”, title: “序号” },这个就是序号列,将查询出来的数据进行一个排序
{ field: ‘UserID’, title: ‘UserID’, hide: true },{ field: ‘UserName’, title: ‘姓名’ },
这两个就是查询数据库的字段,field里面写查询的字段,title是表头命名字段的意思。
Hide隐藏的意思,因为这个是主键ID,在表格的增删查改的时候需要用到,一般主键ID都是设置为隐藏,这个不需要显示给用户看的。有很多人在表格的增删查改遇到什么ID找不到,可能就是这个主键ID可能没设置,因为一般的人看到想要实现后的表格上根本就不需要这个ID,就没把这个主键ID放在这里,不需要可以将它隐藏,但一定要在表头这里放入主键ID,不然这个表的增删查改没办法搞的。
templet: setOperate这个就是自定义按钮的函数的接头,就是删除、修改的按钮就放在这个函数,你自已必须自定义setOperate这个函数,在这个函数里你就可以写删除、修改按钮这些样式‘
还有个toolbar属性,这个是layui表格模版自带的工具栏参数,是设置layui表格工具栏。这样一个简单的表格初始化就完成了。