JS组件系列——自己动手封装bootstrap-treegrid组件

(function ($) {"use strict";$.fn.treegridData = function (options, param) {//如果是调用方法if (typeof options == 'string') {return $.fn.treegridData.methods[options](this, param);}//如果是初始化组件options = $.extend({}, $.fn.treegridData.defaults, options || {});var target = $(this);debugger;//得到根节点target.getRootNodes = function (data) {var result = [];$.each(data, function (index, item) {if (!item[options.parentColumn]) {result.push(item);}});return result;};var j = 0;//递归获取子节点并且设置子节点target.getChildNodes = function (data, parentNode, parentIndex, tbody) {$.each(data, function (i, item) {if (item[options.parentColumn] == parentNode[options.id]) {var tr = $('<tr></tr>');var nowParentIndex = (parentIndex + (j++) + 1);tr.addClass('treegrid-' + nowParentIndex);tr.addClass('treegrid-parent-' + parentIndex);$.each(options.columns, function (index, column) {var td = $('<td></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;//构造表头var thr = $('<tr></tr>');$.each(options.columns, function (i, item) {var th = $('<th style="padding:10px;"></th>');th.text(item.title);thr.append(th);});var thead = $('<thead></thead>');thead.append(thr);target.append(thead);//构造表体var tbody = $('<tbody></tbody>');var rootNode = target.getRootNodes(data);$.each(rootNode, function (i, item) {var tr = $('<tr></tr>');tr.addClass('treegrid-' + (j + i));$.each(options.columns, function (index, column) {var td = $('<td></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属性通过传递一个数据集合进来对组件进行初始化....有兴趣可以自己实现，思路和上述类似
        }return target;};$.fn.treegridData.methods = {getAllNodes: function (target, data) {return target.treegrid('getAllNodes');},//组件的其他方法也可以进行类似封装........
    };$.fn.treegridData.defaults = {id: 'Id',parentColumn: 'ParentId',data: [],    //构造table的数据集合type: "GET", //请求数据的ajax类型url: null,   //请求数据的ajax的urlajaxParams: {}, //请求数据的ajax的data属性expandColumn: null,//在哪一列上面显示展开按钮expandAll: true,  //是否全部展开striped: false,   //是否各行渐变色bordered: false,  //是否显示边框
        columns: [],expanderExpandedClass: 'glyphicon glyphicon-chevron-down',//展开的按钮的图标expanderCollapsedClass: 'glyphicon glyphicon-chevron-right'//缩起的按钮的图标
        };
})(jQuery);

代码说明

1、为了避免和源组件的初始化冲突，我们自定义的组件取了一个别名，叫 treegridData 。我们使用组件的时候就通过treegridData来进行初始化，如果你觉得这个名称不顺眼，可以自行修改。

2、代码的封装思路基本是参考博主之前介绍组件的封装 http://www.cnblogs.com/landeanfen/p/5124542.html这一篇里面的内容来的。

3、defaults里面就是初始化组件的时候可以传递的参数，上述注释基本上写得比较清楚。id和parentId两个参数主要是用来描述数据之间的父子级关系，后面我们介绍组件时候的时候你一看就能明白。

4、博主加了几个自认为很有用的属性和方法，应该能减少一些使用的麻烦。比如初始化组件的时候是否展开所有的子节点、添加title、表格行的渐变色和表格边框等。

5、上述封装里面递归查找子节点的时候，每一次都需要遍历所有的数据去找子节点，效率偏低，如果你使用了类似linq to js之类的组件去操作js的集合，可以优化那部分代码，适当提高递归的效率。当然，如果你的结果集本身数据量不太大，这么写影响也不太大。

3、封装后的组件使用

<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /><link href="~/Content/jquery-treegrid-master/css/jquery.treegrid.css" rel="stylesheet" /><script src="~/Scripts/jquery-1.10.2.min.js"></script><script src="~/Content/bootstrap/js/bootstrap.min.js"></script><script src="~/Content/jquery-treegrid-master/js/jquery.treegrid.min.js"></script><script src="~/Content/jquery-treegrid-master/js/jquery.treegrid.bootstrap3.js"></script><script src="~/Content/jquery-treegrid-master/extension/jquery.treegrid.extension.js"></script>

然后定义一个空的table标签

<table id="tb" ></table>