`

easyUi Tree的CheckBox级联选中问题

 
阅读更多
需求:子结点选中,父节点随之选中,父节点取消,子节点随之取消,但是加载的时候不进行级联加载
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的级联选中特效

    在本文中,我们将深入探讨如何使用jQuery和EasyUI库实现一个具有级联选中功能的CheckBoxTree组件。CheckBoxTree是一种常见的UI元素,常用于展示层级结构的数据,并允许用户通过复选框选择或取消选择整条数据路径。在...

    easyui tree 改进版

    这通常通过扩展EasyUI Tree的默认模板来实现,增加相应的HTML元素(如`&lt;input type="checkbox"&gt;`)并绑定事件处理程序。 2. **数据绑定**:EasyUI Tree的数据通常来自于服务器或本地JSON数据,改进版依然保持了这种...

    easyui tree带checkbox实现单选的简单实例

    - `cascadeCheck: false`:禁止级联选中,即父节点的选中状态不会影响子节点。 - `//onlyLeafCheck: true`:注释掉此行表示允许非叶子节点被选中。如果取消注释,只有叶子节点才能被选中。 - `checkbox: true`:开启...

    easyui-tree-diasbleCheckbox

    标题"easyui-tree-diasbleCheckbox"暗示了我们关注的是EasyUI树形控件中的一个特性,即禁用复选框(checkbox)。在EasyUI的树形控件中,每个节点可以配置复选框,用户可以通过选择或取消选择这些复选框来操作数据。...

    easyui级联树

    tree { data: data checkbox : true cascadeCheck : false onCheck : function node checked { if checked { var parentNode $ &quot;#menuTrees&quot; tree &quot;getParent&quot; node target ; ...

    浅析jQuery EasyUI中的tree使用指南

    在jQuery EasyUI中,tree组件是一个常用于展示树形数据结构的组件,非常适合实现如组织结构、分类目录等功能。本文将浅析jQuery EasyUI中tree组件的使用方法,内容基于开发经验的理解,为需要此方面的朋友们提供参考...

    EasyUI中的tree用法介绍

    在本文中,我们将深入探讨 EasyUI 中的 `tree` 用法,特别是在异步加载和级联选择场景下的应用。 首先,`tree` 组件在 EasyUI 中用于展示树形结构的数据,常用于组织结构、文件目录等场景。在上述描述中,开发者...

    easyui完整包

    - **按钮(Button)**、**复选框(Checkbox)**、**单选按钮(RadioButton)**等基础控件,丰富了用户交互体验。 - **树形控件(Tree)**:用于展现层次结构的数据。 - **进度条(ProgressBar)**:展示任务或数据加载的...

    EasyUI创建人员树的实例代码

    * cascadeCheck:指定Tree组件是否支持级联选择 Tree 组件的事件 在我们的实例代码中,我们使用了EasyUI的Tree组件来创建人员树。在 Tree 组件中,我们可以绑定多个事件,例如onLoadSuccess、onNodeClick、...

    jquery easy ui tree

    8. **复选框支持**:若需要在 Tree 中启用复选框功能,只需在 Tree 的配置项中设置 `checkbox` 为 `true`,并可以设置 `cascadeCheck` 控制复选框的级联选择行为。 9. **拖拽排序**:通过设置 `draggable` 和 `...

    jQuery EasyUI 1.4.5 版 API 中文版

    - **Menu(菜单)**:创建下拉菜单或级联菜单,用于实现多级操作项。 - **Form(表单)**:用于展示和收集用户输入,与各种表单控件(如文本框、选择框、复选框等)配合使用。 2. **数据控件**: - **DataGrid...

    jQuery EasyUI API 中文文档 - Tree树使用介绍

    Tree的配置选项还包括定义是否显示节点前的复选框(checkbox),以及是否支持级联检查(cascadeCheck)或仅在叶节点显示复选框(onlyLeafCheck)。 Tree组件触发的事件包括节点点击(onClick)、双击(onDblClick)...

    jquery easy ui模板

    5. **表单组件**:如输入框(Input)、复选框(Checkbox)、单选按钮(Radio)等,用于收集用户输入。 6. **按钮(Button)**:提供各种类型的按钮,如普通按钮、提交按钮、链接按钮等。 7. **布局(Layout)**:...

Global site tag (gtag.js) - Google Analytics