JS 组件系列之 bootstrap treegrid 组件封装过程
正文前言：最近产品需要设计一套相对完整的组织架构的解决方案，由于组织架构涉及到层级关系，在表格里面展示层级关系，自然就要用到所谓的treegrid。可惜的是，一些轻量级的表格组件本身并没有自带树形表格的功能，比如bootstrapTable就没有这个功能，怎么办呢？如果是jqgrid、easyUI的表格，treegrid的效果可以说是轻而易举就能解决，而项目目前用的就是bootstrapTable，不可能这个时候因为这个需求去换组件吧。博主分析了下，无非就两种解决方案：一种就是扩展bootstrapTable的treegrid功能；第二种就是再找一个单独的treegrid组件去实现这个功能。在网上找了下，找到了一个效果还不错的treegrid第三方组件，于是做了下封装，今天分享出来，供大家参考。 一、开源的treegrid1、组件效果预览最原始的效果
bootstrap样式的效果
这个是组件最原始的效果，后面会告诉大家博主做了哪些封装以及加了哪些功能。 在此还是给出一个封装过的效果吧！
2、组件开源地址最后还是给出github上面一个开源的treegrid组件。 github开源地址： 文档示例地址： bootstrap样式的demo以及使用： 二、封装treegrid1、组件封装的必要性（1）纵观组件的所有的demo和文档，基本都是说的我们直接写死的table标签，然后通过样式去确定父子关系，最后初始化得到效果，但大部分情况下，我们的表格数据都不是写死的，而是通过后台获取数据，然后将数据渲染到前端，最终得到我们想要的效果，如果根据组件目前的使用方式，我们得到一个集合数据之后，需要自己去拼接tr、td这些东西，这都是小事，最麻烦的是组件是有父子关系的，我们需要根据我们数据之间的关系转化为组件的父子关系，并且由于支持无限级，还涉及到数据的递归运算。这个复杂的过程是我们不想经常去做的，怎么办呢？最好的思路就是封装了，封装的时候麻烦一次，以后使用就简单了，可以说这是一件一劳永逸的事情。 （2）一般来说，既然是treegrid，肯定会有表头，而这个表头是根据数据来动态显示的。组件自带的效果可以自己写死表头，但还是那句话，使用的灵活性太差。 由于以上两点，于是才有了今天的这篇文章。 2、组件封装代码示例首先我们将treegrid组件下载并引用到我们的项目里面，然后向其目录里面加一个extension的文件夹，里面添加一个jquery.treegrid.extension.js的文件。
然后就是最重要的jquery.treegrid.extension.js文件的内容： ');
th.text(item.title);
thr.append(th);
});
var thead = $('');
thead.append(thr);
target.append(thead);
//构造表体
var tbody = $('');
var rootNode = target.getRootNodes(data);
$.each(rootNode,item) {
var tr = $('
代码说明1、为了避免和源组件的初始化冲突，我们自定义的组件取了一个别名，叫 treegridData 。我们使用组件的时候就通过treegridData来进行初始化，如果你觉得这个名称不顺眼，可以自行修改。 2、代码的封装思路基本是参考博主之前介绍组件的封装 这一篇里面的内容来的。 3、defaults里面就是初始化组件的时候可以传递的参数，上述注释基本上写得比较清楚。id和parentId两个参数主要是用来描述数据之间的父子级关系，后面我们介绍组件时候的时候你一看就能明白。 4、博主加了几个自认为很有用的属性和方法，应该能减少一些使用的麻烦。比如初始化组件的时候是否展开所有的子节点、添加title、表格行的渐变色和表格边框等。 5、上述封装里面递归查找子节点的时候，每一次都需要遍历所有的数据去找子节点，效率偏低，如果你使用了类似linq to js之类的组件去操作js的集合，可以优化那部分代码，适当提高递归的效率。当然，如果你的结果集本身数据量不太大，这么写影响也不太大。 3、封装后的组件使用我们在界面上面引用需要的css和js文件 相关内容
|
