关闭

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

1900人阅读 评论(0) 收藏 举报
要想做到treeview在客户端的操作的话,首先要了解treeview生成的html,比如下面一个treeview

它的每一个节点生成的html都是一个table,比如说根节点
 
    <table cellpadding="0" cellspacing="0" style="border-width:0;">
        
<tr>
            
<td><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><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的增、删、改、选择以及展开收缩节点) 》。可以看实例中的代码,对删除部分做了修改。


Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1621681


 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:259558次
    • 积分:3628
    • 等级:
    • 排名:第9335名
    • 原创:125篇
    • 转载:15篇
    • 译文:0篇
    • 评论:51条
    文章分类
    最新评论
    JS广告