当前位置： 移动技术网 > IT编程>开发语言>JavaScript > bootstrap treeview 树形菜单带复选框及级联选择功能

bootstrap treeview 树形菜单带复选框及级联选择功能

2018年08月12日  | 移动技术网IT编程  | 我要评论

具体代码如下所示：

<div id="searchtree"></div> 
 <script>
  var treedata = [{
   text: "parent 1",
   nodes: [{
    text: "child 1",
    nodes: [{
     text: "grandchild 1"
    }, {
     text: "grandchild 2",
     nodes: [{
      text: "grandchild 2-1",
      nodes: [{
       text: "grandchild 2-1-1"
      }, {
       text: "grandchild 2-2-1",
      }]
     }, {
      text: "grandchild 1-2",
     }]
    }]
   }, {
    text: "child 2",
    nodes: [{
     text: "grandchild 2-1"
    }, {
     text: "grandchild 2-2",
    }]
   }]
  }, {
   text: "parent 2",
   id:'11111'
  }, {
   text: "parent 3"
  }, {
   text: "parent 4"
  }, {
   text: "parent 5"
  }];
  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]);
    }
   }
  }
  $('#searchtree').treeview({
   showcheckbox: true,
   data: treedata,
   onnodechecked: nodechecked,
   onnodeunchecked: nodeunchecked
  });
  </script>

总结

以上所述是小编给大家介绍的bootstrap treeview 树形菜单带复选框及级联选择功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网