首页 » 网站建设 » layuiphp筛选技巧_干活layui动态显示表格的列 自己着手 丰衣足食

layuiphp筛选技巧_干活layui动态显示表格的列 自己着手 丰衣足食

访客 2024-12-09 0

扫一扫用手机浏览

文章目录 [+]

A说:XX工啊,我这个用户工号用不到啊,你直接去了吧。
你看表格这么多列,我看的都烦。

OK,听你的,我去掉.....

layuiphp筛选技巧_干活layui动态显示表格的列 自己着手 丰衣足食

结果没几天,HR那边来问题了:XX工啊,我只有姓名怎么知道这个人到底是谁啊,厂里5000多个人,好多人重名的,你这边肯定要加上工号的啊。

layuiphp筛选技巧_干活layui动态显示表格的列 自己着手 丰衣足食
(图片来自网络侵删)

what?

这帮臭婆娘,哎!
尽不干人事。



那咋办嘛?

也大略,我把列放出来给你们自己选,这下总没这么多事了吧。

但是layui本身只在前台做筛选,我关闭页面或者重新登录就gg了啊。

没事,遇事未定先百度。
好家伙,网上一顿顿找找......嘿,我就奇怪了,根本连类似的答案都没有。
这......这......这一giao我里giaogiao啊。

好在,终于官方给出了回答。

先上demo:

layui官方办理方案

图片的大意是:当你利用table.reload重载表格的cols的时候,是没有办法做到的。
直白的说便是旧的cols不会由于你在table.reload中添加新的cols而被更换。
那到底怎么办理嘛。
别急,官方这么说:

layui官方办理方案

我给大伙翻译翻译:

修正 src/lay/modules/table.js下的Class.prototype.reload方法(可能有的版本是I.prototype.reload),增加:

if (options.cols && options.cols.constructor === Array) delete that.config.cols;

把稳,此处的options在你的代码中到底是options还是e,而且我的版本还得写成如下的格式:

e.cols && e.cols.constructor === Array && delete i.config.cols,

以是详细的还得看你的layui版本,不过思路都是一样的。

从上面代码可以看出,增加的代码的意思无非便是多了一层判断:

以前reload的时候,只更换load中的data,现在不仅更换了data,还增加了cols的内容更换。

好了,看一下我这边的总体代码要怎么利用(假设此处已经修正了table.js):

代码一

代码二

代码三

看得头疼是不是?没紧要,我写的,没人review代码,嘿嘿。
你不用在乎上面每句代码做了啥,就关心一件事:上面的所有操作都是用来给array_col赋值用的,重点不才面:

table.redner

关注这一行: cols: [array_col],

这里的array_col便是上文通过一系列操作得到的array_col,每次table.render的时候,都会根据array_col的最新值来渲染table。
那么如何记住呢?没办法,只能每次点击查询的时候,向数据库插入最新的查询条件......

在这里我再解释一下:此处table.render的时候我并没有加上url,取而代之的是data: [],目的是为了防止首次页面加载的时候去加载表格(为什么这么做我已经忘却了-_-,怪我,代码规范做得不好)。
那么url详细放到哪里呢?没错,便是在table.reload的时候。

好了,看看终极的样子吧:

筛选一

筛选二

筛选三

标签:

相关文章