EasyUI网上的全选与全不选都是只针对根节点的,并没有对子节点进行处理,因此自己略做改进写了一版,如下:
function treeChecked(selected, treeMenu) {
var _tree = $('#' + treeMenu);
var roots = _tree.tree('getRoots');//返回tree的所有根节点数组
if (selected.checked) {
traverseTree(_tree,roots,'check')
} else {
traverseTree(_tree,roots,'uncheck')
}
}
function traverseTree(_tree,parent,checkState){
if (typeof(_tree) == 'undefined' || typeof(parent) == 'undefined' || typeof(checkState) == 'undefined'){
return;
}
for ( var i = 0; i < parent.length; i++) {
var node = _tree.tree('find', parent[i].id);//查找节点
if (_tree.tree('isLeaf', node.target)) {
_tree.tree(checkState, node.target);//将得到的节点选中
} else {
if (typeof(node.checked) !== 'undefined') {
_tree.tree(checkState, node.target);//将得到的节点选中
}
var children = _tree.tree('getChildren', node.target);
if (children) {
traverseTree(_tree, children, checkState);
}
}
}
}
//使用方法
<input title="全选/反选" type="checkbox" onClick="treeChecked(this,'treeId')"/>
步骤分析如下:
- 1.获取到tree并拿到它的root节点数组
- 2.判断check box是否勾选,这将决定是全选还是全不选
- 3.判断有无子节点,如果没有则结束遍历
- 4.遍历子节点数组,拿到子节点
- 5.判断是否叶子节点,如果是则进行check or uncheck处理
- 6.如果不是叶子节点,但是它有复选框的时候,也会进行check or uncheck处理
- 7.通过getChildren方法拿到当前节点的子节点数组,然后判断是否为null,不为null进行递归遍历
注意点
- 1.进行递归遍历要谨慎,可能会导致堆栈溢出,一定要有适当的结束条件
- 2.如果业务有特殊需求,需要对js进行适当调整