easyui的tree的checkbox单选或

最新推荐文章于 2022-04-30 04:59:01 发布

奇击鹰

最新推荐文章于 2022-04-30 04:59:01 发布

阅读量914

点赞数

文章标签： easyui java checkbox tree 树

本文链接：https://blog.csdn.net/weixin_38367349/article/details/77447880

版权

首先要知道easyui的tree的checkbox并不是input的checkbox，而是span标签

接下来进入正题：

1、easyui的checkbox默认是多选的，而且父节点选择的话，子节点必然是全选的，子节点全选的话父节点也必然选中

2、如果想实现单选，下面是我的代码：

$('#role-tree').tree({
cascadeCheck: false,
onSelect: function (node) {
var cknodes = $('#role-tree').tree("getChecked");
for (var i = 0; i < cknodes.length; i++) {
if (cknodes[i].id != node.id) {
$('#role-tree').tree("uncheck", cknodes[i].target);
}
}
if (node.checked) {
$('#role-tree').tree('uncheck', node.target);
} else {
$('#role-tree').tree('check', node.target);
}
},
onLoadSuccess: function (node, data) {
$(this).find('span.tree-checkbox').unbind().click(function () {
$('#role-tree').tree('select', $(this).parent());
return false;
});
}
})
</script>

写的比较乱，将就着看吧

3、如果想实现多选，并且子节点和父节点之间不再相互影响，即选择父节点的情况下子节点可以没选货没有全选

下面是代码：

//让tree的checkbox不再点击父节点后同时勾选子节点
$('#role-tree').tree({
cascadeCheck: false,
})
</script>

只要设置cascadeCheck: false就行了

4、在选择了父节点的情况下不选择子节点，而在选择了一个或多个子节点的情况下必选父节点，代码如下：

//让tree的checkbox不再点击父节点后同时勾选子节点
$('#role-tree').tree({
cascadeCheck: false,
onSelect: function (node) {
var node1=$('#role-tree').tree('getParent',node.target);
$('#role-tree').tree('check', node1.target);
},
onLoadSuccess: function (node, data) {
$(this).find('span.tree-checkbox').unbind().click(function () {
$('#role-tree').tree('select', $(this).parent());
return true;
});
}
})

</script>

这一步有个bug，就是选了子节点后，只能选择上一级的父节点，大家可以先看看选择多级父节点的实现方式，我以后再实现这个功能