初始化表格

初始化表格

开发工具与关键技术：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表格工具栏。这样一个简单的表格初始化就完成了。