asp.net treeview控件无刷新选择和删除节点的ajax方法

 

要想做到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>

我要用的是TreeNodePopulate方法来绑定数据，所以上面先加一个根节点，值为0，注意一点要把PopulateOnDemand属性设置为True。

 

然后再来看后台代码

 

     protected   void  Page_Load( object  sender, EventArgs e)
     ... {
        if (Request.QueryString["id"] != null)
        ...{
            OleDbConnection conn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("~/App_Data/Database1.mdb"));
            OleDbCommand cmd = new OleDbCommand("delete from tree where id = " + Request.QueryString["id"], conn);
            try
            ...{
                conn.Open();
                cmd.ExecuteNonQuery();
                conn.Close();
                Response.Write("0");
            }
            catch (Exception ex)
            ...{
                Response.Write(ex.Message);
            }
            Response.End();
        }

        
    }

 

这个是删除节点的代码，初学者也能看明白，但为什么这样写一会儿看ajax方法就知道了

 

     protected   void  TreeView1_TreeNodePopulate( object  sender, TreeNodeEventArgs e)
     ... {
        OleDbConnection conn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("~/App_Data/Database1.mdb"));
        OleDbCommand cmd = new OleDbCommand("select * from tree where parentid = " + e.Node.Value, conn);
        TreeNode newNode;
        conn.Open();
        OleDbDataReader dr = cmd.ExecuteReader();
        while (dr.Read())
        ...{
            newNode = new TreeNode();
            newNode.Text = dr[1].ToString();
            newNode.Value = dr[0].ToString();
            newNode.PopulateOnDemand = true;
            newNode.NavigateUrl = dr[0].ToString();
            newNode.SelectAction = TreeNodeSelectAction.None;
            e.Node.ChildNodes.Add(newNode);
        }
        dr.Close();
        conn.Close();
    }

 

Treeview的绑定代码，数据库的结构很简单，就是id,classname,parentid三个字段，parentid表示父节点的id。相信用过treeview的朋友应该能看懂上面的代码，主要是上面红色的部分，这样做就可以让节点所在的span生成href属性，属性值为节点的值。这样我们在客户端就可以取到节点值了。

 

接下来是客户端选择节点的代码，当然是javascript，不过本人的javascript学的不精，幸好前一段时间研究了一下jquery这个好东西。所以下面的代码都是用jquery实现的（jquery的具体语法看这里 http://jquery.org.cn/ ，我不对语法做具体说明了，只说明语句作用）

 

        $( " span " ).click( function () ... {
            var selected ="#" + $("#TreeView1_SelectedNode").val();//上一次选择的节点的id
            $(selected).parent().attr("class","");//去掉上一次选择的节点的选择样式
            $(this).parent().attr("class","TreeView1_1");//给新选择的节点加上选择样式
            $("#TreeView1_SelectedNode").val(this.id)//把新选择的节点的id放到id为TreeView1_SelectedNode隐藏域
            $("#selectedvalue").val($("#"+this.id).attr("href"));//把新选择的节点的值放到id为selectedvalue文本框里
        } );

 

注释已经很清楚了，不再多说。

下面是最重要的删除部分，所用的ajax方法也是jquery自带的(jquery真是越用越顺手)，

 

        $( " #delNode " ).click( function () ... {
            var selected = document.getElementById($("#TreeView1_SelectedNode").val());//取得选择的节点
            if(selected != null)
            ...{
                //调用jquery的ajax方法删除节点
                $.ajax(...{
                type: "get",
                dataType: "text",
                url: "treeview.aspx",
                data: "id=" + $("#selectedvalue").val(),
                success: function(msg)...{
                        if(msg=="0")//删除成功
                            DelNode(selected);//删除页面上相应的节点
                        else
                            alert(msg);                            
                    }
                });
            }                
            else
                alert("请先选择节点");
                
        } );
        
    
     function  DelNode(node)
     ... {
        var subdiv = "#" + node.id.replace("t","n") + "Nodes";//节点的子节点所在div的id
        if($(subdiv).html() == null)//没有子节点
        ...{
            if($(WebForm_GetParentByTagName(node,"div")).find("table").length == 1)//这个用来判断是否有兄弟节点
            ...{
                //如果只有一个节点,没有其他兄弟节点的话，就需要把这个节点所在的div一起删掉
                var parentdiv = WebForm_GetParentByTagName(node,"div")
                $(parentdiv).remove();
                $("#" + parentdiv.id.replace("t","n").replace("Nodes","")).parent().html("<img src="/jsonTest/WebResource.axd?d=lBLgNV6VfPf2WYaPivyJeox2LqmFZnR_zUU0BO2r0tM1&amp;t=633087263926406250" alt="" />");//替换父节点的前的图片，把展开的图片换成空白图片
            }
            else
                $(WebForm_GetParentByTagName(node,"table")).remove();//有兄弟节点，只删除节点本身的table
        }
        else
            alert("请先删除子节点");//有子节点的话不能直接删除
    }

其中delNode 是一个button的id，WebForm_GetParentByTagName()函数是treeview自带的，可以看我以前的文章asp.net 2.0 中 TreeView控件中的checkbox客户端操作 。

以上就是主要的部分，有兴趣的朋友可以一起讨论一下。用ajax添加节点的方法正在研究中，下次再发。

注意：本篇的实例已经发布，请见文章《用jQuery实现asp.net 2.0 treeview控件完全无刷新操作实例(AJAX的增、删、改、选择以及展开收缩节点) 》。可以看实例中的代码，对删除部分做了修改。