1、为了避免和源组件的初始化冲突，我们自定义的组件取了一个别名，叫 treegridData 。我们使用组件的时候就通过treegridData来进行初始化，如果你觉得这个名称不顺眼，可以自行修改。
2、代码的封装思路基本是参考博主之前介绍组件的封装 https://www.jb51.net/article/112472.htm这一篇里面的内容来的。
3、defaults里面就是初始化组件的时候可以传递的参数，上述注释基本上写得比较清楚。id和parentId两个参数主要是用来描述数据之间的父子级关系，后面我们介绍组件时候的时候你一看就能明白。
4、博主加了几个自认为很有用的属性和方法，应该能减少一些使用的麻烦。比如初始化组件的时候是否展开所有的子节点、添加title、表格行的渐变色和表格边框等。
5、上述封装里面递归查找子节点的时候，每一次都需要遍历所有的数据去找子节点，效率偏低，如果你使用了类似linq to js之类的组件去操作js的集合，可以优化那部分代码，适当提高递归的效率。当然，如果你的结果集本身数据量不太大，这么写影响也不太大。
3、封装后的组件使用
我们在界面上面引用需要的css和js文件
<link href="https://www.jb51.net/~/Content/bootstrap/css/bootstrap.min.css" /> <link href="https://www.jb51.net/~/Content/jquery-treegrid-master/css/jquery.treegrid.css" /> <script src="https://www.jb51.net/~/Scripts/jquery-1.10.2.min.js"></script> <script src="https://www.jb51.net/~/Content/bootstrap/js/bootstrap.min.js"></script> <script src="https://www.jb51.net/~/Content/jquery-treegrid-master/js/jquery.treegrid.min.js"></script> <script src="https://www.jb51.net/~/Content/jquery-treegrid-master/js/jquery.treegrid.bootstrap3.js"></script> <script src="https://www.jb51.net/~/Content/jquery-treegrid-master/extension/jquery.treegrid.extension.js"></script>
然后定义一个空的table标签
<table ></table>
最后就是js初始化了
$(document).ready(function () { $('#tb').treegridData({ id: 'Id', parentColumn: 'ParentId', type: "GET", //请求数据的ajax类型 url: '/TestMVC/GetData', //请求数据的ajax的url ajaxParams: {}, //请求数据的ajax的data属性 expandColumn: null,//在哪一列上面显示展开按钮 striped: true, //是否各行渐变色 bordered: true, //是否显示边框 //expandAll: false, //是否全部展开 columns: [ { title: '机构名称', field: 'Name' }, { title: '机构描述', field: 'Desc' } ] }); });
当然啦，还得配上后台的取数据的方法