JS Tree Menu Component Bootstrap TreeView usage method _javascript Tips

Brief introduction:　

A previous project at hand needs to do a tree-shaped menu on the left, and the right side is a whole iframe, thus constituting a whole web site. The beginning is intended to use the bootstrap Tree-view Plug-ins, directly to the menu data passed on the good, the result of the project then changed the demand, menu content and charts are dynamically generated in the background, so can only give up using the bootstrap plug-ins, they started to write a tree-shaped menu. This article is mainly divided into two parts, one is for the bootstrap of the TreeView practice, the other part is to introduce their own written tree-shaped menu.

Bootstrap-treeview:

Component Description: http://www.jb51.net/article/96222.htm

In fact, about this component on other sites have been very detailed, I will not repeat, but the application of the Internet is still a bit of a problem, here mainly to talk about their own use of this plug-in process.

1. HTML references and structure

Referencing CSS: CSS files for the file itself, bootstrp.css files

Reference Js:jquery, Bootstrap-treeview.js, treeview.js file referencing this component

The whole HTML structure is divided into three parts: the head, the Tree column section, the IFRAME part, uses the component as the Tree column section: #tree

2. Reference Component JS settings:

The specific setup code is as follows: The main idea is to use the data into the menu and rely on the relationship between the information, while you can set some variables to control the tree column style and basic functions, such as code 40-43 lines, specific variables corresponding to the value of the values can see the table in the previous link

(function (Win) { 
 var data = [
  {
  text: Parent 1],
  nodes: [
  {
  text: Child 1],
  nodes: [
   {
   text: "Grandchild 1"
   },
   {
   text: ' Grandchild 2 '
   }
  ]
  },
  {
  text: ' Child 2 '
  }
  ]
  },
  {
  Text: "Parent 2"
  },
  {
  text: "Parent 3"
  },
  {
  text: "Parent 4"
  },
  {
  text: "Parent 5"
  }
 ];  
 
 var tree = function () {
 $ (' #tree '). The TreeView ({
  data:data,
  BackColor: ' #293541 ',
  color: ' White ', C39/>onhovercolor: ' #202a33; ',
  showborder:false
  });
 
 var init = function () {tree
 ();
 }
 
 Init ();
}) (window)

After you finish setting the tree bar style as shown in the following figure, in addition, the details can be set by reading the corresponding parameters, it is worth mentioning that the icon of the tree bar is set through the bootstrap Glyphicon, interested children can go to see this thing, to set a different icon for the menu , but the actual effect does not feel particularly good. That's why I decided to get myself into a tree column.

　　

Custom Tree Menu:

TreeView plugin can only click on the menu front of the plus icon to start off, the style changes are limited, and we need to be based on the data in the background to dynamically set the structure and content of the menu, so in order to meet these needs, to write a tree.js

JS is mainly divided into three parts, the first part is for each menu and submenu registration click events and through the background data for its bound jump link; the second part is to get the menu data from the background through Ajax and pass the data to the foreground The third part is to render the foreground page through the underscore template function to achieve the function of dynamic implementation of the tree bar. 、

