以下代码实现了当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 id="SampleTreeView" runat="server" 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下正常,脚本不报错