JS组件系列的引导树网格组件封装过程

主体

最近，产品需要设计一套组织结构相对完整的解决方案。因为组织结构涉及层次关系，所以在表中显示层次关系时，使用所谓的treegrid是很自然的。遗憾的是，一些轻量级的表组件不具备树表的功能。例如，bootstrapTable没有这个功能。我该怎么办？如果是jqgrid和easyUI表，treegrid的效果很容易解决，目前项目中使用的是bootstrapTable，所以这个时候不可能因为这个需求而改变组件。博主分析只有两种解决方案：一种是扩展bootstrapTable的treegrid功能；第二个是找到一个单独的treegrid组件来实现这个功能。在网上搜了一下，发现treegrid的一个第三方组件，效果不错，所以今天打包分享给大家参考。

首先，开源的treegrid

1.组件效果预览

最原始的效果

自举风格的影响

这是组件的原始效果，我们会告诉你博主都做了哪些包，后面又增加了哪些功能。

让我们在这里给出一个封装的效果！

2.组件开源地址

最后给出了github上的一个开源treegrid组件。

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

文件地址样本：http://maxazan.github.io/jquery-treegrid/

Bootstrap风格演示及其使用：http://maxazan . github . io/jquery-tree grid/examples/examples-bootstrap-3 . html

第二，封装树网格

1、组件包装的必要性

(1)看组件的所有demo和文档，基本上是说我们直接写死表标签，然后通过样式确定父子关系，最后初始化得到效果，但是大多数情况下，我们的表数据不是写死的，而是通过后台得到数据，然后将数据渲染到前端，最后得到想要的效果。如果我们根据组件的当前使用情况得到一组数据，那么自己拼接tr和td就是一件小事。最麻烦的是组件有父子关系。我们需要根据我们的数据之间的关系，把它们转换成父子关系，而且因为我们支持无穷大，所以也涉及到数据的递归运算。这个复杂的过程是我们不想经常做的事情。我们做什么呢最好的办法是打包。包装一次比较麻烦，以后用起来也方便。可以说，这是一劳永逸的事情。

(2)一般来说，既然是树格，肯定会有表头，根据数据动态显示。组件的效果可以自己把头写死，但同样，使用它的灵活性太差了。

正是因为以上两点，才有了今天的文章。

2.组件封装代码示例

首先，我们下载treegrid组件并将其引用到我们的项目中，然后向其目录中添加一个扩展文件夹，在其中添加一个jquery.treegrid.extension.js文件。

然后是最重要的jquery.treegrid.extension.js文件：

