解决asp.net 2.0 中treeview的checkbox级联选择

以下代码实现了当TreeView节点包含CheckBox时保持其父子节点状态一致，即：当选中父节点，子节点会全部自动选上，反之则全部取消。选择某个子节点，同样应该选中这个字节点的父节点（包括祖先节点）。

在网上也找了一些方法，但是我觉得这是TreeView的一个缺陷，因此应该在该控件内部实现，而不应该附加一些外部的js来控制TreeView，有什么问题可以给我留言，我及时更正:

先在后置cs文件里里添加：

protected void Page_Load(object sender, EventArgs e)

{

// Load sample data only once, when the page is first loaded.

if (!IsPostBack)

{

SampleTreeView.Attributes.Add("onClick","OnCheckEvent()");

}

}

相关js:

<script language="javascript">

//checkbox点击事件

function OnCheckEvent()

{

var objNode = event.srcElement;

if(objNode.tagName != "INPUT" || objNode.type != "checkbox")

return;

//获得当前树结点

var ck_ID = objNode.getAttribute("ID");

var node_ID = ck_ID.substring(0,ck_ID.indexOf("CheckBox")) + "Nodes";

var curTreeNode = document.getElementById(node_ID);

//级联选择

SetChildCheckBox(curTreeNode,objNode.checked);

SetParentCheckBox(objNode);

}

//子结点字符串

var childIds = "";

//获取子结点ID数组

function GetChildIdArray(parentNode)

{

if (parentNode == null)

return;

var childNodes = parentNode.children;

var count = childNodes.length;

for(var i = 0;i < count;i ++)

{

var tmpNode = childNodes[i];

if(tmpNode.tagName == "INPUT" && tmpNode.type == "checkbox")

{

childIds = tmpNode.id + ":" + childIds;

}

GetChildIdArray(tmpNode);

}

}

//设置子结点的checkbox

function SetChildCheckBox(parentNode,checked)

{

if(parentNode == null)

return;

var childNodes = parentNode.children;

var count = childNodes.length;

for(var i = 0;i < count;i ++)

{

var tmpNode = childNodes[i];

if(tmpNode.tagName == "INPUT" && tmpNode.type == "checkbox")

{

tmpNode.checked = checked;

}

SetChildCheckBox(tmpNode,checked);

}

}

//设置父结点的checkbox

function SetParentCheckBox(childNode)

{

if(childNode == null)

return;

var parent = childNode.parentNode;

if(parent == null || parent == "undefined")

return;

do

{

parent = parent.parentNode;

}

while (parent && parent.tagName != "DIV");

if(parent == "undefined" || parent == null)

return;

var parentId = parent.getAttribute("ID");

var objParent = document.getElementById(parentId);

childIds = "";

GetChildIdArray(objParent);

//判断子结点状态

childIds = childIds.substring(0,childIds.length - 1);

var aryChild = childIds.split(":");

var result = false;

//当子结点的checkbox状态有一个为true，其父结点checkbox状态即为true,否则为false

for(var i in aryChild)

{

var childCk = document.getElementById(aryChild[i]);

if(childCk.checked)

result = true;

}

parentId = parentId.replace("Nodes","CheckBox");

var parentCk = document.getElementById(parentId);

if(parentCk == null)

return;

if(result)

parentCk.checked = true;

else

parentCk.checked = false;

SetParentCheckBox(parentCk);

}

</script>

以下是treeview的测试脚本：

<asp:TreeView ShowCheckBoxes=All>

<Nodes>

<asp:TreeNode Value="Home"

NavigateUrl =""

Text="Home"

Target="Content"

Expanded="True"

SelectAction=SelectExpand>

<asp:TreeNode Value="1"

NavigateUrl=""

Text="Page1"

Target="Content">

<asp:TreeNode Value="2"

NavigateUrl=""

Text="Section 1"

Target="Content">

<asp:TreeNode Value="3"

NavigateUrl=""

Text="Section 1"

Target="Content"/>

<asp:TreeNode Value="4"

NavigateUrl=""

Text="Section 1"

Target="Content"/>

</asp:TreeNode>

<asp:TreeNode Value="5"

NavigateUrl=""

Text="Section 2"

Target="Content">

</asp:TreeNode>

</asp:TreeNode>

<asp:TreeNode Value="6"

NavigateUrl=""

Text="Page 2"

Target="Content">

<asp:TreeNode Value="7"

NavigateUrl=""

Text="Section 1"

Target="Content">

</asp:TreeNode>

<asp:TreeNode Value="8"

NavigateUrl=""

Text="Section 2"

Target="Content">

</asp:TreeNode>

</asp:TreeNode>

</asp:TreeNode>

</Nodes>

</asp:TreeView>

运行在vs2005下正常，脚本不报错