小編給大家分享一下JS組件之bootstrap treegrid組件封裝的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、開源的treegrid

1、組件效果預(yù)覽

最原始的效果

bootstrap樣式的效果

這個(gè)是組件最原始的效果，后面會告訴大家博主做了哪些封裝以及加了哪些功能。

在此還是給出一個(gè)封裝過的效果吧！

2、組件開源地址

最后還是給出github上面一個(gè)開源的treegrid組件。

github開源地址：https://github.com/maxazan/jquery-treegrid

文檔示例地址：http://maxazan.github.io/jquery-treegrid/

bootstrap樣式的demo以及使用：http://maxazan.github.io/jquery-treegrid/examples/example-bootstrap-3.html

二、封裝treegrid

1、組件封裝的必要性

（1）縱觀組件的所有的demo和文檔，基本都是說的我們直接寫死的table標(biāo)簽，然后通過樣式去確定父子關(guān)系，最后初始化得到效果，但大部分情況下，我們的表格數(shù)據(jù)都不是寫死的，而是通過后臺獲取數(shù)據(jù)，然后將數(shù)據(jù)渲染到前端，最終得到我們想要的效果，如果根據(jù)組件目前的使用方式，我們得到一個(gè)集合數(shù)據(jù)之后，需要自己去拼接tr、td這些東西，這都是小事，最麻煩的是組件是有父子關(guān)系的，我們需要根據(jù)我們數(shù)據(jù)之間的關(guān)系轉(zhuǎn)化為組件的父子關(guān)系，并且由于支持無限級，還涉及到數(shù)據(jù)的遞歸運(yùn)算。這個(gè)復(fù)雜的過程是我們不想經(jīng)常去做的，怎么辦呢？最好的思路就是封裝了，封裝的時(shí)候麻煩一次，以后使用就簡單了，可以說這是一件一勞永逸的事情。

（2）一般來說，既然是treegrid，肯定會有表頭，而這個(gè)表頭是根據(jù)數(shù)據(jù)來動態(tài)顯示的。組件自帶的效果可以自己寫死表頭，但還是那句話，使用的靈活性太差。

由于以上兩點(diǎn)，于是才有了今天的這篇文章。

2、組件封裝代碼示例

首先我們將treegrid組件下載并引用到我們的項(xiàng)目里面，然后向其目錄里面加一個(gè)extension的文件夾，里面添加一個(gè)jquery.treegrid.extension.js的文件。

然后就是最重要的jquery.treegrid.extension.js文件的內(nèi)容：

(function ($) {
 "use strict";
 $.fn.treegridData = function (options, param) {
 //如果是調(diào)用方法
 if (typeof options == 'string') {
 return $.fn.treegridData.methods[options](this, param);
 }
 //如果是初始化組件
 options = $.extend({}, $.fn.treegridData.defaults, options || {});
 var target = $(this);
 debugger;
 //得到根節(jié)點(diǎn)
 target.getRootNodes = function (data) {
 var result = [];
 $.each(data, function (index, item) {
 if (!item[options.parentColumn]) {
  result.push(item);
 }
 });
 return result;
 };
 var j = 0;
 //遞歸獲取子節(jié)點(diǎn)并且設(shè)置子節(jié)點(diǎn)
 target.getChildNodes = function (data, parentNode, parentIndex, tbody) {
 $.each(data, function (i, item) {
 if (item[options.parentColumn] == parentNode[options.id]) {
  var tr = $('');
  var nowParentIndex = (parentIndex + (j++) + 1);
  tr.addClass('treegrid-' + nowParentIndex);
  tr.addClass('treegrid-parent-' + parentIndex);
  $.each(options.columns, function (index, column) {
  var td = $('');
  td.text(item[column.field]);
  tr.append(td);
  });
  tbody.append(tr);
  target.getChildNodes(data, item, nowParentIndex, tbody)
 }
 });
 };
 target.addClass('table');
 if (options.striped) {
 target.addClass('table-striped');
 }
 if (options.bordered) {
 target.addClass('table-bordered');
 }
 if (options.url) {
 $.ajax({
 type: options.type,
 url: options.url,
 data: options.ajaxParams,
 dataType: "JSON",
 success: function (data, textStatus, jqXHR) {
  debugger;
  //構(gòu)造表頭
  var thr = $('');
  $.each(options.columns, function (i, item) {
  var th = $('');
  th.text(item.title);
  thr.append(th);
  });
  var thead = $('');
  thead.append(thr);
  target.append(thead);
  //構(gòu)造表體
  var tbody = $('');
  var rootNode = target.getRootNodes(data);
  $.each(rootNode, function (i, item) {
  var tr = $('');
  tr.addClass('treegrid-' + (j + i));
  $.each(options.columns, function (index, column) {
  var td = $('');
  td.text(item[column.field]);
  tr.append(td);
  });
  tbody.append(tr);
  target.getChildNodes(data, item, (j + i), tbody);
  });
  target.append(tbody);
  target.treegrid({
  expanderExpandedClass: options.expanderExpandedClass,
  expanderCollapsedClass: options.expanderCollapsedClass
  });
  if (!options.expandAll) {
  target.treegrid('collapseAll');
  }
 }
 });
 }
 else {
 //也可以通過defaults里面的data屬性通過傳遞一個(gè)數(shù)據(jù)集合進(jìn)來對組件進(jìn)行初始化....有興趣可以自己實(shí)現(xiàn)，思路和上述類似
 }
 return target;
 };
 $.fn.treegridData.methods = {
 getAllNodes: function (target, data) {
 return target.treegrid('getAllNodes');
 },
 //組件的其他方法也可以進(jìn)行類似封裝........
 };
 $.fn.treegridData.defaults = {
 id: 'Id',
 parentColumn: 'ParentId',
 data: [], //構(gòu)造table的數(shù)據(jù)集合
 type: "GET", //請求數(shù)據(jù)的ajax類型
 url: null, //請求數(shù)據(jù)的ajax的url
 ajaxParams: {}, //請求數(shù)據(jù)的ajax的data屬性
 expandColumn: null,//在哪一列上面顯示展開按鈕
 expandAll: true, //是否全部展開
 striped: false, //是否各行漸變色
 bordered: false, //是否顯示邊框
 columns: [],
 expanderExpandedClass: 'glyphicon glyphicon-chevron-down',//展開的按鈕的圖標(biāo)
 expanderCollapsedClass: 'glyphicon glyphicon-chevron-right'//縮起的按鈕的圖標(biāo)
 };
})(jQuery);

