Asp.net 2.0 TreeView控件使用jQuery无刷新添加节点详细说明

 

    TreeView控件生成的html结构已经在上一篇中说明，这里再简单说一下，一个节点就是在一个table里面的span标签，这个span所在的td的前一个td放的是节点的缩进，一个div标签，是第几层节点有几个这样的td。另外还有一个图片，就是控制节点展开和收缩的加减号，如果节点有子节点的话，就要有这个图片。详细看下面的代码。

        newNodeTemplete  =   ' <table cellpadding="0" cellspacing="0" style="border-width:0;"><tr><td><img src= ' + TreeView1_Data.images[ 3 ] + '  alt="" /></td><td style="white-space:nowrap;"><span οnclick=SelectNode(this) class="TreeView1_0" href="$nvalue$" id="$nid$">$ntext$</span></td></tr></table> '
    
        indent  =   ' <td><div style="width:20px;height:1px"></div></td> '
    
        toggle  =   ' <a id="$nid$" href="javascript:TreeView_ToggleNode(TreeView1_Data,$idnum$,document.getElementById('$nid$'),' ',document.getElementById('$ndivid$'))"><img src= ' + TreeView1_Data.images[ 5 ] + '  alt="折叠 $ntext$" style="border-width:0;" /></a> ' ;

     三个变量newNodeTemplete定义了一个节点的table，indent定义了一个缩进用的td，还有一个toggle就是控制展开和收缩用的图片。变量中$..$这个形式都是为了替换具体节点的内容。

     注意这里table中的这里“<td><img src='+TreeView1_Data.images[3]+' alt="" /></td>”这个是节点前的一个图片，TreeView1_Data.images[3]是TreeView控件自己定义的图片，其实就是一个空白图片，但是如果这个节点有子节点的时候，这个img就要用toggle定义的html代码来替换。

     另外还有这里“οnclick=SelectNode(this)”，这个是选择节点的方法，但是这个在treeview生成的html代码里是没有的，但是在这里必须要有，因为jQuery无法为用代码添加的html节点添加事件，这里就简单一点直接加上这个事件。用ajax方法添加上节点之后，刷新页面后就没有这个属性了。

下面看一下添加节点的代码

 

     function  AddNode(nodeText,nodeValue)
     ... { 
        var id = GetMaxID();//获取最大的节点id
        var num = parseInt(id.split('t')[1]);//获得节点的编号
        var newNode = newNodeTemplete.replace("$nid$",id.split('t')[0] + "t" + (++num));
        newNode = newNode.replace("$ntext$",nodeText);
        newNode = newNode.replace("$nvalue$",nodeValue);//定义一个新的节点，并替换上实际的节点id，节点文本和节点值
        var subdiv = selectedNode.attr("id").replace("t","n") + "Nodes";//包含所选节点的子节点用的div的id
        DoExpand();//展开正在操作的节点
        if($("#"+subdiv).text().length>0)//检查所要操作的节点是否有子节点
        ...{
            $("#"+subdiv).append(newNode);//有子节点，把上面定义好的新节点直接添加到div里面
        }
        else
        ...{
            //没有子节点，需要构造一个div来放置节点
            ndiv = divContainer.replace("$nid$",subdiv);//定义一个新的子节点div
            selectedNode.parents("table").after(ndiv);//把这个div插入到所选节点所在的table的后面
            $("#"+subdiv).html(newNode);//把定义的新节点放到div中
            //下面是将节点前的空白图片替换成控制展开和收缩用的图片
            ntogle = toggle;
            ntogle = ntogle.replace("$ndivid$",subdiv); 
            ntogle = ntogle.replace("$nid$",subdiv.substring(subdiv.length-5,0));
            ntogle = ntogle.replace("$nid$",subdiv.substring(subdiv.length-5,0));
            ntogle = ntogle.replace("$idnum$",++num);
            ntogle = ntogle.replace("$ntext$",selectedNode.text());                
            selectedNode.parents("table").find("td[img]").html(ntogle);
        }        
        SetIndent(subdiv);//设置节点的缩进
    }

     以上就是添加节点的代码，需要说明的是节点的id，它与节点的值没有关系，它的形式是“TreeView1t35”这个样子，t前面的TreeView1是TreeView控件的id，t后面的数字是节点的编号，每增加一个节点这个编号就加一。另外selectedNode是一个全局变量，记录这被选中的节点，还有包含子节点的div请看选择和删除节点的文章里面对TreeView生成的html的详细说明。

    还有就是GetMaxID()，DoExpand()，SetIndent(subdiv)这三个函数在实例中都有，代码都比较简单，就不做详细说明了。

    再来看具体的添加操作

         // 添加节点按钮的click事件
        $( " #add " ).click( function () ... {
            if($("#NewName").val().trim().length == 0)
            ...{
                alert("请输入节点名称");
                return;
            }
            if(selectedNode == null)
            ...{
                alert("请先选择节点");
                return;
            }
            $("#load").show();
            value=0;
            $.ajax(...{
                type: "Get",
                dataType: "text",
                url: "TreeView.ashx",            
                data: "action=add&name=" + $("#NewName").val() + "&parentid="+selectedNode.attr("href"),
                complete :function()...{$("#load").hide();},
                success: function(msg)...{
                    value = parseInt(msg);
                    if(value >0)
                        AddNode($("#NewName").val(),value);
                    else
                        alert("添加节点失败");
                }
            });
        } );

     简单说明一下，用jQuery的ajax方法把要添加的节点的文本和父节点的值传到后台，处理后返回的是新添加的节点的值，这个看实例中后台代码就可以明白。