onCollapse将parent设置为选定节点,如果已选择子/孙(bootstrap treeView)

时间:2015-12-16 10:41:20

标签: javascript jquery twitter-bootstrap css3 treeview

我有工作引导树视图。我想在此添加一个功能。

https://jsfiddle.net/evk9yfum/

https://github.com/jonmiles/bootstrap-treeview(使用的插件)

例如:onNodeCollapsed:如果已经选择了折叠节点的child / grandChild。那么当前的collpased节点应该显示为选定的节点。

然后展开同一个节点。它应该显示其/最后选择的或child / grandChild节点。

onNodeCollapsed: function(event, node) {
    $.each(node.nodes, function() {
      if (this.state.selected) {
        $('#treeview-selectable').treeview('selectNode', [node.nodeId, {
          silent: true
        }]);
        return;
      }
    });
  }

enter image description here enter image description here enter image description here enter image description here

1 个答案:

答案 0 :(得分:2)

使用此var slectedNodeId, hasSelect=false, nodeIdList=[]三个全局变量,然后执行以下代码。希望这会对你有所帮助。

onNodeExpanded:function(event, node){                    
      $.each(node.nodes, function(){ 
            if((this.nodeId==slectedNodeId || nodeIdList.indexOf(this.nodeId)>-1) 
                && hasSelect)
            {
                 $('#treeview-selectable').treeview('selectNode', 
                              [ this.nodeId, { silent: true } ]);
            }
      });  
}, 
onNodeCollapsed:function(event, node){
       nodeIdList.push(node.nodeId);
       $.each(node.nodes, function(){ 
             if(this.state.selected){
                 $('#treeview-selectable').treeview('selectNode', 
                                 [nodeIdList[0], { silent: true } ]);
                 hasSelect=true;
             }
       });     
},
onNodeSelected: function (event, node) {
       slectedNodeId=node.nodeId;
       nodeIdList=[];
       hasSelect=false;

       $(this).treeview('unselectNode', [ node.nodeId, { silent: false } ]);
},
onNodeUnselected: function (event, node) {
       $(this).treeview('selectNode', [ node.nodeId, { silent: true } ]);             
}

更新了小提琴herehttps://jsfiddle.net/evk9yfum/24/