asp.net treeview控件无刷新选择和删除节点（使用jquery）

 

要想做到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&amp;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&amp;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&amp;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代码如下

< style type ="text/css" > ...
     .TreeView1_0 {...}{ text-decoration:none; }
     .TreeView1_1 {...}{ background-color:#E0E0E0;border-color:#E0E0E0;border-width:1px;border-style:Solid; }

</ style >

如果节点被选择的话，节点所在的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>