具体使用见转载地址！
由于在使用过程中，出现了一点问题，所以在这里记录下来。
先看html代码：
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) { var log; $.each(data, function (i, item) { if (item[options.parentColumn] == parentNode[options.id]) { var tr = $(''); var nowParentIndex = item[options.id]; tr.addClass('treegrid-' + nowParentIndex); tr.addClass('treegrid-parent-' + parentIndex); $.each(options.columns, function (index, column) { var 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 = $(''); $.each(options.columns, function (i, item) { var th = $(''); th.text(item.title); thr.append(th); }); var thead = $(''); thead.append(thr); target.append(thead); //构造表体 var tbody = $(''); var rootNode = target.getRootNodes(data.page.list); $.each(rootNode, function (i, item) { var tr = $(''); var tempTreeGrid = item.permissionId; tr.addClass('treegrid-' + tempTreeGrid); $.each(options.columns, function (index, column) { var td = $(''); td.text(item[column.field]); tr.append(td); }); tbody.append(tr); target.getChildNodes(data.page.list, item, tempTreeGrid, 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); 这里主要说下jquery.treegrid.extension.js文件，原本按照原作者的代码是可以实现树形table的，但是遇到一个坑爹的问题，就是层级不对，我的数据层级本身应该是如下这种：
-系统设置(1级目录)
-用户管理(2级目录)
-添加用户(3级目录)
-代码管理(1级目录)
-代码生成(2级目录)
-代码详细(3级目录)
实际的效果如下：
-系统设置(1级目录)
-用户管理(2级目录)
-添加用户(3级目录)
-代码详细(3级目录)
-代码管理(1级目录)
-代码生成(2级目录)
首先确认，数据层级关系肯定是没问题的。那么可能就是jquery.treegrid.extension.js这个文件的问题了。
经过查看发现，层级的关系是依靠 var j = 0; 来设置的，然后debug代码后发现，确实这个参数导致的层级不对。后将层级用数据的id和parentId来进行设置，见如下代码片段：
//递归获取子节点并且设置子节点 target.getChildNodes = function (data, parentNode, parentIndex, tbody) { var log; $.each(data, function (i, item) { if (item[options.parentColumn] == parentNode[options.id]) { var tr = $(''); var nowParentIndex = item[options.id]; tr.addClass('treegrid-' + nowParentIndex); tr.addClass('treegrid-parent-' + parentIndex); $.each(options.columns, function (index, column) { var td = $(''); td.text(item[column.field]); tr.append(td); }); tbody.append(tr); target.getChildNodes(data, item, nowParentIndex, tbody) } }); };
//构造表体 var tbody = $(''); var rootNode = target.getRootNodes(data.page.list); $.each(rootNode, function (i, item) { var tr = $(''); var tempTreeGrid = item.permissionId; tr.addClass('treegrid-' + tempTreeGrid); $.each(options.columns, function (index, column) { var td = $(''); td.text(item[column.field]); tr.append(td); }); tbody.append(tr); target.getChildNodes(data.page.list, item, tempTreeGrid, tbody); }); 完美解决！