EasyUI递归遍历tree以及全选与全不选

EasyUI网上的全选与全不选都是只针对根节点的&＃xff0c;并没有对子节点进行处理&＃xff0c;因此自己略做改进写了一版&＃xff0c;如下&＃xff1a;

function treeChecked(selected, treeMenu) {var _tree &＃61; $(&＃39;#&＃39; &＃43; treeMenu);var roots &＃61; _tree.tree(&＃39;getRoots&＃39;);//返回tree的所有根节点数组if (selected.checked) {traverseTree(_tree,roots,&＃39;check&＃39;)} else {traverseTree(_tree,roots,&＃39;uncheck&＃39;)}
}
function traverseTree(_tree,parent,checkState){if (typeof(_tree) &＃61;&＃61; &＃39;undefined&＃39; || typeof(parent) &＃61;&＃61; &＃39;undefined&＃39; || typeof(checkState) &＃61;&＃61; &＃39;undefined&＃39;){return;}for ( var i &＃61; 0; i < parent.length; i&＃43;&＃43;) {var node &＃61; _tree.tree(&＃39;find&＃39;, parent[i].id);//查找节点if (_tree.tree(&＃39;isLeaf&＃39;, node.target)) {_tree.tree(checkState, node.target);//将得到的节点选中} else {if (typeof(node.checked) !&＃61;&＃61; &＃39;undefined&＃39;) {_tree.tree(checkState, node.target);//将得到的节点选中}var children &＃61; _tree.tree(&＃39;getChildren&＃39;, node.target);if (children) {traverseTree(_tree, children, checkState);}}}
}//使用方法
<input title&＃61;"全选/反选" type&＃61;"checkbox" onClick&＃61;"treeChecked(this,&＃39;treeId&＃39;)"/>


步骤分析如下&＃xff1a;

• 1.获取到tree并拿到它的root节点数组
• 2.判断check box是否勾选&＃xff0c;这将决定是全选还是全不选
• 3.判断有无子节点&＃xff0c;如果没有则结束遍历
• 4.遍历子节点数组&＃xff0c;拿到子节点
• 5.判断是否叶子节点&＃xff0c;如果是则进行check or uncheck处理
• 6.如果不是叶子节点&＃xff0c;但是它有复选框的时候&＃xff0c;也会进行check or uncheck处理
• 7.通过getChildren方法拿到当前节点的子节点数组&＃xff0c;然后判断是否为null&＃xff0c;不为null进行递归遍历

注意点

• 1.进行递归遍历要谨慎&＃xff0c;可能会导致堆栈溢出&＃xff0c;一定要有适当的结束条件
• 2.如果业务有特殊需求&＃xff0c;需要对js进行适当调整