Simple encapsulation of Bootstrap tree component jqTree _ javascript skills

This article mainly introduces the simple encapsulation of the Bootstrap tree component jqTree and encapsulates a slightly complete tree component. For more information, see I. Component effect Preview
In fact, the effect is similar to the previous one. The blogger only adds a selected background color based on the previous one.

Hide all

Expand

Expand All

Ii. Sample Code
In fact, the effect is very simple. Focus on how the code is encapsulated. Stick the implemented code to the old rules, and then explain it step by step.

(Function ($) {// use the strict js mode 'use strict '; $. fn. jqtree = function (options) {// merge the default parameters with the user-passed parameters options =$. extend ({}, $. fn. jqtree. defaults, options | {}); var that = $ (this); var strHtml = ""; // if the user has passed the data value, use data directly, otherwise, an ajax request is sent to retrieve data if (options. data) {strHtml = initTree (options. data); that.html (strHtml); initClickNode ();} else {// execute the event options before sending the request. onBeforeLoad. call (that, options. param); if (! Options. url) return; // send a remote request to obtain data $. getJSON (options. url, options. param, function (data) {strHtml = initTree (data); that.html (strHtml); initClickNode (); // execute the event options after the request is complete. onLoadSuccess. call (that, data) ;}) ;}// register the node Click Event function initClickNode () {$ ('. tree li '). addClass ('parent _ Lil '). find ('> span '). attr ('title', 'collapsed '); $ ('. tree li. parent_li> span '). on ('click', function (e) {var children = $ (this ). parent ('Li. parent_li '). find ('> ul> li'); if (children. is (": visible") {children. hide ('fast '); $ (this ). attr ('title', 'expand '). find ('> I '). addClass ('icon-plus-sign '). removeClass ('icon-minus-sign');} else {children. show ('fast '); $ (this ). attr ('title', 'collapsed '). find ('> I '). addClass ('icon-minus-sign '). removeClass ('icon-plus-sign');} $ ('. tree li [class = "parent_li"] '). find ("span" ).css ("background-color", "transparent"); outputs (this..css ("background-color", "# 428bca"); options. onClickNode. call ($ (this), $ (this) ;};// recursively concatenate html to construct a tree-like subnode function initTree (data) {var strHtml = ""; for (var I = 0; I <data. length; I ++) {var arrChild = data [I]. nodes; var strHtmlUL = ""; var strIconStyle = "icon-leaf"; if (arrChild & arrChild. length> 0) {strHtmlUL ="
 
 

  
  
"; StrHtmlUL + = initTree (arrChild) +"
 
 
"; StrIconStyle =" icon-minus-sign ";} strHtml + ="
"+ Data [I]. text +" "+ strHtmlUL +"
";}Return strHtml ;};}; // default parameter $. fn. jqtree. defaults = {url: null, param: null, data: null, onBeforeLoad: function (param) {}, onLoadSuccess: function (data) {}, onClickNode: function (selector) {}}}) (jQuery );

1. encapsulation instructions. Let's take a look at the above Code.
(1) using the anonymous function declaration ($) {}) (jQuery) and immediate execution is to add a custom method to the jquery object, if you are not familiar with this writing method, you can refer to the previous article about the JS component series-encapsulate your own JS components. You can also. After this encapsulation, We can initialize the tree component directly by using $ ("# id"). jqtree.

(2) After defining the default parameters, you can pass only the parameters you need to pass. You can directly use the default values for unnecessary parameters. This is why many bootstrap components have a default parameter list.

(3) The encapsulated component supports two data transmission methods at the same time. If you directly pass the data parameter, you can directly use the data parameter initialization. Otherwise, the same url sends an ajax request to fetch data from the background.

(4) If you use the url method to retrieve data, you can customize the event processing method before and after the component is loaded. Corresponding to the above onBeforeLoad and onLoadSuccess. The parameter of the onLoadSuccess event corresponds to the data of the ajax request. Sometimes some special processing needs to be done after the component is loaded. You can write it in this method.

(5) You can customize the node's click Event processing method, corresponding to the onClickNode above. The parameter is the jquery object of the current click node.

2. Component call
After talking about this, how should we use it?

First, we only need an empty ul tag for html.

As mentioned above, components support two call methods at the same time:

1) directly upload the Json array;

Var testdata = [{id: '1', text: 'System settings', nodes: [{id: '11', text: 'encoding management', nodes: [{id: '000000', text: 'automatic management', nodes: [{id: '000000', text: 'Manual management', nodes: [{id: '000000', text: 'underlying management',}]}, {id: '2', text: 'Basic data', nodes: [{id: '21', text: 'Basic feature'}, {id: '22', text: 'feature management'}]; $ (function () {$ ("# ul_tree "). jqtree ({data: testdata, param :{}, onBeforeLoad: function (param) {}, onLoadSuccess: function (data) {}, onClickNode: function (selector) {}});});

2) remotely retrieve data through URL:
The C # Request Method in the background to construct the data type in the above data format.

Public class Tree {public string id {get; set;} public string text {get; set;} public object nodes {get; set ;}} // return tree node data public JsonResult GetTreeData () {var lstRes = GetNode (1); return Json (lstRes, JsonRequestBehavior. allowGet);} public List
 
  
GetNode (int iNum) {var lstRes = new List
  
   
(); If (iNum> 5) {return lstRes;} for (var I = 1; I <3; I ++) {var oNode = new Tree {id = Guid. newGuid (). toString (), text = iNum + "level node" + I}; var lstRes2 = GetNode (iNum + 1); oNode. nodes = lstRes2; lstRes. add (oNode);} return lstRes ;}
  
 

Frontend call

$(function () {  $("#ul_tree").jqtree({    url: "/Home/GetTreeData",    param: { },    onBeforeLoad: function (param) {    },    onLoadSuccess: function (data) {    },    onClickNode: function (selector) {    }  });});

OnLoadSuccess event debuggingLook

OnClickNode event callingTryCheck that selector corresponds to the jquery object of the currently clicked node.

Iii. Summary
The above is a simple encapsulation of jquery tree. The first version just completed today may not work very well, but all the basic functions have been implemented.

I hope this article will help you learn about javascript programming.