首页 > 开发 > JS > 正文

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

2024-05-06 16:44:51
字体:
来源:转载
供稿:网友

具体代码如下所示:

<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 树形菜单带复选框及级联选择功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持!


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表