TreeView的节点联动
最近在实习做的项目中，需要将所有省以及省下的市以树的形式展现出来，以便选择各个需要的省市。我先是将所有省市保存在一个XML文件中，然后读取XML文件把树展示出来。最后就是要实现选择的联动了，但在使用时发现，在选中复选框时不会引起回发事件，于是一顿猛查。找到了如下方法：<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" ShowLines="True" ExpandDepth="0" OnTreeNodeCheckChanged="TreeView1_TreeNodeCheckChanged"></asp:TreeView>
.aspx文件中加一段JavaScript代码：
<script type="text/javascript">// 点击复选框时触发事件function postBackByObject(){ var node = window.event.srcElement; if (node.tagName == "INPUT" && node.type == "checkbox") { __doPostBack("",""); } }</script>
CS文件中的代码如下：
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { XmlDocument xdoc = new XmlDocument(); xdoc.Load(@"E:\WebSite1\XMLFile.xml"); XmlNodeList elemList = xdoc.DocumentElement.ChildNodes; foreach (XmlNode pxn in elemList) { TreeNode tn = new TreeNode(); tn.Text = pxn.Name; tn.Value = pxn.Attributes["code"].Value; TreeView1.Nodes.Add(tn); if (pxn.ChildNodes.Count != 0) { XmlNodeList codeList = pxn.ChildNodes; foreach (XmlNode item in codeList) { TreeNode codeTn = new TreeNode(); codeTn.Text = item.Name; codeTn.Value = item.Attributes["code"].Value; tn.ChildNodes.Add(codeTn); } } } //绑定事件 TreeView1.Attributes.Add("onclick", "postBackByObject()"); } } protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e) { SetChildChecked(e.Node); // 判断是否是根节点 if (e.Node.Parent != null) { SetParentChecked(e.Node); } } /// <summary> /// 根据父节点状态设置子节点的状态 /// </summary> /// <param name="parentNode">树的一个父节点</param> private void SetChildChecked(TreeNode parentNode) { foreach (TreeNode node in parentNode.ChildNodes) { node.Checked = parentNode.Checked; if (node.ChildNodes.Count > 0) { SetChildChecked(node); } } } /// <summary> /// 根据子节点状态设置父节点的状态 /// </summary> /// <param name="childNode">树的一个子节点</param> private void SetParentChecked(TreeNode childNode) { TreeNode parentNode = childNode.Parent; if (!parentNode.Checked && childNode.Checked) { int ichecks = 0; foreach (TreeNode node in parentNode.ChildNodes) { if (node.Checked) { ichecks++; } } if (ichecks == parentNode.ChildNodes.Count) { parentNode.Checked = true; if (parentNode.Parent != null) { SetParentChecked(parentNode); } } } else if (parentNode.Checked && !childNode.Checked) { parentNode.Checked = false; } }
使用了上述方法后，功能达到了，但是每次点击的时候都会刷新，客户体验非常的差
于是使用了AJAX控件（使用时要将__doPostBack("","");
改为__doPostBack("UpdatePanelID","");），可是又会报脚本错误。没办法了，只有找无刷新的咯，要不恐怕用户和服务器都受不了。
后来终于找到了，不过本人这种低级水平是看不懂，不管了，先记下在说
HTML代码
<div> <asp:TreeView ID="tvSelectList" runat="server" ShowCheckBoxes="All" ShowLines="True" > </asp:TreeView></div>
JavaScript代码：<script language="javascript" type="text/javascript"> function OnTreeNodeChecked() { var ele = event.srcElement; if(ele.type=='checkbox') { var childrenDivID = ele.id.replace('CheckBox','Nodes'); var div = document.getElementById(childrenDivID); if(div != null) { var checkBoxs = div.getElementsByTagName('INPUT'); for(var i=0;i<checkBoxs.length;i++) { if(checkBoxs.type=='checkbox') checkBoxs.checked=ele.checked; } } else { var div = GetParentByTagName(ele,'DIV'); var checkBoxs = div.getElementsByTagName('INPUT'); var parentCheckBoxID = div.id.replace('Nodes','CheckBox'); var parentCheckBox = document.getElementById(parentCheckBoxID); for(var i=0;i<checkBoxs.length;i++) { if(checkBoxs.type=='checkbox' && (!checkBoxs.checked)) { parentCheckBox.checked = false; return; } } parentCheckBox.checked = true; } } } function GetParentByTagName(element, tagName) { var parent = element.parentNode; var upperTagName = tagName.toUpperCase(); while (parent && (parent.tagName.toUpperCase() != upperTagName)) { parent = parent.parentNode ? parent.parentNode : parent.parentElement; } return parent; } </script>
CS代码
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { XmlDocument xdoc = new XmlDocument(); xdoc.Load(@"E:\WebSite1\XMLFile.xml"); XmlNodeList elemList = xdoc.DocumentElement.ChildNodes; foreach (XmlNode pxn in elemList) { TreeNode tn = new TreeNode(); tn.Text = pxn.Name; tn.Value = pxn.Attributes["code"].Value; tvSelectList.Nodes.Add(tn); if (pxn.ChildNodes.Count != 0) { XmlNodeList codeList = pxn.ChildNodes; foreach (XmlNode item in codeList) { TreeNode codeTn = new TreeNode(); codeTn.Text = item.Name; codeTn.Value = item.Attributes["code"].Value; tn.ChildNodes.Add(codeTn); } } } } }
最后要说的是不管使用何种方法都要记得引用命名空间，因为都涉及到XML文件的操作
using System.Xml;
页:
[1]