bootstrap-treeview addNode deleteNode editNode 全都奉上

考虑到根节点的添加和删除 及批量删除的用法 ,

发现一个问题 调用方法传node对象 貌似不好使 必须传nodeId  如果可以传node对象 的 麻烦告诉一下怎么用的

1 Tree return 里 增加三个方法

addNode: $.proxy(this.addNode, this),

editNode: $.proxy(this.editNode, this),

deleteNode: $.proxy(this.deleteNode, this),




2 方法具体实现,在获取兄弟节点时 稍微改动了原方法 默认不返回当前节点
如下 覆盖原来的就可以了

    /**
        Returns an array of sibling nodes for a given node, if valid otherwise returns undefined.
        @param {Object|Number} identifier - A valid node or node id
        @returns {Array} nodes - Sibling nodes
        isAll 是否包括本身节点
    */
    Tree.prototype.getSiblings = function (identifier,isAll) {
        var node = this.identifyNode(identifier);
        var parent = this.getParent(node);
        var nodes = parent ? parent.nodes : this.tree;
        return nodes.filter(function (obj) {
                return isAll?true:obj.nodeId !== node.nodeId;
            });
    };


下面的是添删改的具体实现

    /**
    *添加节点 如果 nodeId 查不到 就添加根节点
    */  
    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){
        if (node.nodes == null) node.nodes = [];  
        if (options.node) {
              node.nodes.push(options.node);  
              };  
        }else{
            //添加根节点
            this.tree.push(options.node);
        }
    };  
    
    /**
           编辑节点
    */  
    Tree.prototype.editNode = function (identifiers, options) {  
        this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {  
            this.setEditNode(node, options);   
        }, this));  
        this.setInitialStates({ nodes: this.tree }, 0);  
        this.render();  
    }  
      
       /**
       * 编辑节点
       */  
    Tree.prototype.setEditNode = function (node, options) {
        if (options) {
            $.extend(node, options);
        };  
    };

    /**
    *删除节点
    */  
    Tree.prototype.deleteNode = function (identifiers, options) {        
         this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
         this.setDeleteNode( node, options);
         }, this));   
     };
 
 Tree.prototype.setDeleteNode = function (node, options) {
     var parentNode = this.getParent(node);
     //如果不是根节点
     if(parentNode){
        for(var i =0; i < parentNode.nodes.length; i++){
             if(parentNode.nodes[i].nodeId == node.nodeId){
                parentNode.nodes.splice(i, 1);
            }
        }
    }else{
        //获取兄弟节点数组
        var sibNodes = this.getSiblings(node,true);
        if (sibNodes != null){
            for(var i=0;i<sibNodes.length; i ++){
                if(node.nodeId == sibNodes[i].nodeId){
                    this.tree.splice(i, 1);
                }
            }
        }
    }
      
      this.setInitialStates({ nodes: this.tree }, 0);
      this.render();
      
 };

3test 测试如下


$("#treeview1").treeview("addNode", [-1, { node: { text: "新加的跟节点菜单", href: "haizi" } }]);
            $("#treeview1").treeview("addNode", [1, { node: { text: "新加的菜单", href: "haizi" } }]);
            $("#treeview1").treeview("editNode", [1, { text: "改名的菜单", href: "haizi" }]);
            $("#treeview1").treeview("deleteNode",[1]);

          $("#treeview1").treeview("deleteNode",[[7,8]]);//批量删除


评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值