（函数($) { '使用“严格”；$ .fn.treegridData=函数（选项，参数){ //如果是调用方法if(选项类型==' string '){ return $。fn。treegridata。方法[选项](this，param)；} //如果是初始化组件选项=$。extend({}，$。fn。treegridata。默认值，选项| | { })；var target=$(this)；调试器；//得到根节点目标。getrootnode=function(data){ var result=[]；$.每个（数据、函数（索引、项){ if(！项目[选项。ParentColumn]){结果。推送(项目)；} });返回结果；};var j=0；//递归获取子节点并且设置子节点目标。getchildnodes=函数(数据，parentNode，parentIndex，tbody) { $ .每个（数据，函数(一，项){如果(项[选项。父列]==父节点[选项。id]){ var tr=$(' tr/tr ')；var now parent index=(parent index(j)1)；tr。AddClass('树网格-' now parentindex)；tr。AddClass('树网格-父-父索引')；$.每个(options.columns，function (index，column)){ var TD=$(' TD/TD ')；道明。文本(项[列。字段])；tr。追加(TD)；});t型车身。追加(tr)；target.getChildNodes(数据、项、nowParentIndex、t body)} })；};目标。addCLaSS(' table ')；if(选项。分条){ target。add class(' table-striped ')；} if(选项。带边框){ target。addCLaSS('表格边框')；} 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 ')；$.每个(options.columns，function (i，item){ var th=$(' th style=' padd :10 px；/th ')；th.text(项目。标题)；thr。追加(th)；});var thead=$(' thead/thead ')；thead。追加(thr)；目标。追加(广告)；//构造表体var t body=$(' t body/t body ')；var rootNode=target.getRootNodes(数据);$.每个(根节点，函数(I，item){ var tr=$(' tr/tr ')；tr。addCLaSS('树网格-'(j I))；$.每个(options.columns，function (index，column)){ var TD=$(' TD/TD ')；道明。文本(项[列。字段])；tr。追加(TD)；});t型车身。追加(tr)；target.getChildNodes(数据，项目、(j i)、t体)；});目标。追加(t体)；目标。树网格({ expanderexpandedclass :选项。expanderexpandedclass，expandercollapsedclass :选项。expanderclapsedclass })；if(！选项。expandall){ target。树网格(‘折叠’)；} } });} else { //也可以通过默认里面的数据属性通过传递一个数据集合进来对组件进行初始化.有兴趣可以自己实现，思路和上述类似}返回目标；};$ .fn。treeGridata。methods={ GetAllNode s 3360函数（目标，数据){返回目标。tree grid(' GetAllNodes ')；}, //组件的其他方法也可以进行类似封装.};$ .fn。treegridata。默认值={ Id : ' Id '，parentColumn: 'ParentId '，data: []，//构造桌子的数据集合type: 'GET '，//请求数据的创建交互式、快速动态网页应用的网页开发技术类型url: null，//请求数据的创建交互式、快速动态网页应用的网页开发技术的url ajaxParams: { }，//请求数据的创建交互式、快速动态网页应用的网页开发技术的数据属性expandColumn: null，//在哪一列上面显示展开按钮expandAll: true，//是否全部展开striped: false，//是否各行渐变色bordered: false，//是否显示边框columns: []，expanderexpand class : ' glyphicon glyphicon-chevron-down '，//展开的按钮的图标expandercollapsedclass : '右侧人字形图上的图形'//缩起的按钮的图标};})(jQuery)；代码说明

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

2、代码的封装思路基本是参考博主之前介绍组件的封装//www .JB 51。net/article/112472。html文件的后缀这一篇里面的内容来的。

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

4.博主增加了一些他们认为非常有用的属性和方法，应该可以减少一些麻烦。比如初始化组件时，是否展开所有子节点，添加标题，表格行渐变颜色，表格边框等。

5.在上述包中递归搜索子节点时，每次都需要遍历所有数据才能找到子节点，效率较低。如果使用linq to js这样的组件来操作js集合，就可以优化这部分代码，并适当提高递归效率。当然，如果你的结果集本身没有大量的数据，也不会有太大的影响。

3.封装组件的使用

我们参考接口上所需的css和js文件

link href=' ~/Content/bootstrap/CSS/bootstrap . min . CSS ' rel=' external nofollow ' rel='样式表'/link href=' ~/Content/Jquery-tree grid-master/CSS/Jquery . tree grid . CSS ' rel=' external nofollow ' rel='样式表'/脚本src=' http : ~/Scripts/Jquery-1 . 10 . 2 . min . js '/脚本src=' http 3360 ~/Content/bootstrap/js树网格。extension . js '/脚本，然后定义一个空的表标记

表id=' TB '/表。最后，js被初始化

$(文档)。ready(function () { $('#tb '))。treegridata({ Id : ' Id '，parentColumn: 'ParentId '，type: 'GET '，//请求数据的ajax类型URL为url: '/TestMVC/GetData '，/'，//请求数据的ajax URL为： {}，//请求数据的数据属性为expandColumn: null，//在哪个列显示扩展按钮分条： true，//每行是否逐渐变化});当然，它必须伴随着在后台获取数据的方法

公共类TestMVCController : Controller { public JsonResult GetData(){ var result=new Listobject()；结果。添加(新增{Id=1，名称='百度科技'，Desc='搜索巨头' })；结果。添加(新增{Id=2，名称='百度事业部'，Desc='搜索巨头'，ParentId=1 })；结果。添加(新增{Id=3，名称='百度人事部'，Desc='搜索巨头'，ParentId=1 })；结果。添加(新增{Id=11，名称='百度HH系'，Desc='搜索巨头'，ParentId=2 })；结果。添加(新增{Id=4，名称='百度管理'，Desc='搜索巨头'，ParentId=1 })；结果。添加(新增{Id=5，名称='百度YY部'，Desc='搜索巨头'，ParentId=1 })；结果。添加(新增{Id=12，名称='百度BB部门'，Desc='搜索巨头'，ParentId=2 })；结果。添加(新增{Id=6，名称='搜狐科技'，desc=' IT ' })；结果。添加(新增{Id=7，名称='搜狐信息部'，Desc='IT '，ParentId=6 })；结果。添加(新增{Id=8，名称='搜狐人事'，Desc='IT '，ParentId=6 })；结果。添加(新增{Id=9，名称='搜狐事业部'，Desc='IT '，ParentId=6 })；结果。添加(新增{Id=10，名称='搜狐业务子部门'，Desc='IT '，ParentId=9 })；返回Json(结果，JsonRequestBehavior。allow get)；}}您可以通过查看此处了解id和parentColumn在组件默认值中的作用。我记得在jqgrid中使用treeview时，用一个级别来判断它是哪个级别的节点。博主们觉得硬性要求在返回的数据中添加一个级别属性有点不合适。因此，我们一致认为，如果当前记录的parentId为null或空字符串，那么这个节点就是根节点，然后根据根节点递归查找子节点。

使用后的各种效果示例如下。

初始化期间将expandAll:配置为false的影响

添加交错颜色变化条纹：真

添加表格边框边框： true

合成效应

三.摘要

至此，本文结束。没有什么高级技术，就是简单的封装一个第三方组件，让它更方便使用。如果你在项目中与treegrid做斗争，为什么不试试呢？其实博主已经有了扩展bootstrapTable的treegrid函数的想法，有时间我们会在下一章解释。

以上是边肖介绍的JS组件系统的bootstrap treegrid组件封装过程。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！