子節點的勾選狀態和父節點狀態的動態關聯，通過子節點的點擊事件進行上下遞歸；數據回顯時，調用review(rootId)修正父節點狀態。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>javascript test</title> <link rel="stylesheet" type="text/css" href="css/metro/easyui.css"> <link rel="stylesheet" type="text/css" href="css/icon.css"> <link rel="stylesheet" type="text/css" href="css/demo.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <style media="screen"> span{ display: inline-block; padding: 5px 10px; border: 1px solid silver; } .leaf{ margin-left: 20px; } .tree-checkbox .tree-checkbox0{ /*未選中狀態*/ background: #fff; } .tree-checkbox .tree-checkbox1{ /*全選中狀態*/ background: yellow; } .tree-checkbox .tree-checkbox2{ /*半選中狀態*/ background: green; } </style> </head> <body class="tree-checkbox"> <span class="tree-checkbox0" nodeId="1" onclick="accessTree(this)">root</span> <span class="tree-checkbox0" nodeId="2" pId="1" onclick="accessTree(this)">2</span> <span class="leaf tree-checkbox1" nodeId="5" pId="2" onclick="accessTree(this)">5</span> <span class="leaf tree-checkbox1" nodeId="6" pId="2" onclick="accessTree(this)">6</span> <span class="tree-checkbox1" nodeId="3" pId="1" onclick="accessTree(this)">3</span> <span class="leaf tree-checkbox0" nodeId="7" pId="3" onclick="accessTree(this)">7</span> <span class="tree-checkbox1" nodeId="4" pId="1" onclick="accessTree(this)">4</span> </body> <script type="text/javascript"> /** * 根據當前節點計算父級和子子集勾選狀態 **/ function accessTree(node){ var checkedClass = 'tree-checkbox1', middleClass = 'tree-checkbox2', unCheckClass = 'tree-checkbox0'; var id = $(node).attr('nodeId'),pId = $(node).attr('pId'); var status = Array.from(node.classList).includes(checkedClass); if(status) accessClass(node,unCheckClass); else accessClass(node,checkedClass); upAccess(pId); downAccess(id,!status); // 向上遞歸 function upAccess(pId){ if(!pId) return; var isAll = true, has = false, pckbox = $('[nodeId='+pId+']').get(0); if(pckbox) { $('[pId='+pId+']').each(function(n,item){ var clist = Array.from(item.classList), status = clist.includes(checkedClass); if(!status) isAll = false; else has = true; if(clist.includes(middleClass)) has = true; }); if(isAll) accessClass(pckbox,checkedClass); else if(has) accessClass(pckbox,middleClass); else accessClass(pckbox,unCheckClass); upAccess($(pckbox).attr('pId')); } } // 向下遞歸 function downAccess(id,status){ $('[pId='+id+']').each(function(n,item){ if(status) accessClass(item,checkedClass); else accessClass(item,unCheckClass); downAccess($(item).attr('nodeId'),status); }); } function accessClass(node,cls){ var classes = [checkedClass,middleClass,unCheckClass]; classes.map(function(item){ if(item == cls) node.classList.add(item); else node.classList.remove(item); }); } } /** * 根據root節點回溯所有節點並修正狀態 **/ function review(rootId){ var root = $('[nodeId='+rootId+']')[0]; if(!root) return; var checkedClass = 'tree-checkbox1', middleClass = 'tree-checkbox2', unCheckClass = 'tree-checkbox0'; var id = $(root).attr('nodeId'); var isAll = true, has = false, children = $('[pId='+id+']'); children.each(function(n,item){ review($(item).attr('nodeId')); var clist = Array.from(item.classList), status = clist.includes(checkedClass); if(!status) isAll = false; else has = true; if(clist.includes(middleClass)) has = true; }); if(children.length > 0) { if(isAll) accessClass(root,checkedClass); else if(has) accessClass(root,middleClass); else accessClass(root,unCheckClass); } function accessClass(node,cls){ var classes = [checkedClass,middleClass,unCheckClass]; classes.map(function(item){ if(item == cls) node.classList.add(item); else node.classList.remove(item); }); } }
// 回顯狀態修正
review(1); </script> </html>
效果圖：
