基于bootstrap的jQuery多级列表树插件-解决父子节点勾选状态联动
如何解决
① 如果勾选了父级节点，怎么让子节点全部变为勾选状态？
② 如果只选择了某个子节点，怎么让该节点所有的父节点全部变为选中状态？
③若果子节点都取消了，怎么让所有父节点都变为未选择状态？
coding:
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基于bootstrup的jQuery多级列表树插件</title> <link rel="stylesheet" type="text/css" href="css/default.css"> <link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> .htmleaf-header{margin-bottom: 15px;font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;} .htmleaf-icon{color: #fff;} </style> </head> <body> <div class="htmleaf-container"> <header class="htmleaf-header bgcolor-12"> <h1>基于bootstrup的jQuery多级列表树插件 <span>Bootstrap Tree View</span></h1> </header> <div class="container"> <div class="row"> <hr> <h2>Checkable Tree</h2> <div class="col-sm-4"> <h2>Input</h2> <div class="form-group"> <label for="input-check-node" class="sr-only">Search Tree:</label> <input type="input" class="form-control" id="input-check-node" placeholder="Identify node..." value="Parent 1"> </div> </div> <div class="col-sm-4"> <h2>Tree</h2> <div id="treeview-checkable" class=""></div> </div> <div class="col-sm-4"> <h2>Events</h2> <div id="checkable-output"></div> </div> </div> </div> </div> <!-- <script src="js/jquery-2.1.0.min.js"></script> --> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- <script src="js/bootstrap-treeview.js"></script> --> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script> <script type="text/javascript"> (function($){ var defaultData = [ { text: 'Parent 1', href: '#parent1', // parentId:0, id: 1, tags: ['4'], nodes: [ { text: 'Child 1', href: '#child1', // parentId:1, id: 2, tags: ['2'], nodes: [ { text: 'Grandchild 1', href: '#grandchild1', // parentId:2, id: 3, tags: ['0'], nodes:[ { text: 'sonGrandchild 1', href: '#songrandchild1', // parentId:2, id: 100, tags: ['0'], nodes:[ { text: 'ssGrandchild 1', href: '#songrandchild1', // parentId:2, id: 10000, tags: ['0'] } ] }, { text: 'sonGrandchild 2', href: '#songrandchild2', // parentId:2, id: 200, tags: ['0'] }, ] }, { text: 'Grandchild 2', href: '#grandchild2', // parentId:2, id: 4, tags: ['0'] } ] }, { text: 'Child 2', href: '#child2', // parentId:1, id: 5, tags: ['0'] } ] }, { text: 'Parent 2', href: '#parent2', parentId:0, id: 6, tags: ['0'] }, { text: 'Parent 3', href: '#parent3', parentId:0, id: 7, tags: ['0'] }, { text: 'Parent 4', href: '#parent4', parentId:0, id: 8, tags: ['0'] }, { text: 'Parent 5', href: '#parent5' , parentId:0, id: 9, tags: ['0'] } ]; var $checkableTree = $('#treeview-checkable').treeview({ data: defaultData, showIcon: false, levels:5, showCheckbox: true, onNodeChecked: function(event, node) { checkAllNodes("checkNode", node); }, onNodeUnchecked: function (event, node) { checkAllNodes("uncheckNode", node); } }); // Check/uncheck/toggle nodes $('#input-check-node').on('keyup', function (e) { checkableNodes = findCheckableNodess(); $('.check-node').prop('disabled', !(checkableNodes.length >= 1)); }); function checkAllNodes(method, node) { var $tree = $('#treeview-checkable'); parentNode = $tree.treeview('getParent', node); if(parentNode.id){ getParentNode(method, node, $tree);//如果父节点存在，选中/去除父节 } $(node.nodes).each(function (a, b) { $tree.treeview(method, [b.nodeId, { silent: true }]); if (b.nodes) checkAllNodes(method, b); }); } function getParentNode(method, node, tree) { if (method == "uncheckNode") { //如果是取消事件，当判断兄弟节点是否存在 var arr = tree.treeview('getSiblings', node);//获取兄弟节点 for (var i = 0; i < arr.length; i++) { var brotherNode = arr[i]; if (brotherNode.state.checked) { //判断兄弟节点是否用选中状态 return; } } } parentNode = tree.treeview('getParent', node) // if(parentNode.id!==undefined){ if(parentNode.id!==undefined){ tree.treeview(method, [parentNode, { silent: true }]); }else{ return; } var pnode = tree.treeview('getParent', parentNode); // if(pnode.id!==undefined){ if(pnode.id){ tree.treeview(method, [pnode, { silent: true }]); getParentNode(method, pnode, tree); } } })(jQuery) </script> </body> </html>
