具体使用见转载地址！
由于在使用过程中，出现了一点问题，所以在这里记录下来。
先看html代码：
<script type="text/javascript">
$(document).ready(function () {
$('.tree').treegridData({
id: 'permissionId',
parentColumn: 'parentPermissionId',
type: "GET", //请求数据的ajax类型
url: 'list', //请求数据的ajax的url
ajaxParams: {}, //请求数据的ajax的data属性
expandColumn: null,//在哪一列上面显示展开按钮
striped: true, //是否各行渐变色
bordered: true, //是否显示边框
// expandAll: false, //是否全部展开
columns: [
{
title: '菜单名',
field: 'permissionName'
},
{
title: '菜单描述',
field: 'description'
},
{
title: '创建时间',
field: 'gmtCreate'
},
{
title: '最近修改时间',
field: 'gmtCreate'
}
]
});
});
</script>
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 = $('<tr></tr>');
var nowParentIndex = item[options.id];
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 style="padding:10px;"></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.page.list);
$.each(rootNode, function (i, item) {
var tr = $('<tr></tr>');
var tempTreeGrid = item.permissionId;
tr.addClass('treegrid-' + tempTreeGrid);
$.each(options.columns, function (index, column) {
var td = $('<td></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 = $('<tr></tr>');
var nowParentIndex = item[options.id];
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)
}
});
};
//构造表体
var tbody = $('<tbody></tbody>');
var rootNode = target.getRootNodes(data.page.list);
$.each(rootNode, function (i, item) {
var tr = $('<tr></tr>');
var tempTreeGrid = item.permissionId;
tr.addClass('treegrid-' + tempTreeGrid);
$.each(options.columns, function (index, column) {
var td = $('<td></td>');
td.text(item[column.field]);
tr.append(td);
});
tbody.append(tr);
target.getChildNodes(data.page.list, item, tempTreeGrid, tbody);
});
完美解决！
