JS Implementation directory tree

First step: HTML structure

1 <div class= "Folderdiv" >2    <p> catalogue </p>3 <ul    class= "folder" ></ul>4 </div>

Step Two: CSS styles

1/* directory tree */2. folderdiv {width:14%;float:left;height:auto;overflow:auto;border:1px solid #ccc; border-top:2px Solid #15a 4FA;} 3. Folderdiv p{height:25px;padding-left:6px;line-height:25px;} 4. Folderdiv. folder{width:100%;height:396px;} 5. folder Li {list-style:none;} 6. Folder Li Span{display:inline-block;height:25px;line-height:25px;padding-left:14px;font-size:12px;white-space: nowrap;} 7. Folder Li Span:hover{cursor:pointer;}

Step Three: JS function

  1//Create directory tree 2 Folderajax (); 3//ajax Request 4 function Folderajax () {5 var folder;//used to receive a background fetch of the directory tree object 6 var Folder_span;//ajax Gets the number of spans in the directory tree, and finally Assign value to Folder_span_click 7 var Folder_span_click;         Catalog Tree Click 8 $.ajax ({9 type: "Post", url: "/datawarning/warningcreate/getfolderinfolist", 11 Async:true, Success:function (res) {14 folder = Res.beans;//objects present in the directory tree: 15///weight (in) Directory tree Contents $ ('. Folder '). html ('); The var span = $ (' <span></span> ') at var li = $ (' <li></li> '); Li.append (span); $ ('. Folder '). Append (LI); 21 22//Get directory tree series at var folderlevelcode_array = []; (var i = 0; i < folder.length; i++) {if (Folderlevelcode_array.indexof (folder[i].f                 Olderlevelcode) = =-1) {Folderlevelcode_array.push (folder[i].folderlevelcode); 27   } 28          } 29 30/* Array sorted by directory level */-function Compare (property) {return func                     tion (A, b) {var value1 = A[property]; var value2 = B[property]; 35 return value1-value2; 36} 37} 38/* Directory-level sort sort * * folderlevelcode_array.sort (); 40//sorted by directory Level tree Folder.sort (compare (' Folderlevelcode ')); 42//Sort directory tree by directory ID folder.sort (compare (' FolderID ')); 44 45//Set parent element custom attribute as Upperfolderid $ ('. Folder '). Children (' Li '). Children (' span '). attr (' Data-folde RId ', Folder[0].upperfolderid);                  47 48/* subdirectory Level calculation */* for (var m = 0; m < folder.length; m++) {50//Find parent Directory Element 51 var parent = $ ("[data-folderid=" + Folder[m].upperfolderid + "]"); A var span = $ (' <span></span> '); The Var ul= $ (' <ul></ul> '); Ul.css (' margin-left ', + ' px '). CSS (' Display ', ' none '); The var li = $ (' <li></li> '); 56/* Add directory tree Information */span.html (folder[m].foldername); Span.attr (' Data-folderid ', Folder[m].folderid); Span.attr (' Data-folderlevelcode ', folder[m].folderlevelcode); Span.attr (' Data-upperfolderid ', Folder[m].upperfolderid); Li.append (span); Ul.append (LI); Parent.parent (). append (UL); 64} 65 66//Display a first-level directory of $ ('. Folder '). Children (' Li '). Children (' ul '). CSS (' Display ', ' Blo CK '); 68//Get all span tags Folder_span = $ ('. Folder '). Find (' span ');                 70 71//Remove the first LABEL element, starting from subscript 1 to cycle for (var z = 1; z < folder_span.length; z++) {73                 if (Folder_span.eq (z). Parent (). Children (). Length >= 2) {74    Folder_span.eq (z). CSS (' background ', ' url (src/assets/img/right_15a4fa_12px.png) no-repeat left center '); Folder_span.eq (z). Parent (). Parent (). InsertAfter (Folder_span.eq (z). Parent (). Parent (). Parent (). (). Children (' Li '). Children (' span ')); Sort directory tree 76} 77} 78 79//directory tree style set to $ ('. Folder '). Children (' Li '). Chil              dren (' span '). CSS (' Display ', ' none ') of the Bayi $ ('. Folder '). Children (' Li '). Children (' ul '). CSS (' margin-left ', ' 5px ') 82 Folder_span_click = Folder_span; 83 84//directory tree click Folder_span_click.each (function (index, value) {_this = $ (thi s); _this.click (function () {_this.siblings (' ul '). Children (). Length = = 0) {//Current point The span of the hit does not have a child element, var treeparam = {}; Directory tree Request Object---This is the core of the build directory tree Treeparam.folderid = _this.attr (' Data-folderid '); 91//Execution Request 92                         $.ajax ({type: "Get",//post,get 94 ur L: "",//Request address: ' Treeparam ',//Request data async:true,//true                             Step, False asynchronous Success:function (RES) {98//Request successfully executed function 99 }100}); 101//other span changes 102 $ (                         '. Folder span '). CSS (' color ', ' #000 '); 103 _this.css (' Color ', ' #15a4fa '); 104                         _this.parent (). Parent (). Siblings (' ul '). ' Find (' ul '). Hide (); if (_this.siblings (' ul '). Is (': Hidden ')) {107 _this.parent (). Parent (). Siblings (' UL ' ). Find (' ul '). Hide ();                      Hide other Directories 108 var ned = _this.parent (). Parent (). siblings (). Children (' Li '); 109       _this.parent (). Parent (). Siblings (' ul '). Find (' span '). Siblings (' ul '). Siblings (' span '). CSS (' background ', ' url (src/ Assets/img/right_15a4fa_12px.png) No-repeat left center '), $.each (NED, function (value, Inde X) {111 if (_this.children (). length > 1) {_this.                                 Children (' span '). CSS (' background ', ' url (src/assets/img/right_15a4fa_12px.png) no-repeat left center '); 113 }114}); _this.siblings (' ul '). CSS (' Display ', ' B Lock '); _this.css (' Background ', ' url (src/assets/img/down_15a4fa_12px.png) no-repeat left CE                              Nter '); 117} else {118 _this.siblings (' ul '). CSS (' Display ', ' none '); 119 $ (this). CSS (' background ', ' URLs (src/assets/img/right_15a4fa_12px.png) no-repeat left center ');                         120}121}122}) 123}) 124}125}) 126} 

Fourth step: Effect

JS Implementation directory tree