layui动态显示表格的列

最新推荐文章于 2024-07-10 22:37:56 发布

qq_35383788

最新推荐文章于 2024-07-10 22:37:56 发布

阅读量1.9k

点赞数

文章标签： js layui

本文链接：https://blog.csdn.net/qq_35383788/article/details/109236899

版权

本文介绍了如何在layui中动态显示表格的列，通过修改layui的`table.js`源码，增加对`cols`的处理，使得`table.reload`能够正确更新列配置。详细步骤包括对`Class.prototype.reload`或`I.prototype.reload`方法的修改，以及在实际代码中如何使用这个更新后的功能。

摘要由CSDN通过智能技术生成

之前百度了很多关于题目相关的结果，结果都不大近人意。直到今天发现官方居然有解决办法，哎，好气啊~不多说了，直接上干货。

官方参考地址：https://gitee.com/sentsin/layui/pulls/23/files

可以看到，在layui原来的基础上，使用table.reload是无法替代旧的cols的：

所以，此处官方给出了一个修改办法：

修改 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中的内容，现在不仅替换了load，还增加了cols的内容替换。

好了，看一下我这边的总体代码要怎么使用（假设此处已经修改了table.js）：

var active = {
    reload: function () {
        ...........//之前的取值就不展示了，此处假设只有一个显示列的条件搜索，如下图:

        var cols = $("#cols").val();
        var table_json = {
            'id':"序号",
            'title' : '主题',
            'priority' : '优先级',
            'status' : '状态',
            'system' : '系统别',
            'taskNo' : '作业编号',
            'questionType' : '问题类型',
            'applier' : '申请人工号',
            'trueName' : '申请人姓名',
            'createDateTime' : '申请时间',
            'handler' : '处理人工号',
            'handlerName' : '处理人姓名',
            'handDateTime' : '上一次处理时间',
            'updater' : '更新人工号',
            'updaterName' : '更新人姓名',
            'updaterDateTime' : '更新日期'
        };
        //每次搜索就得清空table_col和重置array_col
        table_col = [];
        array_col = [{checkbox: true, fixed: true}, {title: '编辑&#