正文
TreeView控件的CheckBox级联选中或取消
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
背景：
在一个项目开发中遇到这样的要求：当选中树中一个节点时，需要同时选中其父节点，直至根节点。在取消一个节点的选中时，需要将其所有子节点取消选中，直至叶子节点。由于项目用户体验暂时可以不用考虑，直接想到用TreeView的TreeNodeCheckChanged事件，但是运行时发现一个问题，当改变一个节点的CheckBox的选中状态时，不会触发TreeNodeCheckChanged事件，只有在点击了某一个节点的文本后在触发一系列的事件。因此这条路行不通了，只好另寻其它方法了。
实现方法：
直接使用事件的方法不可行，那直接想到的方法是通过脚本实现，结合网络资源和业务要求整理了如下js脚本。
function postBackByObject() {
var element = window.event.srcElement;
if (element.tagName == "INPUT" && element.type == "checkbox") {
var checkedState = element.checked;
if (checkedState) {
while (element.tagName != "TABLE")
element = element.parentElement;
CheckWithParent(element);
}
else {
while (element.tagName != "TABLE")
element = element.parentElement;
UnCheckWithChilds(element);
}
}
}
//取消节点及其子节点（直至叶子节点）的选中状态。
function UnCheckWithChilds(table) {
if (table != null) {
Check(table, false);
var childDiv = table.nextSibling;
if (childDiv != null) {
if (childDiv.tagName == "DIV") {
var childs = childDiv.getElementsByTagName("table");
for (var i = 0; i < childs.length; i++) {
UnCheckWithChilds(childs[i]);
}
}
}
}
}
//选中节点及其父节点（直至根节点）。
//注：TreeView1 为TreeView控件的ID。
function CheckWithParent(table) {
if (table != null) {
Check(table, true);
var parentDiv = table.parentElement;
if (parentDiv.id == "TreeView1") {
return;
}
else {
var parentTable = parentDiv.previousSibling;
CheckWithParent(parentTable);
}
}
}
//修改节点的CheckBox状态。
function Check(table, checked) {
if (table != null) {
var checkboxIndex = table.rows[0].cells.length - 1;
var cell = table.rows[0].cells[checkboxIndex];
var checkboxes = cell.getElementsByTagName("INPUT");
if (checkboxes.length == 1)
checkboxes[0].checked = checked;
}
}
