要想做到treeview在客户端的操作的话,首先要了解treeview生成的html,比如下面一个treeview

它的每一个节点生成的html都是一个table,比如说根节点
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><a id="TreeView1n0" href="javascript:TreeView_ToggleNode(TreeView1_Data,0,TreeView1n0,' ',TreeView1n0Nodes)"><img src="/jsonTest/WebResource.axd?d=lBLgNV6VfPf2WYaPivyJehFROhg3KOcfwktkbcd1USw1&t=633087263926406250" alt="折叠 根节点" style="border-width:0;" /></a></td><td class="TreeView1_1" style="white-space:nowrap;"><span class="TreeView1_0" id="TreeView1t0">根节点</span></td>
</tr>
</table>
可以看到节点的文本是放在一个id为"TreeView1t0"的span里面的,但是从这里不能取得节点的值(这个问题一会儿解决),再来看它的子节点的html。
<div id="TreeView1n0Nodes" style="display:block;">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td><a id="TreeView1n1" href="javascript:TreeView_ToggleNode(TreeView1_Data,1,TreeView1n1,' ',TreeView1n1Nodes)"><img src="/jsonTest/WebResource.axd?d=lBLgNV6VfPf2WYaPivyJehFROhg3KOcfwktkbcd1USw1&t=633087263926406250" alt="折叠 aaa" style="border-width:0;" /></a></td><td style="white-space:nowrap;"><span class="TreeView1_0" id="TreeView1t1">aaa</span></td>
</tr>
</table><div id="TreeView1n1Nodes" style="display:block;">
<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="/jsonTest/WebResource.axd?d=lBLgNV6VfPf2WYaPivyJeox2LqmFZnR_zUU0BO2r0tM1&t=633087263926406250" alt="" /></td><td style="white-space:nowrap;"><span class="TreeView1_0" href="27" id="TreeView1t2">a1</span></td>
</tr>
</table>…….
它的子节点都是放在一个id为"TreeView1n0Nodes"的div里面的,再来看aaa节点的子节点,也是放在"TreeView1n1Nodes",而aaa节点的span的id为"TreeView1t1"。这样整个treeview的html的结构就清楚了。
再说明一点,注意看根节点的html
<td class="TreeView1_1" style="white-space:nowrap;"><span class="TreeView1_0" id="TreeView1t0">根节点</span></td>
主要是class="TreeView1_1",这个是TreeView1_1的样式表是treeview设置了SelectedNodeStyle属性生成的,html代码如下
如果节点被选择的话,节点所在的td的class属性就会被设置为TreeView1_1。
最后说明一点,页面生成的html里还有这个
<input type="hidden" name="TreeView1_SelectedNode" id="TreeView1_SelectedNode" value="TreeView1t0" />
这里面放的是被选中的节点所在的span的id。
搞清楚以上几点,就可以看具体是怎么做的了,首先是treeview控件的代码
<asp:TreeView ID="TreeView1" runat="server"
OnTreeNodePopulate="TreeView1_TreeNodePopulate" EnableViewState="False">
<SelectedNodeStyle BorderColor="#E0E0E0" BorderStyle="Solid" BorderWidth="1px" BackColor="#E0E0E0" />
<Nodes>
<asp:TreeNode PopulateOnDemand="True" SelectAction="None" Selected="True" Text="根节点" Value="0"></asp:TreeNode>
</Nodes>
</asp:TreeView>
我要用的是TreeNodePopulate方法来绑定数据,所以上面先加一个根节点,值为0,注意一点要把PopulateOnDemand属性设置为True。
然后再来看后台代码
protected void Page_Load(object sender, EventArgs e)
}
这个是删除节点的代码,初学者也能看明白,但为什么这样写一会儿看ajax方法就知道了
protected void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e)
Treeview的绑定代码,数据库的结构很简单,就是id,classname,parentid三个字段,parentid表示父节点的id。相信用过treeview的朋友应该能看懂上面的代码,主要是上面红色的部分,这样做就可以让节点所在的span生成href属性,属性值为节点的值。这样我们在客户端就可以取到节点值了。
接下来是客户端选择节点的代码,当然是javascript,不过本人的javascript学的不精,幸好前一段时间研究了一下jquery这个好东西。所以下面的代码都是用jquery实现的(jquery的具体语法看这里http://jquery.org.cn/,我不对语法做具体说明了,只说明语句作用)
注释已经很清楚了,不再多说。
下面是最重要的删除部分,所用的ajax方法也是jquery自带的(jquery真是越用越顺手),
以上就是主要的部分,有兴趣的朋友可以一起讨论一下。用ajax添加节点的方法正在研究中,下次再发。
。