zoukankan      html  css  js  c++  java
  • bootstrap-treeview 实现级联选择

    该方式通过修改源码:

    /*以下方法被改动,调用时要特别注意 2019-09-11 zhoujunming3*/
    Tree.prototype.toggleCheckedState = function (node, options) {
    if (!node) return;
    //this.setCheckedState(node, !node.state.checked, options);
    this.setCheckedChildrenState(node, !node.state.checked, options);
    if(node.state.checked) {
    this.setCheckedParentState(node, node.state.checked, options);
    }
    if(!node.state.checked){
    this.setUnCheckedParentState(node, node.state.checked, options);
    }
    };

    Tree.prototype.setCheckedChildrenState = function(node, state, options) {
    this.setCheckedState(node, state, options);
    if(node.nodes !== undefined && node.nodes.length > 0) {
    for(let i = 0,len=node.nodes.length; i < len; i++) {
    this.setCheckedChildrenState(node.nodes[i], node.state.checked, options);
    }
    }
    };

    Tree.prototype.setCheckedParentState = function(node, state, options) {
    this.setCheckedState(node, state, options);
    if(node.parentId !== undefined) {
    let parent_ = this.nodes[node.parentId];
    this.setCheckedParentState(parent_, state, options);
    }

    };

    Tree.prototype.setUnCheckedParentState = function(node, state, options) {
    let flag = true;
    if (node.parentId !== undefined) {
    let parent_ = this.nodes[node.parentId];
    for (let i = 0, len = parent_.nodes.length; i < len; i++) {
    if (parent_.nodes[i].state.checked) {
    flag = false;
    break;
    }
    }
    if(flag){
    this.setCheckedState(parent_, state, options);
    this.setUnCheckedParentState(parent_, state, options);
    }
    }

    }
    /*以上方法被改动,调用时要特别注意*/

    还有一种通过外部渲染进行级联选择,这种方式数据量大时渲染较慢,上边是自己的后期实现

    核心方法

    
    
    var nodeCheckedSilent = false; 
    function nodeChecked (event, node){ 
     if(nodeCheckedSilent){ 
      return; 
     } 
     nodeCheckedSilent = true; 
     checkAllParent(node); 
     checkAllSon(node); 
     nodeCheckedSilent = false; 
    } 
     
    var nodeUncheckedSilent = false; 
    function nodeUnchecked (event, node){ 
     if(nodeUncheckedSilent) 
      return; 
     nodeUncheckedSilent = true; 
     uncheckAllParent(node); 
     uncheckAllSon(node); 
     nodeUncheckedSilent = false; 
    } 
     
    //选中全部父节点 
    function checkAllParent(node){ 
     $('#searchTree').treeview('checkNode',node.nodeId,{silent:true}); 
     var parentNode = $('#searchTree').treeview('getParent',node.nodeId); 
     if(!("nodeId" in parentNode)){ 
      return; 
     }else{ 
      checkAllParent(parentNode); 
     } 
    } 
    //取消全部父节点 
    function uncheckAllParent(node){ 
     $('#searchTree').treeview('uncheckNode',node.nodeId,{silent:true}); 
     var siblings = $('#searchTree').treeview('getSiblings', node.nodeId); 
     var parentNode = $('#searchTree').treeview('getParent',node.nodeId); 
     if(!("nodeId" in parentNode)) { 
      return; 
     } 
     var isAllUnchecked = true; //是否全部没选中 
     for(var i in siblings){ 
      if(siblings[i].state.checked){ 
       isAllUnchecked=false; 
       break; 
      } 
     } 
     if(isAllUnchecked){ 
      uncheckAllParent(parentNode); 
     } 
     
    } 
     
    //级联选中所有子节点 
    function checkAllSon(node){ 
     $('#searchTree').treeview('checkNode',node.nodeId,{silent:true}); 
     if(node.nodes!=null&&node.nodes.length>0){ 
      for(var i in node.nodes){ 
       checkAllSon(node.nodes[i]); 
      } 
     } 
    } 
    //级联取消所有子节点 
    function uncheckAllSon(node){ 
     $('#searchTree').treeview('uncheckNode',node.nodeId,{silent:true}); 
     if(node.nodes!=null&&node.nodes.length>0){ 
      for(var i in node.nodes){ 
       uncheckAllSon(node.nodes[i]); 
      } 
     } 
    } 
    
    
    

    6-27 : 经部分网友反馈,图中的 if(!("id" in perentNode)) 需要改成 if(!("nodeId" in perentNode))才能正常运行,我想应该是版本问题,上面代码中已经改正了。如果运行不了,请改回 if(!("id" in perentNode))试一下。(谢谢大家提出)
    因为treeview中silent属性指定了无效(我也不知道为什么委屈),所以多加了两个变量来控制

    
    
    $('#searchTree').treeview({ 
      showCheckbox:true, 
      data:treeData, 
      onNodeChecked:nodeChecked , 
      onNodeUnchecked:nodeUnchecked 
     }); 
    
     
  • 相关阅读:
    外观模式
    解释器模式
    LoadRunner学习笔记(三)
    lr 中cookie的解释与用法
    LR使用web_add_cookie函数进行cookie模拟
    LoadRunner学习笔记(二)
    SVN服务器搭建和使用
    使用Jmeter监测服务器性能指标
    jmeter 使用白皮书
    intellij idea创建maven项目
  • 原文地址:https://www.cnblogs.com/zjm-1/p/12206960.html
Copyright © 2011-2022 走看看