前言：最近产品需要设计一套相对完整的组织架构的解决方案，由于组织架构涉及到层级关系，在表格里面展示层级关系，自然就要用到所谓的treegrid。可惜的是，一些轻量级的表格组件本身并没有自带树形表格的功能，比如bootstrapTable就没有这个功能，怎么办呢？如果是jqgrid、easyUI的表格，treegrid的效果可以说是轻而易举就能解决，而项目目前用的就是bootstrapTable，不可能这个时候因为这个需求去换组件吧。博主分析了下，无非就两种解决方案：一种就是扩展bootstrapTable的treegrid功能；第二种就是再找一个单独的treegrid组件去实现这个功能。在网上找了下，找到了一个效果还不错的treegrid第三方组件，于是做了下封装，今天分享出来，供大家参考。
一、开源的treegrid
1、组件效果预览
最原始的效果
bootstrap样式的效果
这个是组件最原始的效果，后面会告诉大家博主做了哪些封装以及加了哪些功能。
在此还是给出一个封装过的效果吧！
2、组件开源地址
最后还是给出github上面一个开源的treegrid组件。
github开源地址：https://github.com/maxazan/jquery-treegrid
二、封装treegrid
1、组件封装的必要性
（1）纵观组件的所有的demo和文档，基本都是说的我们直接写死的table标签，然后通过样式去确定父子关系，最后初始化得到效果，但大部分情况下，我们的表格数据都不是写死的，而是通过后台获取数据，然后将数据渲染到前端，最终得到我们想要的效果，如果根据组件目前的使用方式，我们得到一个集合数据之后，需要自己去拼接tr、td这些东西，这都是小事，最麻烦的是组件是有父子关系的，我们需要根据我们数据之间的关系转化为组件的父子关系，并且由于支持无限级，还涉及到数据的递归运算。这个复杂的过程是我们不想经常去做的，怎么办呢？最好的思路就是封装了，封装的时候麻烦一次，以后使用就简单了，可以说这是一件一劳永逸的事情。
（2）一般来说，既然是treegrid，肯定会有表头，而这个表头是根据数据来动态显示的。组件自带的效果可以自己写死表头，但还是那句话，使用的灵活性太差。
由于以上两点，于是才有了今天的这篇文章。
2、组件封装代码示例
首先我们将treegrid组件下载并引用到我们的项目里面，然后向其目录里面加一个extension的文件夹，里面添加一个jquery.treegrid.extension.js的文件。
然后就是最重要的jquery.treegrid.extension.js文件的内容：
(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></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的url ajaxParams: {}, //请求数据的ajax的data属性 expandColumn: null,//在哪一列上面显示展开按钮 expandAll: true, //是否全部展开 striped: false, //是否各行渐变色 bordered: false, //是否显示边框 columns: [], expanderExpandedClass: 'glyphicon glyphicon-chevron-down',//展开的按钮的图标 expanderCollapsedClass: 'glyphicon glyphicon-chevron-right'//缩起的按钮的图标 }; })(jQuery);
代码说明