layui table 字段筛选功能

讨论 已结 精帖
126 6285
岁月小偷
悬赏:80飞吻
最近看到有小伙伴问关于table字段筛选的相关的问题,先看效果,使用过excel的应该很熟悉



功能比较直白无需赘述,直接说实现思路还有需要解决的问题。
首先是在这个是针对字段的,所以给cols新增一个配置项,来决定哪些列需要有过滤的功能,一般来说只有那些数据可以归纳成几种分布的列才有做这个过滤的需求,比如例子中的性别列还有职业列,id列这些的意义不大,当然也不是绝对的,有的就是需要呢。所以新增了一个配置项filter: true/false/null

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

这个是主要的代码篇幅太长没办法全显示,简单介绍一下,就是利用table.eachCols去遍历表头,把需要添加图标的给加上图标就好了,注意这时候实际是不会生成我们后面点击看到的里面的复选的内容的,实际这些都是靠后面的点击事件再做处理就好,在点击的事件中去遍历得到当前这一列的值的一个集合,注意!这里是我们最终看到的内容的集合,而不是针对数据的,因为字段有templet可以进行转换,所以即使背后的值可能不一样最终显示出来的也有可能是一样的,这里应该是归纳为相同的一类。

然后点击这个筛选的时候都做了什么呢?除了上面说了得到一个集合之外,就是利用这个集合作为一个table的数据,并且根据逻辑得到是否初始选中,然后layer去弹出一个弹框把表格渲染到里面去;这里有一个关键的就是是否要多列筛选的支持,就是说可以先赛选一个列,然后点击另外一个列在前面筛选的前提下筛选这个列,目前是直接否决了这个需求,因为太复杂了而且很难解释,因为他们之间都是会相互影响的,这边的列隐藏之后对于那边的列它可能会出现部分分类它的数据部分是显示的部分是隐藏的,这时候怎么办?唯一一个比较严谨的就是新增一种状态叫半选状态,但是实际应用场景应该遇到的不大,要实现却是相当费劲的,所以干脆不支持,这个在excel中好像也是这么个限定,不知道有没有记错。

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

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

存在问题:细心的应该会看到字段筛选之后下面的统计列没有更新,实际这个是不对的,筛选之后部分列不显示了,那么对应的统计应该是我们看到的列的统计,这个可以自己考虑下如何处理,我的思路是封装出来一个针对表格统计的方法,可以对数据进行计算然后更新到对应的dom节点上,原始的table提供的统计最大的作用就是生成一个固定在下方的容器节点,至于里面的内容实际是不要紧的,很多小伙伴会问layui能不能提供统计行的数据是后台返回的支持之类的问题,实际这些都可以在上面提到的这个封装方法里面去处理,也可以变得很自由,不仅仅是求和,还可以是各种各样的计算之类的,但是这个不是这个帖子的重点,后面再实现
回帖
  • sakuya88
    2019-1-15
    哈哈 老哥这么巧 我也在搞这块。



    但我没想改源码 所以用了“外挂”方式。


    老哥~ 有个问题。我和API同事们也研究了好久了。
    1、服务器分页 2、其他高级检索项。这样一来是不是只有API返回我所有某个字段的去重的对象数组。
    0 回复
  • 莫辞
    2018-12-12
    [good] [good] [good]
    11 回复
  • Minhat
    2018-12-12
    66666666666666666666666666666666666666
    4 回复
  • @莫辞 @Minhat 谢谢认可[微笑] [微笑]
    2 回复
  • 日後再說
    2018-12-13
    看到你发的贴,第一件事是收藏
    1 回复
  • 大隐于市
    2018-12-13
    必须赞一个[good]
    1 回复
  • 6666666666666666666666
    1 回复
  • @fd 众口难调哈,没办法整理出一个大家都适合的哈,不过我的帖子一般不收藏也能轻易找到,比如一些比较有用的被贤心大大收录在“精贴集锦”里面了,或者直接进我主页[嘻嘻]
    1 回复
  • QQ糖
    2018-12-14
    @岁月小偷 我写了好多公式,然后今天遇到这个问题 ,心塞呀,我还真没想到js会有这个问题,这该死的编程语言,有bug也不修复一下,难受[泪] [泪] [泪] [泪] [泪] [泪]
    1 回复
  • 闫伟115
    2018-12-18
    @莫辞 test
    1 回复
  • @岁月小偷 layui table初始化怎么加载loading啊,岁月小偷哥哥
    1 回复
  • 沉默死海
    2018-12-13
    真好啊~~楼主高手,期待集合到新版的layui
    0 回复
  • @日後再說 谢谢认可,都是比较实用的小玩意哈[嘻嘻]
    0 回复
  • @快乐浪子哥 @大隐于市 谢谢认可[微笑] [微笑]
    0 回复
  • @岁月小偷 期待:贤心下个版本加入了。。。
    0 回复
  • @沉默死海 谢谢认可,期待layui越来越好用,应该会吸收一些常见的大家都可能会用到的实用的功能吧,但是他们整理到源码中的话就可以更加系统的合理的整合进去,期待
    0 回复
  • PMADTPMMAS
    2018-12-13
    大神。这个table设置隔行变色,多级表头也会变色。怎么解决呢。
    0 回复
  • @PMADTPMMAS 你说的是默认的layui的样式还是你新增的样式呢?
    0 回复
  • fd
    2018-12-14
    [微笑] 大佬 果然高产量。大佬你给你写的帖子 整合一下,好不好,然后只收藏一个就行了。
    0 回复
  • [good] 这个必须要支持,收藏了
    0 回复
  • @一鸣童鞋 谢谢认可[微笑]
    0 回复
  • table字段筛选功能,挺有用的,回复一下,以后需要的时候好找
    0 回复
  • 收藏收藏,会用到的
    0 回复
  • 0 回复
  • 支持一下······
    0 回复
  • 0 回复
  • QQ糖
    2018-12-14
    @岁月小偷 师傅在么,为什么js计算的时候小数出现多位,比如189.1+132.7=321.79999999999995,这个该怎么办呀,我写了好多这样的公式,有什么简单的解决办法么
    0 回复
  • @QQ糖 这个是js关于浮点数精度的问题,计算机只能表达1/2,1/4,1/8,...1/1024这些,但是我们看到的0.1实际上是没有办法精确的表达的只能无限的接近,这就埋下了一个地雷就是浮点计算的,可以试试0.1+0.2,所以要解决这个问题,一般的思路就是将他们转化成整数然后求和之后再除以之前为了让他们变成整数所乘的值,比如0.1+0.2要用(0.1*10 + 0.2*10)/10;如果是0.01 + 0.2要用(0.01*100 + 0.2*100)/100;这样子去算结果,思路就是这个啦,你试着可以封装一下额。
    0 回复
  • QQ糖
    2018-12-14
    @岁月小偷 对了师傅,我今天发现在写layui.table 的时候,小数点相加的时候,把小数点后面的数省略了,这是怎么回事呀。
    0 回复
  • @QQ糖 这不是bug,是我觉得这个追究起来估计要怪为啥是只有正电子和负点子[嘻嘻]
    0 回复