easyui-treegrid本身不能实现选中父节点子节点全选,必须通过另外的方法来实现,这里说下如何通过修改节点样式添加checkbox来实现级联选择效果
首先需要格式化节点的样式
formatter: function (value, row, index) {
return "<input type='checkbox' onclick=show('" + row.ID + "') id='check_" + row.ID + "'/>" + row.EntityName;
}
show方法如下:
function show(checkid) {
var s = '#check_' + checkid;
//alert( $(s).attr("id"));
// alert($(s)[0].checked);
/*选子节点*/
var nodes = $("#EntityTree").treegrid("getChildren", checkid);
for (i = 0; i < nodes.length; i++) {
$(('#check_' + nodes[i].ID))[0].checked = $(s)[0].checked; }
//选上级节点
if (!$(s)[0].checked) {
var parent = $("#EntityTree").treegrid("getParent", checkid);
$(('#check_' + parent.ID))[0].checked = false;
while (parent) {
parent = $("#EntityTree").treegrid("getParent", parent.ID);
$(('#check_' + parent.ID))[0].checked = false;
}
} else {
var parent = $("#EntityTree").treegrid("getParent", checkid);
var flag = true;
var sons = parent.sondata.split(',');
for (j = 0; j < sons.length; j++) {
if (!$(('#check_' + sons[j]))[0].checked) {
flag = false;
break;
}
}
if (flag)
$(('#check_' + parent.ID))[0].checked = true;
while (flag) {
parent = $("#EntityTree").treegrid("getParent", parent.ID);
if (parent) {
sons = parent.sondata.split(',');
for (j = 0; j < sons.length; j++) {
if (!$(('#check_' + sons[j]))[0].checked) {
flag = false;
break;
}
}
}
if (flag)
$(('#check_' + parent.ID))[0].checked = true;
}
}
}