Detailed description of how to use the JS tree menu component Bootstrap TreeView, bootstraptreeview

Detailed description of how to use the JS tree menu component Bootstrap TreeView, bootstraptreeview

Brief Introduction:　

A previous project requires a tree menu on the left, and an iframe on the right to form a whole website. At the beginning, we planned to use the tree-view plug-in of bootstrap to directly pass the menu data. As a result, the project changed its requirements, the menu content and charts are dynamically generated in the background. Therefore, you can only discard the bootstrap plug-in and hand-write a tree menu. This article mainly consists of two parts: one is the practice of bootstrap treeview, and the other is the introduction of Self-written tree menus.

Bootstrap-treeview:

Component Introduction: http://www.bkjia.com/article/96222.htm

I will not go into details about this component on other websites, but there are still some problems with online applications. Here I will mainly talk about the process of using this plug-in myself.

1. html reference and structure

Reference css: the css file named "、bootstrp.css"

Reference js: jquery, bootstrap-treeview.js, reference this component's treeview. js File

The overall HTML structure consists of three parts: the header, the tree column, and the iframe. The component is used as the tree column: # tree

2. Reference component js settings:

The specific setting code is as follows: The main idea is to use data to pass in the menu data and dependency, and some variables can be set to control the style and basic functions of the tree bar, such as lines 40-43 of the Code, for the meanings of the values corresponding to a specific variable, 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').treeview({  　data: data,  backColor: '#293541',  color: 'white',  onhoverColor:'#202a33;',  showBorder: false  });  }  var init = function() { tree(); }  init();})(window)

After the settings are complete, the style of the tree bar is shown in. In addition, you can read the relevant parameters to set the details. It is worth mentioning that the icon of the tree bar is set through the glyphicon of bootstrap, if you are interested, you can take a look at this item to set different icons for the menu, but the actual effect is not particularly good. This is why I decided to create a tree bar myself.

　　

Custom tree menu:

The treeview plug-in can only click the plus icon in front of the menu to expand and close, style changes are limited, and we need to dynamically set the menu structure and content according to the data input in the background, therefore, a new tree is written to meet these requirements. js

Js is mainly divided into three parts. The first part is to register click events for each menu and sub-menu, and bind jump links to them through data sent from the background; the second part is to obtain 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 template function of underscore, achieve the function of dynamically implementing the tree bar. ,

Related js Code:

Var tree = function () {// 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') ;};}); // Click Event $ ('. nodechild_ B Ox '). 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') ;};}); // third-level 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 ('opene D ', 'opened') ;};}); // hover display arrow and background change $ ('. 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 '). mouseou T (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 '); $ (this ). find ('. arrow '). hide () ;}); $ ('. ggchild_box '). mouseover (function (event) {$ (this ). addClass ('box _ hover '); $ (this ). fi Nd ('. 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 () ;}}) ;}; // obtain the user data var getData = function () {var cond = sessionStorage. cond; $. post ("XXXX", {}, function (json) {console. log (json) if (json. code == 200) {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 ()} for each menu, function (xhr) {console. log (xhr)});} 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 = "tree_box"> <div class = "nodeBox index" menurl = "notice.html"> <span class = "m_l_10">  </span> <span class = "m_l_10"> homepage </span> <span class = "arrow fr m_r_10">  </span> </div> <% var menus = data. menus; %> <% for (var I = 0; I <menus. len Dimensions; I ++) {%> <div class = "tree_box"> <div class = "nodeBox" menurl = <% = menus [I]. url %> <span class = "m_l_10">  </span> <span class = "m_l_10"> <% = menus [i]. name %> </span> </div> <% var childmenus = menus [I]. childs; %> <% for (var j = 0; j <childmenus. length; j ++) {%> <div class = "childnode"> <div class = "nodechild_box" menurl = <% = childmenus [j]. url %> <% 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">  </span> <%} %> </div> <% var cchildmenus = childmenus [j]. childs; %> <% for (var k = 0; k <cchildmenus. length; k ++) {%> <div class = "gchil Dnode "> <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> <% 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">  </span> </div> <% }%> </div ><%}%> </script> </div>

The format of the data imported in the background is

Menu Effect

Problems:

To keep up with the project progress, tree. js is not componentized. If you have time to encapsulate this component as a js component, you can set parameters to complete the tree column setting.

P.S. Due to limited individual technical skills, errors are inevitable. please correct me more :)

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.