easyui treegrid checkbox 联动

如上图,默认treegrid貌似不支持选择父之后默认选择子这样的父子联动功能

所以就自己写了一个实现模式

上代码-数据格式id -children

//加载列表
        $('#dg').treegrid({
            idField: 'ID',
            treeField: 'UserName',
            title: '组成员列表',
            iconCls: 'icon-list',
            singleSelect: false,
            method: 'POST',
            fitColumns: true,
            fit: true,
            url: "/AttentionPeople/GetGroupMemberList",

            loadFilter: function (data, parentId) {

               //把id-pid 数据转成id-children 格式,id pid可以是字符串也可以是int

                var treeData = $.fn.arrayToTree(data, "ID", "PID");
                return treeData;
            },

            columns: [[
                          { field: 'CK', width: 40, align: 'center', checkbox: true },
                          { field: 'UserName', title: '名称', width: 80, align: 'center' },
                          { field: 'LoginName', title: '域账号', width: 40, align: 'center' },
                          {
                                 field: 'PID', width: 40, align: 'left', formatter: function (value, row, index) {

                                     if (row.PID == "00000000-0000-0000-0000-000000000000") {
                                         return "<a href=\"javascript:void(0);\" οnclick=\"addmember('" + row.ID + "')\">添加</a>&nbsp;&nbsp;<a href='javascript:void(0);' οnclick=\"delgroup('" + row.ID + "')\">删除</a>";
                                     }
                                     else {
                                         return "<a href='javascript:void(0);' οnclick=\"delmember('" + row.ID + "')\">删除</a>";
                                     }

                                 }
                             }


            ]],
            onClickRow:function (rowData){
                var selectList = $('#dg').treegrid("getSelections");
                //判断是否是选中
                var isck = false;
                for (var i = 0; i < selectList.length; i++) {
                    if (selectList[i].ID == rowData.ID) {
                        isck = true;
                        break;
                    }
                }
                if (isck) {
                    //是选中
                    if (rowData.PID == "00000000-0000-0000-0000-000000000000") {
                        for (var i = 0; i < rowData.children.length; i++) {
                            //父选择了
                            $("#dg").treegrid("select", rowData.children[i].ID);
                        }
                    } else {
                        debugger;
                        //子选择了-判断是不是全部选择了如果全部选择了就把父选上
                        //得到所有数据
                        var allData = $('#dg').treegrid("getData");
                        //是不是全选,默认全选
                        var selectAll = true;
                        //找到父节点
                        var parentRowData;
                        for (var i = 0; i < allData.length; i++) {
                            //找到这个父
                            if (allData[i].ID == rowData.PID)
                            {
                                parentRowData = allData[i];
                                break;
                            }
                        }
                        //判断这个父下的子是不是都选中
                        for (var i = 0; i < parentRowData.children.length; i++) {
                            //判断子是不是被选中
                            var sonCK = false;
                            //从所有数据里面找不在选择里面的
                            for (var j = 0; j < selectList.length; j++) {
                                //选中数据里面有一个不是选中的就不是全选
                                if (selectList[j].ID == parentRowData.children[i].ID && selectList[j].PID == parentRowData.children[i].PID)
                                {
                                    sonCK = true;
                                    break;
                                }
                            }
                            //子有一个没选中
                            if (sonCK == false)
                            {
                                selectAll = false;
                                break;
                            }
                        }
                        //子全选了
                        if (selectAll)
                        {
                            //父也得选上
                            $("#dg").treegrid("select", rowData.PID);
                        }
                    }
                } else {
                    //是取消
                    if (rowData.PID == "00000000-0000-0000-0000-000000000000") {
                        for (var i = 0; i < rowData.children.length; i++) {
                            //父取消了-子也得取消
                            $("#dg").treegrid("unselect", rowData.children[i].ID);
                        }
                    } else {
                        //子取消父必须取消
                        $("#dg").treegrid("unselect", rowData.PID);
                    }
                }
            }

        });




    //把id-pid 数据转成id-children 格式,id pid可以是字符串也可以是int

                var treeData = $.fn.arrayToTree(data, "ID", "PID");


这个方法

  //将ID、ParentID这种数据格式转换为树格式
    $.fn.arrayToTree = function (data, id, pid) {
        if (!data || !data.length) return [];
        var targetData = [];                    //存储数据的容器(返回)
        var records = {};
        var itemLength = data.length;           //数据集合的个数
        for (var i = 0; i < itemLength; i++) {
            var o = data[i];
            records[o[id]] = o;
        }
        for (var i = 0; i < itemLength; i++) {
            var currentData = data[i];
            var parentData = records[currentData[pid]];
            if (!parentData) {
                targetData.push(currentData);
                continue;
            }
            parentData.children = parentData.children || [];
            parentData.children.push(currentData);
        }
        return targetData;
    }


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值