bootstrap-treeview 扩展 添加多个子节点、删除节点、删除全部子节点 和 惰性加载的应用

发布于 2017-01-14  6.13k 次阅读


在Tree主函数return 中添加入口

// 添加节点方法
addNode: $.proxy(this.addNode, this),
// 删除节点方法
deleteNode: $.proxy(this.deleteNode, this),
deleteChildrenNode: $.proxy(this.deleteChildrenNode, this),

添加Tree的prototype方法

/**
 给节点添加子节点
 */
Tree.prototype.addNode = function (identifiers, options) {
    this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
            this.setAddNode(node, options);
    }, this));

    this.setInitialStates({ nodes: this.tree }, 0);
    this.render();
};

/**
 *  添加子节点
 */
Tree.prototype.setAddNode = function (node, options) {
    if (node.nodes == null) node.nodes = [];
    if (options.node) {
        $.each(options.node,function (index,option) {
            node.nodes.push(option);
        })
    }
};
/**
 * 删除节点,若是根节点不能删除
 * 获取节点的父节点,
 * 根据Id删除父节点nodes集合中的自己
 * 刷新父节点
 * @param identifiers
 * @param options
 */
Tree.prototype.deleteNode = function (identifiers, options) {
    this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {

        var parentNode = this.getParent(node);

        if(parentNode && parentNode.nodes != null ){
            for(var i = parentNode.nodes.length-1; i >= 0; i--){
                if(parentNode.nodes[i].nodeId == node.nodeId){
                    parentNode.nodes.splice(i, 1);
                }
            }
            this.setInitialStates({ nodes: this.tree }, 0);
            this.render();

        }else{
            console.log('根节点不能删除');
        }
    }, this));
};
/**
 * 删除子节点
 * 置空子节点 刷新节点
 * @param node
 * @param options
 */
Tree.prototype.deleteChildrenNode = function (identifiers, options) {
    this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
        if ( node.nodes != null){
            node.nodes = null;
            this.setInitialStates({ nodes: this.tree }, 0);
            this.render();
        }
    }, this));
};

使用示例

/**
 * 增加节点
 */
function addNote() {
    //得到选择的节点
    var nodeData = $tree.treeview('getSelected')[0];
    //获取数据,添加到树中
    $.getJSON("treeAddData.json", function (data) {
        $tree.treeview("addNode", [nodeData.nodeId, {node: data}]);
    });
}

/**
 * 删除节点,如果该节点如果是根节点,不能删除
 */
function deleteNode() {
    var nodeData = $tree.treeview('getSelected')[0];
    $tree.treeview("deleteNode", nodeData.nodeId);
}

/**
 * 删除全部子节点
 */
function deleteChildrenNode() {
    var nodeData = $tree.treeview('getSelected')[0];
    $tree.treeview("deleteChildrenNode", nodeData.nodeId);
}

应用-惰性加载

var $tree;
$(function () {
    $tree = $('div#treeview-checkable');
    $.getJSON('treedata.json', function (data) {
        treeInit(data);
    });
});

/**
 * 树初始化
 */
function treeInit(defaultData) {
    $tree.treeview({
        data: defaultData,
        levels: 1,
        showCheckbox: true,
        onNodeExpanded: addNextNode
    });
}

/**
 * 一个节点被展开 惰性加载
 */
function addNextNode(event, node) {
    $.getJSON("treeAddData.json", function (data) {
        $tree.treeview("deleteChildrenNode", node.nodeId);
        $tree.treeview("addNode", [node.nodeId, {node: data}]);
    });
}

参考:


梦想还是要有的,万一实现了呢