Calculation/app/public/js/path_tree.js

const createNewPathTree = function (setting) {
    const treeSetting = JSON.parse(JSON.stringify(setting));
    const itemsPre = 'id_';
    const postData = function (url, data, successCallback) {
        $.ajax({
            type:"POST",
            url: url,
            data: {'data': JSON.stringify(data)},
            dataType: 'json',
            cache: false,
            timeout: 5000,
            beforeSend: function(xhr) {
                let csrfToken = Cookies.get('csrfToken');
                xhr.setRequestHeader('x-csrf-token', csrfToken);
            },
            success: function(result){
                if (result.err === 0) {
                    if (successCallback) {
                        successCallback(result.data);
                    }
                } else {
                    alert('error: ' + result.message, 'error', 'exclamation-circle');
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert('error ' + textStatus + " " + errorThrown, 'error', 'exclamation-circle');
            }
        });
    };

    const PathTree = function () {
        // 无索引
        this.datas = [];
        // 以key为索引
        this.items = {};
        // 以排序为索引
        this.nodes = [];
    };
    const proto = PathTree.prototype;
    /**
     * 树结构根据显示排序
     */
    proto.sortTreeNode = function () {
        const self = this;
        const addSortNodes = function (nodes) {
            for (let i = 0; i < nodes.length; i++) {
                self.nodes.push(nodes[i]);
                addSortNodes(self.getChildren(nodes[i]));
            }
        };
        self.nodes = [];
        addSortNodes(this.getChildren(null));
    };
    /**
     * 加载数据(初始化), 并给数据添加部分树结构必须数据
     * @param datas
     */
    proto.loadDatas = function (datas) {
        // 清空旧数据
        this.items = {};
        this.nodes = [];
        // 加载全部数据
        for (const data of datas) {
            const keyName = itemsPre + data[treeSetting.id];
            this.items[keyName] = JSON.parse(JSON.stringify(data));
            this.datas.push(this.items[keyName]);
        }
        this.sortTreeNode();
        for (const node of this.nodes) {
            const children = this.getChildren(node);
            node.expanded = children.length > 0;
            node.visible = true;
        }
    };
    /**
     * 加载数据(动态)，只加载不同部分
     * @param {Array} datas
     * @return {Array} 加载到树的数据
     * @privateA
     */
    proto._loadData = function (datas) {
        const loadedData = [];
        for (const data of datas) {
            let node = this.getItems(data[treeSetting.id]);
            if (node) {
                for (const prop in node) {
                    if (data[prop]) {
                        node[prop] = data[prop];
                    }
                }
                loadedData.push(node);
            } else {
                const keyName = itemsPre + data[treeSetting.id];
                const node = JSON.parse(JSON.stringify(data));
                this.items[keyName] = node;
                this.datas.push(node);
                node.expanded = false;
                node.visible = true;
                loadedData.push(node);
            }
        }
        this.sortTreeNode();
        return loadedData;
    };
    proto._freeData = function (datas) {
        const removeArrayData = function (array, data) {
            const index = array.indexOf(data);
            array.splice(index, 1);
        };
        for (const data of datas) {
            const node = this.getItems(data[treeSetting.id]);
            if (node) {
                delete this.items[itemsPre + node[treeSetting.id]];
                removeArrayData(this.datas, node);
                removeArrayData(this.nodes, node);
            }
        }
    };
    /**
     * 根据id获取树结构节点数据
     * @param {Number} id
     * @returns {Object}
     */
    proto.getItems = function (id) {
        return this.items[itemsPre + id];
    };
    /**
     * 查找node的parent
     * @param {Object} node
     * @returns {Object}
     */
    proto.getParent = function (node) {
        return this.getItems(node[treeSetting.pid]);
    };
    /**
     * 查询node的已下载子节点
     * @param {Object} node
     * @returns {Array}
     */
    proto.getChildren = function (node) {
        const pid = node ? node[treeSetting.id] : treeSetting.rootId;
        const children = this.datas.filter(function (x) {
            return x[treeSetting.pid] === pid;
        });
        children.sort(function (a, b) {
            return a.order - b.order;
        });
        return children;
    };
    /**
     * 查询node的已下载的全部后代
     * @param {Object} node
     * @returns {Array}
     */
    proto.getPosterity = function (node) {
        const reg = new RegExp('^' + node.full_path + '.');
        return this.datas.filter(function (x) {
            return reg.test(x.full_path);
        })
    };
    /**
     * 查询node是否是父节点的最后一个子节点
     * @param {Object} node
     * @returns {boolean}
     */
    proto.isLastSibling = function (node) {
        const siblings = this.getChildren(this.getParent(node));
        return node.order === siblings.length;
    };
    /**
     * 刷新子节点是否可见
     * @param {Object} node
     * @private
     */
    proto._refreshChildrenVisible = function (node) {
        const children = this.getChildren(node);
        for (const child of children) {
            child.visible = node.expanded && node.visible;
            this._refreshChildrenVisible(child);
        }
    }
    /**
     * 设置节点是否展开, 并控制子节点可见
     * @param {Object} node
     * @param {Boolean} expanded
     */
    proto.setExpanded = function (node, expanded) {
        node.expanded = expanded;
        this._refreshChildrenVisible(node);
    };

    /**
     * 以下方法需等待响应, 通过callback刷新界面
     */
    /**
     * 加载子节点
     * @param {Object} node
     * @param {function} callback
     */
    proto.loadChildren = function (node, callback) {
        const self = this;
        postData('get-children', {id: node[treeSetting.id]}, function (data) {
            self._loadData(data);
            callback();
        });
    };
    /**
     * 新增节点
     * @param {string} url - 请求连接
     * @param {object} node - 当前选中节点
     * @param {function} callback
     */
    proto.addNode = function (url, node, callback) {
        const self = this;
        postData(url, {id: node[treeSetting.id]}, function (data) {
            self._loadData(data.update);
            const newNodes = self._loadData(data.create);
            callback(newNodes);
        });
    };
    /**
     * 删除节点
     * @param {String} url - 请求地址
     * @param {Object} node - 要删除的节点
     * @param {function} callback
     */
    proto.deleteNode = function (url, node, callback){
        const self = this;
        postData(url, {id: node[treeSetting.id]}, function (data) {
            self._loadData(data.update);
            self._freeData(data.delete);
            callback();
        });
    };
    /**
     * 上移
     * @param {String} url
     * @param {Object} node
     * @param {function} callback
     */
    proto.upMoveNode = function (url, node, callback) {
        const self = this;
        postData(url, {id: node[treeSetting.id]}, function (data) {
            const nodes = self._loadData(data.update);
            callback(nodes);
        });
    };
    /**
     * 下移
     * @param {String} url
     * @param {Object} node
     * @param {function} callback
     */
    proto.downMoveNode = function (url, node, callback) {
        const self = this;
        postData(url, {id: node[treeSetting.id]}, function (data) {
            const nodes = self._loadData(data.update);
            callback(nodes);
        });
    };
    /**
     * 升级
     * @param {String} url
     * @param {Object} node
     * @param {function} callback
     */
    proto.upLevelNode = function (url, node, callback) {
        const self = this;
        postData(url, {id: node[treeSetting.id]}, function (data) {
            self._loadData(data.update);
            callback();
        });
    };
    /**
     * 降级
     * @param {String} url
     * @param {Object} node
     * @param {function} callback
     */
    proto.downLevelNode = function (url, node, callback) {
        const self = this;
        postData(url, {id: node[treeSetting.id]}, function (data) {
            self._loadData(data.update);
            callback();
        });
    };

    return new PathTree();
}