Bootstrap樹形組件jqTree的簡單封裝

2019-11-20 10:42:01

字體：大中小

來源：轉載

供稿：網(wǎng)友

一、組件效果預覽
其實效果和之前的那個差不多，博主只是在之前的基礎上加了一個選中的背景色。

全部收起

展開

全部展開

二、代碼示例
其實效果很簡單，重點來看看代碼是如何實現(xiàn)封裝的。還是老規(guī)矩，將已經(jīng)實現(xiàn)的代碼貼出來，然后再來一步一步講解。

(function ($) { //使用js的嚴格模式 'use strict'; $.fn.jqtree = function (options) {  //合并默認參數(shù)和用戶傳過來的參數(shù)  options = $.extend({}, $.fn.jqtree.defaults, options || {});  var that = $(this);  var strHtml = "";  //如果用戶傳了data的值，則直接使用data，否則發(fā)送ajax請求去取data  if (options.data) {   strHtml = initTree(options.data);   that.html(strHtml);   initClickNode();  }  else {   //在發(fā)送請求之前執(zhí)行事件   options.onBeforeLoad.call(that, options.param);   if (!options.url)    return;   //發(fā)送遠程請求獲得data   $.getJSON(options.url, options.param, function (data) {    strHtml = initTree(data);    that.html(strHtml);    initClickNode();    //請求完成之后執(zhí)行事件    options.onLoadSuccess.call(that, data);   });  }  //注冊節(jié)點的點擊事件  function initClickNode() {   $('.tree li').addClass('parent_li').find(' > span').attr('title', '收起');   $('.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', '展開').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');    } else {     children.show('fast');     $(this).attr('title', '收起').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');    }    $('.tree li[class="parent_li"]').find("span").css("background-color", "transparent");    $(this).css("background-color", "#428bca");    options.onClickNode.call($(this), $(this));   });  };  //遞歸拼接html構造樹形子節(jié)點  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 = "<ul>";     strHtmlUL += initTree(arrChild) + "</ul>";     strIconStyle = "icon-minus-sign";    }        strHtml += "<li id=/"li_" + data[i].id + "/"><span id=/"span_" + data[i].id + "/"><i class=/"" + strIconStyle + "/"></i>" + data[i].text + "</span>" + strHtmlUL + "</li>";   }   return strHtml;  }; }; //默認參數(shù) $.fn.jqtree.defaults = {  url: null,  param: null,  data: null,  onBeforeLoad: function (param) { },  onLoadSuccess: function (data) { },  onClickNode: function (selector) { } };})(jQuery);

1、封裝說明，來簡單看看以上代碼
（1）使用 (function ($) {})(jQuery) 這種匿名函數(shù)聲明并立刻執(zhí)行的方式的作用是向jquery對象里面增加一個自定義的方法，如果對這種寫法不懂的可以看看上篇說明JS組件系列――封裝自己的JS組件，你也可以。這樣封裝以后，我們可以直接通過 $("#id").jqtree({}); 這種寫法來初始化該樹形組件。

（2）定義默認參數(shù)后，用戶可以只傳自己需要傳遞的參數(shù)，對于不需要的參數(shù)，直接使用默認值就好。這也就是為什么很多bootstrap組件都有一個默認參數(shù)列表這么一個東東的原因。

（3）封裝后的組件同時支持兩種傳遞數(shù)據(jù)的方式，如果用戶直接傳遞了data參數(shù)，就直接使用data參數(shù)初始化，否則，就同url發(fā)送ajax請求去后臺取數(shù)據(jù)。

（4）如果是url方式取數(shù)據(jù)，用戶可以在組件加載前和加載完成后自定義事件處理方法。對應的是上面的onBeforeLoad和onLoadSuccess。onLoadSuccess事件的參數(shù)對應著ajax請求的data數(shù)據(jù)。有時需要在組件加載完成之后做一些特殊處理，可以在這個方法里面寫。

（5）可以自定義節(jié)點的click事件處理方法，對應的是上面的onClickNode。參數(shù)傳遞的是當前點擊節(jié)點的jquery對象。

2、組件調(diào)用
說了這么多，那么該如何使用呢？

首先我們html只需要一個空的ul標簽

<div class="tree well"> <ul id="ul_tree"> </ul></div>

上面說了，組件可以同時支持兩種調(diào)用方式：

1）直接傳Json數(shù)組；

var testdata = [{ id: '1', text: '系統(tǒng)設置', nodes: [{  id: '11',  text: '編碼管理',  nodes: [{   id: '111',   text: '自動管理',   nodes: [{    id: '1111',    text: '手動管理',    nodes: [{     id: '11111',     text: '底層管理',    }]   }]  }] }]}, { id: '2', text: '基礎數(shù)據(jù)', nodes: [{  id: '21',  text: '基礎特征' }, {  id: '22',  text: '特征管理' }]}];$(function () { $("#ul_tree").jqtree({  data: testdata,  param: { },  onBeforeLoad: function (param) {  },  onLoadSuccess: function (data) {   },  onClickNode: function (selector) {  } });});

2）通過URL遠程獲取數(shù)據(jù)：
后臺C#請求方法，構造上面data格式的數(shù)據(jù)類型。

 public class Tree {  public string id { get; set; }  public string text { get; set; }  public object nodes { get; set; } }　　　　 //返回tree的節(jié)點數(shù)據(jù)  public JsonResult GetTreeData()  {   var lstRes = GetNode(1);   return Json(lstRes, JsonRequestBehavior.AllowGet);  }  public List<Tree> GetNode(int iNum)  {   var lstRes = new List<Tree>();   if (iNum > 5)   {    return lstRes;   }   for (var i = 1; i < 3; i++)   {    var oNode = new Tree { id = Guid.NewGuid().ToString(), text = iNum + "級節(jié)點" + i };    var lstRes2 = GetNode(iNum + 1);    oNode.nodes = lstRes2;    lstRes.Add(oNode);   }   return lstRes;  }

前端調(diào)用

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

onLoadSuccess事件調(diào)試看看