博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
RuoYi-树表格更换
阅读量:588 次
发布时间:2019-03-11

本文共 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. 页面引入jscss如下

  1. 修改ry-ui.js,如下
    在这里插入图片描述
    在这里插入图片描述
    新加的代码:
idField: options.treeIdField,						// 树表id字段,用于设置父子关系parentIdField: options.treeParentIdField,			// 树表父id字段,用于设置父子关系treeShowField: options.treeShowField,				// 树表显示折叠箭头字段rootParentId: options.treeRootParentId				// 树表显示折叠箭头字段
  1. 初始化表格,这里初始化和普通表格一样,使用方法也一样,只是多加几个参数,参考下面代码
$(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);});
  1. 运行查看效果,样式显示正常,Bootstrap Table原有的功能都可以使用,下面给出一张Bootstrap Table官网的效果图
    在这里插入图片描述

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

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

你可能感兴趣的文章