Related JS code:

 var tree = function () {//First level navigation Click event $ ('. Nodebox '). On (' click ', Function (event) {var _this = $ (this);
  var child = _this.parent (). Find ('. Nodechild_box ');
  if (_this.attr (' opened ') = = ' opened ') {_this.parent (). Find ('. Childnode '). Hide ();
  Child.hide ();
  _this.attr (' opened ', ');
  }else{_this.parent (). Find ('. Childnode '). Show ();
  Child.show ();
  _this.attr (' opened ', ' opened ');
 };
 });
  Second-level navigation click event $ ('. Nodechild_box '). On (' click ', Function (event) {var _this = $ (this);
  var child = _this.parent (). Find ('. Gchild_box ');
  if (_this.attr (' opened ') = = ' opened ') {child.hide ();
  _this.parent (). Find ('. Gchildnode '). Hide ();
  _this.find ('. Add '). attr (' src ', ' images/icon_add.png ');
  _this.attr (' opened ', ');
  }else{child.show ();
  _this.parent (). Find ('. Gchildnode '). Show ();
  _this.find ('. Add '). attr (' src ', ' images/icon_minus.png ');
  _this.attr (' opened ', ' opened ');
 };
 });
  Level Three navigation click event $ ('. Gchild_box '). On (' click ', Function (event) {var _this = $ (this); var child = _thiS.parent (). Find ('. Ggchild_box ');
  if (_this.attr (' opened ') = = ' opened ') {child.hide ();
  _this.find ('. Add '). attr (' src ', ' images/icon_add.png ');
  _this.attr (' opened ', ');
  }else{child.show ();
  _this.find ('. Add '). attr (' src ', ' images/icon_minus.png ');
  _this.attr (' opened ', ' opened ');
 };

 });
  Hover display arrows and background changes $ ('. Nodebox '). MouseOver (function (event) {$ (this). addclass (' Tree_hover ');
 $ (this). Find ('. Arrow '). Show ();
 });
  $ ('. Nodebox '). Mouseout (function (event) {$ (this). Removeclass (' Tree_hover ');
 $ (this). Find ('. Arrow '). Hide ();
 });
  $ ('. Nodechild_box '). MouseOver (function (event) {$ (this). addclass (' Box_hover ');
 $ (this). Find ('. Arrow '). Show ();
 });
  $ ('. Nodechild_box '). Mouseout (function (event) {$ (this). Removeclass (' Box_hover ');
 $ (this). Find ('. Arrow '). Hide ();
 });
  $ ('. Gchild_box '). MouseOver (function (event) {$ (this). addclass (' Box_hover ');
 $ (this). Find ('. Arrow '). Show ();
 });
  $ ('. Gchild_box '). Mouseout (function (event) {$ (this). Removeclass (' Box_hover '); $ (tHe). Find ('. Arrow '). Hide ();
 });
  $ ('. Ggchild_box '). MouseOver (function (event) {$ (this). addclass (' Box_hover ');
 $ (this). Find ('. Arrow '). Show ();
 });
  $ ('. Ggchild_box '). Mouseout (function (event) {$ (this). Removeclass (' Box_hover ');
 $ (this). Find ('. Arrow '). Hide ();
 });
 
 };
 link function var tree_link = function () {var Linkbox = $ (' [Menurl] ');
  Linkbox.each (function (i, ele) {var _ele = $ (ele);
  var key = _ele.attr (' Menurl ');
   if (key!= '/') {$ (this). On (' click ', Function () {$ (' #mainweb '). attr (' src ', key);
  Auto ();
 }) 
  }
  
 });
 
 }; 
 
 Get login user Data var getData = function () {var cond = Sessionstorage.cond;
  $.post ("XXXX", {}, Function (JSON) {Console.log (JSON) if (Json.code =) {data = Json.data;
  Fillusername (data);
  Filltree (data);
  var length = $ ('. Nodebox '). length;
   for (var i = 0;i < length;i++) {var iconid = Data.icons[i].iconid;
   $ ('. Nodebox '). EQ (i+1). attr (' MenuID ', i); $ ('. Nodebox '). EQ (i+1). FIND (' img '). attr (' src ', ' images/' + data.icons[Iconid-1].name + '];

 //Add link Tree_link ()}}, function (XHR) {Console.log (XHR)}) to each menu;
 var filltree = function (data) {var tmpldom = $ (' #tree ');
 Tmpldom.parent (). HTML (eking.template.getHtml (tmpldom.html (), data);
 Tree ();
 }

HTML rendering:   

<div class= "main w_1200" > <div class= "tree" > <script type= "text/html" id= "tree" > <div class= "tre E_box "> <div class=" nodebox index "menurl=" notice.html "> <span class=" m_l_10 "></span> <span class=" m_l_10 "> Home </span> <span class=" Arrow fr m_r_10 "&GT;&L T;img src= "images/icon_arrow.png" alt= "" ></span> </div> </div> <%var menus = Data.menus;%&gt
  ; <%for (var i = 0;i < menus.length;i++) {%> <div class= "Tree_box" > <div class= "Nodebox" Menurl=<%=me nus[i].url%> > <span class= "m_l_10" ></span> <span class= "M_l_10" &GT;&L t;%=menus[i].name%></span> </div> <%var childmenus = menus[i].childs;%> <%for (var j = 0;j &l T childmenus.length;j++) {%> <div class= "Childnode" > <div class= "Nodechild_box" menurl=<%=childmenus[j] .url%> > &Lt;%if (childmenus[j].childs.length!= 0) {%> <span class= "m_l_20" ></span> <span class=" m_l_10 "><%=childmenus[j].name%></span> <%}else{ %> <span class= "m_l_55" ><%=childmenus[j].name%></span> <span class= "Arrow fr m_r_10" >< IMG src= "images/icon_arrow.png" alt= "" ></span> <%}%> </div> <%var cchildmenus = Childmenu S[j].childs;%> <%for (var k = 0;k < cchildmenus.length;k++) {%> <div class= "Gchildnode" > <div class= "Gchild_box" menurl=<%=cchildmenus[k].url%> > <%if (cchildmenus[k].childs.length!= 0) {%> < Span class= "m_l_30" ></span> <span class= "M_l_10" ><%=cchildmenus[k].name%></span> <%}else{%> <span class= "m_l_65" ><%=cchildmenus[k]. Name%></span> <span Class= "Arrow fr m_r_10" ></span> <%}%> </div> & Lt;%var Ccchildmenus = cchildmenus[k].childs;%> <%for (var l = 0;l < ccchildmenus.length;l++) {%> <div class= "Ggchild_box" menurl=<%=ccchildmenus[l].url%> > <span class= "m_l_70" ><%=ccchildmenus[l]. name%></span> <span class= "Arrow fr m_r_10" > <%}%> </div> <%}%> </div> <%}%> </div> <%}%> </ Script> </div>

The data format passed in the background is

Menu effect as shown:

Deficiencies and problems:

In order to keep up with the project progress, Tree.js has not yet been modular, and so there is time to wrap this piece into a JS component, by setting parameters to complete the tree bar settings.

P.S. Due to the limited level of personal skills, it is inevitable that mistakes, please correct:)

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.