以下
代码实现了当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>