easyui的treegrid的级联勾选子节点,或者级联勾选父节点

简介: easyui的treegrid的级联勾选子节点,或者级联勾选父节点

级联勾选子节点:

第一种:级联勾选子节点(父节点级联子节点)
步骤:

1.在treegrid的onCheck(选中)事件中写上函数(级联勾选子节点):

onCheck : function(row){
        t = $(this);
        opts = t.treegrid("options");
        if (opts.checkOnSelect && opts.singleSelect) { return; }
        var idField = opts.idField, id = row[idField], children, checked, parent = row;
        //如果当前节点被勾选,那么勾选该节点的子节点
        $.each(t.treegrid("getChildren", id), function (i, n) {
             if (!t.treegrid("isChecked", n[idField])) { t.treegrid("check", n[idField]); }
        });
},

2.在onUncheck(取消选中)事件中写上函数(级联取消勾选子节点):

t = $(this);
    opts = t.treegrid("options");
    if (opts.checkOnSelect && opts.singleSelect) { return; }
    var idField = opts.idField, id = row[idField], children, checked, parent = t.treegrid("getParent", id);
    $.each(t.treegrid("getChildren", id), function (i, n) {
    t.treegrid("uncheck", n[idField]);
});

第二种:级联勾选父节点(子节点级联父节点)

onCheck事件:

onCheck : function(row){
            t = $(this);
            opts = t.treegrid("options");
            if (opts.checkOnSelect && opts.singleSelect) { return; }
            var idField = opts.idField, id = row[idField], children, checked, parent = t.treegrid("getParent", id);
            while (parent) {
                    children = t.treegrid("getChildren", parent[idField]);
                    checked = t.treegrid("getChecked");
                    if (!$.array.some(children, function (val) { return !$.array.contains(checked, val); })) {
                        if (!t.treegrid("isChecked", parent[idField])) { t.treegrid("check", parent[idField]); }
                    }
                    parent = t.treegrid("getParent", parent[idField]);
             }
             $.each(t.treegrid("getChildren", id), function (i, n) {
                    //如果子节点没有勾选,那么勾选子节点
                    if (!t.treegrid("isChecked", n[idField])) { t.treegrid("check", n[idField]); }
             });
}

onUncheck事件:

onUncheck:function(row){
            t = $(this);
            opts = t.treegrid("options");
            if (opts.checkOnSelect && opts.singleSelect) { return; }
            var idField = opts.idField, id = row[idField], children, checked, parent = t.treegrid("getParent", id);
            while (parent) {
                    children = t.treegrid("getChildren", parent[idField]);
                    checked = t.treegrid("getChecked");
                    if (!$.array.some(children, function (val) { return $.array.contains(checked, val); })) {
                        if (t.treegrid("isChecked", parent[idField])) { t.treegrid("uncheck", parent[idField]); }
                    }
                    parent = t.treegrid("getParent", parent[idField]);
             }
             $.each(t.treegrid("getChildren", id), function (i, n) {
                    t.treegrid("uncheck", n[idField]);
             });
}

相关文章
|
11月前
|
存储 数据格式
55EasyUI 树形菜单- 树形菜单加载父/子节点
55EasyUI 树形菜单- 树形菜单加载父/子节点
27 0
|
JavaScript 索引
jquery easyui-datagrid/treegrid 清空数据参考
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chinahuyong/article/details/51862082   在使用easyui的treegrid或datagrid的过程经常会有这样的场景,如:需要按不同的类型加载数据时,如果选择的分类下没有数据应该把上次展示的数据清空,以免引用歧义。
1236 0
|
JavaScript API
jQuery EasyUI API 中文文档 - 树表格(TreeGrid)
TreeGrid 树形表格 扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults。 依赖 datagrid 用法 1.
1460 0