代碼說明

1、為了避免和源組件的初始化沖突，我們自定義的組件取了一個(gè)別名，叫 treegridData 。我們使用組件的時(shí)候就通過treegridData來進(jìn)行初始化，如果你覺得這個(gè)名稱不順眼，可以自行修改。

2、代碼的封裝思路基本是參考博主之前介紹組件的封裝 https://www.jb51.net/article/112472.htm這一篇里面的內(nèi)容來的。

3、defaults里面就是初始化組件的時(shí)候可以傳遞的參數(shù)，上述注釋基本上寫得比較清楚。id和parentId兩個(gè)參數(shù)主要是用來描述數(shù)據(jù)之間的父子級關(guān)系，后面我們介紹組件時(shí)候的時(shí)候你一看就能明白。

4、博主加了幾個(gè)自認(rèn)為很有用的屬性和方法，應(yīng)該能減少一些使用的麻煩。比如初始化組件的時(shí)候是否展開所有的子節(jié)點(diǎn)、添加title、表格行的漸變色和表格邊框等。

5、上述封裝里面遞歸查找子節(jié)點(diǎn)的時(shí)候，每一次都需要遍歷所有的數(shù)據(jù)去找子節(jié)點(diǎn)，效率偏低，如果你使用了類似linq to js之類的組件去操作js的集合，可以優(yōu)化那部分代碼，適當(dāng)提高遞歸的效率。當(dāng)然，如果你的結(jié)果集本身數(shù)據(jù)量不太大，這么寫影響也不太大。

3、封裝后的組件使用

我們在界面上面引用需要的css和js文件　　

然后定義一個(gè)空的table標(biāo)簽

最后就是js初始化了

$(document).ready(function () {
 $('#tb').treegridData({
 id: 'Id',
 parentColumn: 'ParentId',
 type: "GET", //請求數(shù)據(jù)的ajax類型
 url: '/TestMVC/GetData', //請求數(shù)據(jù)的ajax的url
 ajaxParams: {}, //請求數(shù)據(jù)的ajax的data屬性
 expandColumn: null,//在哪一列上面顯示展開按鈕
 striped: true, //是否各行漸變色
 bordered: true, //是否顯示邊框
 //expandAll: false, //是否全部展開
 columns: [
  {
  title: '機(jī)構(gòu)名稱',
  field: 'Name'
  },
  {
  title: '機(jī)構(gòu)描述',
  field: 'Desc'
  }
 ]
 });
 });

當(dāng)然啦，還得配上后臺的取數(shù)據(jù)的方法

public class TestMVCController : Controller
 {public JsonResult GetData()
 {
 var result = new List