Tree diagram in Boostrap--treeview

The following is going to introduce the core code of the TreeView tree in Bootstrap!!

Look at it first:

As you can see, if you use the bootstrap in the front end, the style is more uniform with the TreeView.

Because the personal office of the TreeView is actually not very good. But the style is good unity, or I will not choose him, this thing less methods, such as you to an asynchronous loading and other operations, more trouble.

Therefore, using it, I think the most convenient is to get his node data one-time, this either the front-end JS use recursion, or back-end use recursion, for code reuse. I chose the background recursion, after retrieving the data from the database, by recursively spell out the tree's each node required properties, that is, the construction node. The following is a recursive code, for those who need reference:

 PublicList<map<string, object>>Querydirtree (httpservletrequest request, httpservletresponse response, Cpcproductfundir CDT, String orders) {//finding data from the database returns a collectionlist<pcproductfundir> ls =productfunpeer.querydirlist (CDT, orders); //iterating through the collection      for(inti=0; I<ls.size (); i++) {         //get each Node objectPcproductfundir dir =Ls.get (i); Long ParentID=Dir.getparentid (); //determines whether their parent node ID is empty or null to assign a value of 0         if(ParentID = =NULL) {Dir.setparentid (0l); }     }          //define a group map to group ParentIDMap<long, list<pcproductfundir>> groupmap = Binaryutils.toobjectgroupmap (ls, "parentId"); //defining a collection for saving nodeslist<map<string, object>> data =NewArraylist<map<string, object>>(); //Calling Recursive methodsTotreeviewdata (GroupMap, data, 0l); returnData//return Results }   /*** Recursive processing of treeview data *@paramgroupmap Group Map (grouped by ParentID) *@paramchildsdata child node *@paramparentid Parent ID*/ Private voidTotreeviewdata (Map<long, list<pcproductfundir>> groupmap, list<map<string, Object>>Childsdata, Long parentid) {     //remove the corresponding collection from the GroupMap based on the parent IDList<pcproductfundir> Dirchilds =Groupmap.get (ParentID); //NULL when determining the child node collection     if(dirchilds==NULL|| Dirchilds.size () ==0)return ; //traversing a child node collection      for(inti=0; I<dirchilds.size (); i++) {         //Get ObjectPcproductfundir dir =Dirchilds.get (i); //Define Mapmap<string, object> map =NewHashmap<string, object>(); //Save the TreeView required attribute as key, and the existing corresponding data as value into the mapMap.put ("id", Dir.getid ()); Map.put ("Text", "[" +dir.getdircode () + "]" +dir.getdirname ()); Map.put ("Icon", Dir.geticon ()); Map.put ("Tags",Newstring[]{string.valueof (Dir.getparentid ())}); //a node is completed and stored in the node mapchildsdata.add (map); //remove the corresponding collection from GROUPMAP with the ID of the currently fetched object (child node) as the parent IDlist<pcproductfundir> ls =Groupmap.get (Dir.getid ()); //determines whether the fetched collection is empty, is not empty, and has child nodes under the current child node         if(ls!=NULL&& ls.size () >0) {             //Create collection Save child nodeslist<map<string, object>> subdata =NewArraylist<map<string, object>>(); //Recursive invocationTotreeviewdata (GroupMap, Subdata, Dir.getid ()); //sets the collection of leaf nodes that are fetched into the nodes (child node property) of the current nodeMap.put ("Nodes", Subdata); }     } }

Ok!! Of course, I gave only the method, each company with a different framework, this method of processing data is common.

This background to get the data and then recursively spell the TreeView node, with the front desk that is a lot of savings! I think, well, backstage, to the front desk, a lot simpler:

 function Refreshtreeview () { /span>//  can request data with Ajax  $.ajax ({url: " Can obtain the request path to the background data ",data:{....},success:function (RS) {$ ( #treeview"  Data:rs , Levels:  1 true  , Showborder:  false  " #d0f0f0 " "#428bca" " fa fa-stop ", onnodeselected:ontreeclick}); }});}

Oh, yes! Just use Ajax to get the data, call the background of the method is good, as for the page corresponding ID for the TreeView tag, a div is good, there are forgotten pages to introduce the corresponding CSS and JS yo

... <!--introduction of related Css--><link href= "/js/bootstrap/3.2.0/css/bootstrap.min.css" rel= "stylesheet" ><link href= " /css/bootstrap-treeview.css "rel=" stylesheet "><!--introduction of related JS--><script src="/JS/JQUERY/2.1.1/ Jquery.min.js "></script><script src="/js/bootstrap-treeview.js "></script> ... <div id= "TreeView" ></div> ...

So next, this div want how to put, love how to put it, hey ^_^ ....

There is JS in the structure of the TreeView part, I give the style is relatively simple, there are those attributes are not introduced, go to the home of jquery to know, want to more dazzling effect, plus on the good.

After writing the discovery, I do not follow the common sense, people are from the past, I am from the back forward ^o^ .... Look at the kids ' shoes.

Tree diagram in Boostrap--treeview