【WEB前端开辟】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字段挑选功用引见的细致内容,更多请关注ki4网别的相干文章!

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注