RuoYi-树表格更换

目前框架里的树表格是基于基于bootstrapTreeTable/bootstrap-table-treegrid修改而来的，但是有很多Bootstrap Table自带的功能都没有了，而且样式显示也有些问题，所以尝试用Bootstrap Table官网扩展里的treetable来更换一下看效果怎么样
Bootstrap Table官网地址：https://bootstrap-table.com/
TreeGrid jQuery plugin官网地址：http://maxazan.github.io/jquery-treegrid/

下面开始修改

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

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

3. 页面引入js和css如下

<link th:href="@{/ajax/libs/jquery-treegrid/css/jquery.treegrid.css}" rel="stylesheet"/>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.js}"></script>
<script th:src="@{/ajax/libs/jquery-treegrid/js/jquery.treegrid.js}"></script>

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('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" οnclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
            	actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" οnclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
            	actions.push('<a class="btn btn-warning btn-xs ' + detailFlag + '" href="javascript:void(0)" οnclick="$.operate.detail(\'' + row.id + '\')"><i class="fa fa-search"></i>详细</a>');
            	return actions.join('');
          	}
         }]
     };
     $.table.init(options);
});

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

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