本文共 2288 字，大约阅读时间需要 7 分钟。

目前框架里的树表格是基于基于bootstrapTreeTable/bootstrap-table-treegrid修改而来的，但是有很多Bootstrap Table自带的功能都没有了，而且样式显示也有些问题，所以尝试用Bootstrap Table官网扩展里的来更换一下看效果怎么样

Bootstrap Table官网地址：

TreeGrid jQuery plugin官网地址：

下面开始修改

1. 从Bootstrap Table官网下载bootstrap-table-treegrid.js或者bootstrap-table-treegrid.min.js，结构如下

   

2. 从TreeGrid jQuery plugin官网下载jquery-treegrid源码包，结构如下

   

3. 页面引入js和css如下

4. 修改ry-ui.js，如下
   
   
   新加的代码：

idField: options.treeIdField,						// 树表id字段，用于设置父子关系parentIdField: options.treeParentIdField,			// 树表父id字段，用于设置父子关系treeShowField: options.treeShowField,				// 树表显示折叠箭头字段rootParentId: options.treeRootParentId				// 树表显示折叠箭头字段

5. 初始化表格，这里初始化和普通表格一样，使用方法也一样，只是多加几个参数，参考下面代码

$(function() {
   	var options = {
   		treeIdField: "id",        treeParentIdField: "parentId",        treeShowField: 'name',        treeRootParentId: "0",        pagination: false,        url: prefix + "/list",        createUrl: prefix + "/add",        updateUrl: prefix + "/edit/{id}",        detailUrl: prefix + "/detail/{id}",        removeUrl: prefix + "/remove",        exportUrl: prefix + "/export",        modalName: "商品信息",        onPostBody: function() {
           	$("#" + table.options.id).treegrid({
           		treeColumn: 1,        		initialState: 'collapsed',        		expanderExpandedClass: 'treetable-expander glyphicon glyphicon-chevron-down',        		expanderCollapsedClass: 'treetable-expander glyphicon glyphicon-chevron-right',        		onChange: function() {
           			$("#" + table.options.id).bootstrapTable('resetView')        		}          	})         },         columns: [{
            	checkbox: true         },         {
            	field: 'id',         	title: '主键',         	visible: false         },         {
            	field: 'name',         	title: '商品名称'         },         {
            	title: '操作',            align: 'center',            formatter: function(value, row, index) {
               	var actions = [];            	actions.push('编辑 ');            	actions.push('删除 ');            	actions.push('详细');            	return actions.join('');          	}         }]     };     $.table.init(options);});

6. 运行查看效果，样式显示正常，Bootstrap Table原有的功能都可以使用，下面给出一张Bootstrap Table官网的效果图
   

总结：虽然样式和普通表格一致了，功能也都可以使用，但是渲染速度并不如框架之前封装的，测试数据是600多条，如果千级或者万级对比，不好说哪个渲染速度更快，感兴趣的小伙伴可以自己测试一下，如果对框架原本封装的树表组件不太满意的可以试试这种方法

转载地址：http://jkatz.baihongyu.com/