设置数据表格的各种功能

开发工具与关键技术：Visual Studio + C# + Layui

 

撰写时间：2019.6.27

 

在我们使用Layui table数据表格的时候，经常会遇到各种各样的需求功能，用于对表格进行一些列功能和动态化数据操作。Layui自带的功能可谓是非常强大的，支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。下面我来简单介绍几个功能。

一、编辑单元格并监听单元格编辑

首先你要在需要编辑的单元格列对应的表头，添加edit基础参数，然后选择需要编辑单元格编辑类型，目前只支持输入框。

下面是监听单元格，在我们编辑单元格的时候，通过监听获取我们所修改的值，点击确定或者修改完成鼠标点击单元格外面的时候，弹出提示框，可以得到所在行的所有键值，并且提示框的内容可以自定义设置，如下我设置的是一段提示修改的文字以及获取到的修改后单元格的文本内容。

注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"

二：对表头进行样式设置，根据禁止复选框选择以及行颜色改变

如果有特殊需求，我们可以进行设置table数据表头的样式。然后根据条件隐藏复选框，在判断条件的范围内进行复选框使用，减少误操作。并且在我们做项目的时候，经常会遇到一些业务的数据需要进行区分，所以我们可以根据条件设置行颜色进行区分数据。

如上，在layui的table中，用来触发回调函数的done，直接在加载和初始化layui模块的时候写。我们还可以进行表头的颜色更改，基于dom操作。循环res结果集对象，就可以轻易获得整个表的数据，然后就可循环获得行数据，进而精确到每个单元格。介于此，可以实现诸如复选框按条件隐藏、值条件判断，行变色等等……

三、根据数据库bit类型数据作筛选条件，是否勾选复选框

首先你要在需要编辑的单元格列对应的表头。然后在数据库设置为bit的数据类型，判断选择true或false，也可以设置为枚举类型，然后通过条件判断，是否为勾选复选框。

下面就是一个简单的判断，当数据库的值为true的时候，在表格数据加载和初始化过程中自动勾选复选框，然后通过if，else语句不勾选复选框，也就是值为false的情况。然后lay-skin=’primary’是设置复选框的样式

四、在数据表格行设置操作按钮

为了方便操作单条数据，我们可以直接在数据表格中设置操作列。首先需要在表头行添加操作列，然后设置列的位置。

话不多说，直接上码，在表格行数据中添加操作按钮，获取的操作数据为单行所选中的数据，所以我们根据ID获取到对应行数据。然后设置按钮，同时我们需要在按钮中绑定对应的点击事件。

详细的配置信息请参考：layui官方文档https://www.layui.com/doc/modules/table.html