需求:子结点选中,父节点随之选中,父节点取消,子节点随之取消,但是加载的时候不进行级联加载
var data = [{
"id": 1,
"text": "系统",
"children": [{
"id": 11,
"text": "用户管理",
"children": [{
"id": 19,
"text": "增加"
}, {
"id": 3,
"text": "修改"
}, {
"id": 5,
"text": "删除"
}]
}, {
"id": 12,
"text": "角色管理",
"children": [{
"id": 13,
"text": "增加"
}, {
"id": 3,
"text": "修改"
}, {
"id": 5,
"text": "删除"
}]
}]
}, {
"id": 2,
"text": "其他",
"state": "closed"
}];
$("#tt").tree({
data: data,
checkbox: true,
// 必须是false否则在加载已经配置的子节点下没选中的也会选中
cascadeCheck: false,
onCheck: function (node, checked) {
// 选中时 一般不进行操作 让用户自己选中
if (checked) {
var parentNode = $("#xxx").tree('getParent', node.target);
if (parentNode != null) {
$("#xxx").tree('check', parentNode.target);
}
}
// 取消时一般进行全部取消
else {
var childNode = $("#tt").tree('getChildren', node.target);
if (childNode.length > 0) {
for (var i = 0; i < childNode.length; i++) {
$("#tt").tree('uncheck', childNode[i].target);
}
}
}
}
});
- 大小: 13.6 KB
分享到:
相关推荐
在本文中,我们将深入探讨如何使用jQuery和EasyUI库实现一个具有级联选中功能的CheckBoxTree组件。CheckBoxTree是一种常见的UI元素,常用于展示层级结构的数据,并允许用户通过复选框选择或取消选择整条数据路径。在...
这通常通过扩展EasyUI Tree的默认模板来实现,增加相应的HTML元素(如`<input type="checkbox">`)并绑定事件处理程序。 2. **数据绑定**:EasyUI Tree的数据通常来自于服务器或本地JSON数据,改进版依然保持了这种...
- `cascadeCheck: false`:禁止级联选中,即父节点的选中状态不会影响子节点。 - `//onlyLeafCheck: true`:注释掉此行表示允许非叶子节点被选中。如果取消注释,只有叶子节点才能被选中。 - `checkbox: true`:开启...
标题"easyui-tree-diasbleCheckbox"暗示了我们关注的是EasyUI树形控件中的一个特性,即禁用复选框(checkbox)。在EasyUI的树形控件中,每个节点可以配置复选框,用户可以通过选择或取消选择这些复选框来操作数据。...
tree { data: data checkbox : true cascadeCheck : false onCheck : function node checked { if checked { var parentNode $ "#menuTrees" tree "getParent" node target ; ...
在jQuery EasyUI中,tree组件是一个常用于展示树形数据结构的组件,非常适合实现如组织结构、分类目录等功能。本文将浅析jQuery EasyUI中tree组件的使用方法,内容基于开发经验的理解,为需要此方面的朋友们提供参考...
在本文中,我们将深入探讨 EasyUI 中的 `tree` 用法,特别是在异步加载和级联选择场景下的应用。 首先,`tree` 组件在 EasyUI 中用于展示树形结构的数据,常用于组织结构、文件目录等场景。在上述描述中,开发者...
- **按钮(Button)**、**复选框(Checkbox)**、**单选按钮(RadioButton)**等基础控件,丰富了用户交互体验。 - **树形控件(Tree)**:用于展现层次结构的数据。 - **进度条(ProgressBar)**:展示任务或数据加载的...
* cascadeCheck:指定Tree组件是否支持级联选择 Tree 组件的事件 在我们的实例代码中,我们使用了EasyUI的Tree组件来创建人员树。在 Tree 组件中,我们可以绑定多个事件,例如onLoadSuccess、onNodeClick、...
8. **复选框支持**:若需要在 Tree 中启用复选框功能,只需在 Tree 的配置项中设置 `checkbox` 为 `true`,并可以设置 `cascadeCheck` 控制复选框的级联选择行为。 9. **拖拽排序**:通过设置 `draggable` 和 `...
- **Menu(菜单)**:创建下拉菜单或级联菜单,用于实现多级操作项。 - **Form(表单)**:用于展示和收集用户输入,与各种表单控件(如文本框、选择框、复选框等)配合使用。 2. **数据控件**: - **DataGrid...
Tree的配置选项还包括定义是否显示节点前的复选框(checkbox),以及是否支持级联检查(cascadeCheck)或仅在叶节点显示复选框(onlyLeafCheck)。 Tree组件触发的事件包括节点点击(onClick)、双击(onDblClick)...
5. **表单组件**:如输入框(Input)、复选框(Checkbox)、单选按钮(Radio)等,用于收集用户输入。 6. **按钮(Button)**:提供各种类型的按钮,如普通按钮、提交按钮、链接按钮等。 7. **布局(Layout)**:...