jquery.treeview的结点编辑方法

< html >

< head >

     < title > jQuery treeView</ title >

     < link rel ="stylesheet" href ="../jquery.treeview.css" />

     < script src ="../lib/jquery.js" type ="text/javascript"></ script >

     < script src ="../jquery.treeview.js" type ="text/javascript"></ script >

     < script type ="text/javascript">

     // 必须添加在UL 结点上

     // 添加母结点（树控件ID ，父结点( 可是ID 或Jquery 对象) ，标题，文件夹ID ）

     function addFolder(treeId , toNode , title , id)

     {

        var fn;

        if (typeof (toNode) == "string" )

          fn = $("#" + toNode);

          else

          fn = toNode;

       

        var folder = $("<li><span class='folder'>" + title + "</span><ul></ul></li>" ).appendTo(fn);

       

        if (id != "" )

            folder.attr("id" ,id);

           

          $("#" + treeId).treeview({

                   add: folder

         });

        

         return folder;

     }

    

    

    // 必须添加在UL 结点上

     // 添加子结点（树控件ID ，父结点( 可是ID 或Jquery 对象) ，标题，文件夹ID ）

     function addFile(treeId , toNode , title , id)

     {

        var fn;

        if (typeof (toNode) == "string" )

          fn = $("#" + toNode);

          else

          fn = toNode;

       

        var file = $("<li><span class='file'>" + title + "</span></li>" ).appendTo(fn);

       

        if (id != "" )

            file.attr("id" ,id);

           

          $("#" + treeId).treeview({

                   add: file

         });

        

         return file;

     }

    

    

     // 删除的必须是li 结点

     // 删除母结点或子结点（树控件ID ，删除的结点( 可是ID 或Jquery 对象) ）

     function removeFile(treeId ,Node)

     {

        var fn;

        if (typeof (Node) == "string" )

          fn = $("#" + Node);

          else

          fn = Node;

         

        fn.remove();

     }

    

    

     </ script >

     < script type ="text/javascript">

     $(document).ready(function (){

         $("#browser" ).treeview();

         $("#add" ).click(function () {

           addFile("browser" , "leo43" , " 我是新加的子结点" , "id1" );

           addFolder("browser" , "leo43" , " 我是新加的母结点" , "id2" );

         });

        

         $("#remove" ).click(function () {

           removeFile("browser" ,"chen346" )

         });

     });

    

     </ script >

     </ head >

     < body >

 

        

     < ul id ="browser" class ="filetree" style =" width :400px ;">

         < li >< span class ="folder"> Folder 1</ span >

              < ul >

                   < li >< span class ="folder"> Item 1.1</ span >

                       < ul id ="leo43">

                            < li id ="chen346">< span class ="file"> 待删除结点</ span ></ li >

                       </ ul >

                   </ li >

                   < li >< span class ="folder"> Folder 2</ span >

                       < ul >

                            < li >< span class ="folder"> Subfolder 2.1</ span >

                                 < ul id ="folder21">

                                     < li >< span class ="file"> File 2.1.1</ span ></ li >

                                     < li >< span class ="file"> File 2.1.2</ span ></ li >

                                 </ ul >

                            </ li >

                            < li >< span class ="folder"> Subfolder 2.2</ span >

                                 < ul >

                                     < li >< span class ="file"> File 2.2.1</ span ></ li >

                                     < li >< img src ="../images/file.gif" /> < a href ="#"> 我是一个节点！</ a ></ li >

                                 </ ul >

                            </ li >

                       </ ul >

                   </ li >

                   < li class ="folder">< span class ="folder"> Folder 3 (closed at start)</ span >

                       < ul >

                            < li >< span class ="file"> File 3.1</ span ></ li >

                       </ ul >

                   </ li >

                   < li >< span class ="file"> File 4</ span ></ li >

              </ ul >

         </ li >

     </ ul >

    

     < button id ="add"> Add!</ button >

     < button id ="remove"> Remove!</ button >

      

</ body ></ html >