Bootstrap樹形組件jqTree的簡單封裝

更新時間：2016年01月25日 17:27:38 作者：懶得安分

這篇文章主要介紹了Bootstrap樹形組件jqTree的簡單封裝，封裝一個稍微完整點(diǎn)的樹形組件，感興趣的小伙伴們可以參考一下

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

全部收起

展開

全部展開

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

(function ($) {
 //使用js的嚴(yán)格模式
 'use strict';

 $.fn.jqtree = function (options) {
  //合并默認(rèn)參數(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ā)送遠(yuǎn)程請求獲得data
   $.getJSON(options.url, options.param, function (data) {
    strHtml = initTree(data);
    that.html(strHtml);
    initClickNode();

    //請求完成之后執(zhí)行事件
    options.onLoadSuccess.call(that, data);
   });
  }

  //注冊節(jié)點(diǎn)的點(diǎn)擊事件
  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構(gòu)造樹形子節(jié)點(diǎn)
  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;
  };
 };

 //默認(rèn)參數(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）定義默認(rèn)參數(shù)后，用戶可以只傳自己需要傳遞的參數(shù)，對于不需要的參數(shù)，直接使用默認(rèn)值就好。這也就是為什么很多bootstrap組件都有一個默認(rèn)參數(shù)列表這么一個東東的原因。

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

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

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

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

首先我們html只需要一個空的ul標(biāo)簽

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

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

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

var testdata = [{
 id: '1',
 text: '系統(tǒng)設(shè)置',
 nodes: [{
  id: '11',
  text: '編碼管理',
  nodes: [{
   id: '111',
   text: '自動管理',
   nodes: [{
    id: '1111',
    text: '手動管理',
    nodes: [{
     id: '11111',
     text: '底層管理',
    }]
   }]
  }]
 }]
}, {
 id: '2',
 text: '基礎(chǔ)數(shù)據(jù)',
 nodes: [{
  id: '21',
  text: '基礎(chǔ)特征'
 }, {
  id: '22',
  text: '特征管理'
 }]
}];

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

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

 public class Tree
 {
  public string id { get; set; }
  public string text { get; set; }
  public object nodes { get; set; }
 }



　　　　 //返回tree的節(jié)點(diǎn)數(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é)點(diǎn)" + 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)試看看