基于bootstrap的jQuery多级列表树插件-解决父子节点
基于bootstrap的jQuery多级列表树插件-解决父子节点勾选状态联动
如何解决
① 如果勾选了父级节点，怎么让子节点全部变为勾选状态？
② 如果只选择了某个子节点，怎么让该节点所有的父节点全部变为选中状态？
③若果子节点都取消了，怎么让所有父节点都变为未选择状态？
<!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>
