如上图,默认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> <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;
}