BootstrapTable-treeview 设置展开层级

最新推荐文章于 2024-09-24 07:44:20 发布

最新推荐文章于 2024-09-24 07:44:20 发布

阅读量9.5k

点赞数 1

分类专栏： java

本文链接：https://blog.csdn.net/qq_35473192/article/details/82850446

版权

java 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

项目中使用BootstrapTable-treeview 实现了一个组织结构的modal，但是客户有要求希望可以在页面去控制整个树形表格的展开层级，我在treeview的基础上增加了一个openTo方法去实现整个功能。

bootstraptable-treeview.js

//展开指定层级 updateByNio
        BootstrapTable.prototype.openTo = function (nid) {
            this.collapseAllTree();
            this.nId = nid;
            data = this.data;

            var that = this;
            var roots = $.grep(this.data, function (row, index) {
                return row.parentId == null;
            });

            for (var i = 0; i < this.nId - 1; i++){
                var child = null;
                if (i === 0) {
                    var root = roots;
                    child = getChild(root[i], data, that.options.treeId);
                    $.each(child, function (i, n) {
                        n.hidden = false;
                    });
                }

                if (root.length != 1) {
                    console.log(root.length);
                    $.each(root, function (index, item) {
                        child = getChild(item, data, that.options.treeId);
                        $.each(child, function (i, n) {
                            n.hidden = false;
                        });
                    })
                }

                root = child;

            }
            that.initBody(true);

        }

增加了方法后是不能直接调用的，需要将该方法名加到allowedMethods数组中。

bootstraptable.js

var allowedMethods = [
        'getOptions','openTo',

页面调用：

        $('#zou').click(function () {
            let value = $('input[name="level"]').val();
            $('.treeTable').bootstrapTable('openTo', value);
        });

源码：https://pan.baidu.com/s/1eG87aJbwi_yOZGtfXnrWOA

j8qt