bootstrap treeview 树形菜单带复选框及级联选择功能
2018-06-08 08:51
1431 查看
具体代码如下所示:
<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 树形菜单带复选框及级联选择功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 树形菜单复选框级联选择
- 树形菜单复选框级联选择HTML
- 树形菜单复选框级联选择HTML
- Bootstrap树形菜单插件TreeView.js使用方法详解
- 关于bootstrap的treeview不显示多选(复选框)的问题,以及联动选择的问题,外加多选后取值
- 树形控件复选框的级联选择
- 树形控件复选框的级联选择
- 用 lightTreeview 实现树形分类菜单的功能 展开收缩分类代码
- 一个应用策略模式(Strategy)的小实例----对TreeView功能菜单的功能选择模块进行解耦重构
- JS树形菜单组件Bootstrap TreeView使用方法详解
- Bootstrap树形菜单插件TreeView.js使用方法详解
- Asp.Net TreeView 复选框选择
- Bootstrap 树形菜单小DEMO
- [导入]ASP.NET TreeView级联选择问题
- [自创]mootools所有复选框只能选择一个的功能
- Bootstrap框架建立树形菜单(Tree)的实例代码
- Silverlight Telerik控件学习:带CheckBox复选框的树形TreeView控件
- 基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单
- 实现Web页面中级联菜单的设计/实现动态加载列表框/实现自动刷新页面/实现Web页面的局部动态更新/实现自动完成功能
- 树形菜单(jquery.treeview.js)