layui列表筛选列_layui框架的table字段筛选功能介绍

首先是在这个是针对字段的，所以给cols新增一个配置项，来决定哪些列需要有过滤的功能，一般来说只有那些数据可以归纳成几种分布的列才有做这个过滤的需求，比如例子中的性别列还有职业列，id列这些的意义不大，当然也不是绝对的，有的就是需要呢。

所以新增了一个配置项filter: true/false/null

然后在表格渲染完毕之后给表头对应的字段添加上过滤的那个图标和事件

这个是主要的代码篇幅太长没办法全显示，简单介绍一下，就是利用table.eachCols去遍历表头，把需要添加图标的给加上图标就好了，注意这时候实际是不会生成我们后面点击看到的里面的复选的内容的。

实际这些都是靠后面的点击事件再做处理就好，在点击的事件中去遍历得到当前这一列的值的一个集合。

注意！这里是我们最终看到的内容的集合，而不是针对数据的，因为字段有templet可以进行转换，所以即使背后的值可能不一样最终显示出来的也有可能是一样的，这里应该是归纳为相同的一类。

然后点击这个筛选的时候都做了什么呢？

除了上面说了得到一个集合之外，就是利用这个集合作为一个table的数据，并且根据逻辑得到是否初始选中，然后layer去弹出一个弹框把表格渲染到里面去。

这里有一个关键的就是是否要多列筛选的支持，就是说可以先赛选一个列，然后点击另外一个列在前面筛选的前提下筛选这个列，目前是直接否决了这个需求，因为太复杂了而且很难解释。

因为他们之间都是会相互影响的，这边的列隐藏之后对于那边的列它可能会出现部分分类它的数据部分是显示的部分是隐藏的。

这时候怎么办？

唯一一个比较严谨的就是新增一种状态叫半选状态，但是实际应用场景应该遇到的不大，要实现却是相当费劲的，所以干脆不支持，这个在excel中好像也是这么个限定，不知道有没有记错。

最后是监听这个表格的复选事件，背后的实际的逻辑就是把对应的tr给显示或者隐藏。然后点击打开这个过滤的选项的时候也是根据table内部的tr的显示隐藏情况来决定是默认选中还是未选中。

然后因为图标在layui提供的里面找不到合适的，新增了一个样式文件来支持，注意加入：

存在问题：细心的应该会看到字段筛选之后下面的统计列没有更新，实际这个是不对的，筛选之后部分列不显示了，那么对应的统计应该是我们看到的列的统计，这个可以自己考虑下如何处理。

我的思路是封装出来一个针对表格统计的方法，可以对数据进行计算然后更新到对应的dom节点上，原始的table提供的统计最大的作用就是生成一个固定在下方的容器节点。

至于里面的内容实际是不要紧的，很多小伙伴会问layui能不能提供统计行的数据是后台返回的支持之类的问题，实际这些都可以在上面提到的这个封装方法里面去处理，也可以变得很自由，不仅仅是求和，还可以是各种各样的计算之类的，但是这个不是这个帖子的重点，后面再实现。

测试页面： https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled

gitee项目： https://gitee.com/sun_zoro/layuiTablePlug

layui列表筛选列_layui框架的table字段筛选功能介绍相关推荐

php 筛选数组,php数组如何按照字段筛选
php数组按照字段筛选的方法: 1.使用foreach遍历数组的方法筛选数据 foreach在PHP中常用于遍历数组,进而对数组中的元素进行处理,下面使用foreach遍历$arr数组,并对数组中字段 ...
layui列表筛选列_layUI实现列表查询功能
layUI可以直接使用本地的json文件进行列表数据渲染,但,我们会发现,官网ctr+c ctr+v 过来的代码在做查询时每次看起来都有列表刷新的动作,但实际操作无效,百度了一大圈也没找到具体的原因, ...
layui 可以商用吗_layui框架的优缺点是什么
layui框架的优点有它属于轻量级框架,简单适合后端人员开发:缺点是技术还不是很成熟,由于需要查询DOM操作因此在前端交互上较麻烦 layui是一款模块化的前端框架,因其简单而又充实的内在而受到欢迎. ...
layui按钮展开、_layui框架，点击某个按钮，让layui的日期插件选中的值清空
利用layui的layDate控件, 在一个弹窗里面用的, 弹窗和当前页面同为一个页面, 在点击关闭弹窗时要让layDate之前选的值清空掉相当与把这个控件刷新了一次大神们该怎么做? 用来约束选择 ...
layui表格筛选列不随页面刷新重置
Layui table 自带筛选列的功能,但是这个筛选列会随着页面的刷新重置.用户第二次进入页面或者进行table手工渲染,都会使得筛选项重置. 本例利用layui自带的本地储存进行筛选列的数据保存, ...
layui根据条件显示列_layui按条件隐藏表格列的实例
我就废话不多说了,直接上关键代码吧!给大家做个参考 layui.use(['table','form','laypage'], function() { var table = layui.table ...
Layui框架中table解决日期格式问题
Layui框架中table解决日期格式问题参考文章: (1)Layui框架中table解决日期格式问题 (2)https://www.cnblogs.com/slacker-z/p/996347 ...
js layui跳转页面_Layui数据表格跳转到指定页的实现方法
Layui数据表格跳转到指定页的实现方法 1.获取数据表格下分页组件中的页码输入框,具体元素在Elements中位置如下 2.获取上述input并设置其value属性值为目标跳转页面页码 $(&quo ...
layui分成两列相同的表格_干货！layui动态显示表格的列自己动手丰衣足食
众所周知啊,layui是可以手动筛选列的.但是这个筛选只限当前,你要是重新关闭当前页面或者登录进来,就又显示默认的列.可能有的人会说:那就直接给出别人想要的默认的列就行了嘛.但是众口难调啊.我就真的遇 ...

layui列表筛选列_layui框架的table字段筛选功能介绍

layui列表筛选列_layui框架的table字段筛选功能介绍相关推荐

最新文章

热门文章