TreeView的节点联动

最近在实习做的项目中,需要将所有省以及省下的市以树的形式展现出来,以便选择各个需要的省市。我先是将所有省市保存在一个XML文件中,然后读取XML文件把树展示出来。最后就是要实现选择的联动了,但在使用时发现,在选中复选框时不会引起回发事件,于是一顿猛查。找到了如下方法:

<asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" ShowLines="True"
ExpandDepth="0" OnTreeNodeCheckChanged="TreeView1_TreeNodeCheckChanged">
</asp:TreeView>

[color=olive]
.aspx文件中加一段JavaScript代码:
[/color]
 
<script type="text/javascript">
// 点击复选框时触发事件
function postBackByObject()
{
var node = window.event.srcElement;
if (node.tagName == "INPUT" && node.type == "checkbox")
{
__doPostBack("","");
}
}
</script>

[color=olive]CS文件中的代码如下:[/color]

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控件([color=red]使用时要将__doPostBack("","");
改为__doPostBack("UpdatePanelID","");[/color]),可是又会报脚本错误。没办法了,只有找无刷新的咯,要不恐怕用户和服务器都受不了。
后来终于找到了,不过本人这种低级水平是看不懂,不管了,先记下在说

[color=olive]HTML代码[/color]

<div>
<asp:TreeView ID="tvSelectList" runat="server" ShowCheckBoxes="All" ShowLines="True"
onclick="OnTreeNodeChecked()">
</asp:TreeView>
</div>


[color=olive]JavaScript代码:[/color]

<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[i].type=='checkbox')
checkBoxs[i].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[i].type=='checkbox' && (!checkBoxs[i].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>


[color=olive]CS代码[/color]

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;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值