设置数据表格的各种功能

开发工具与关键技术：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

设置数据表格的各种功能相关推荐

layui数据表格搜索php代码,layui实现显示数据表格和搜索功能示例
本文实例讲述了layui实现显示数据表格和搜索功能.分享给大家供大家参考,具体如下: 搜索 layui.use('table', function(){ var table = layui.table ...
小程序微信统计表格_微信小程序简单的数据表格及查询功能
简介: 此项目是一个前后端分离的小demo, 开发工具:idea+微信小程序开发工具前端:界面布局样式和js的跳转后端:依靠SpringBoot的业务逻辑层项目的码云地址: 微信开发工具的使用和 ...
php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
计算机中的表格中怎么排序,如何设置Excel表格的横向排序功能
如何设置Excel表格的横向排序功能腾讯视频/爱奇艺/优酷/外卖充值4折起今天,小编给大家介绍设置Excel表格横向排序功能的方法,希望对大家有所帮助. 具体如下: 1.首先,请大家在自己的电脑 ...
layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...
layui数据表格接口_layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格实现重载数据表格功能(搜索功能）
这篇文章主要介绍了layui数据表格实现重载数据表格功能,以搜索功能为例进行讲解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格 ...
layui 数据表格的搜索分页功能的实现
最近在使用layui+larave做项目,需要使用到table的分页+搜索的功能,一开始没有什么思路,从网上找了几个,用在自己这里并不正确,不知是自己有哪里写错了,还是这几个是不正确,下面是自己亲自试 ...
java实现layui静态表格分页,layui——数据表格分页实例
layui实现数据表格table分页功能,异步加载,表格渲染.总体流程:layui的数据表格设置分页参数开启可以从请求中看到如下图,所以我们需要在后端控制器接收分页数据page和limit进行操作,下 ...

设置数据表格的各种功能

设置数据表格的各种功能相关推荐

最新文章

热门文章