开源动态表格列字段显示隐藏项目：DynamicTable

deng775747758

已于 2024-12-05 11:36:24 修改

阅读量1.8k

点赞数 30

文章标签： springboot java spring 开源软件

于 2024-12-04 15:23:38 首次发布

本文链接：https://blog.youkuaiyun.com/deng775747758/article/details/144240883

版权

开源项目：DynamicTable

动态表格列字段配置，快速实现table字段隐藏显示

痛点

给大家推荐一个开源项目。在业务系统中，某些列表可能包含大量列，需要动态决定哪些列显示，哪些列隐藏。传统方法只能通过修改代码实现，但今天推荐的系统可以轻松实现列表字段的动态显示与隐藏，无需修改代码

系统简介

在日常开发中，项目中表格字段的显示与隐藏需求变化频繁，而每次修改都需要手动调整代码并重新部署，既费时又容易出错。为了解决这一痛点，我开发了一套支持自定义表格字段管理的系统，旨在提供灵活的字段配置方式，让开发者无需改动代码即可动态调整表格字段，从而提升开发效率和用户体验。

功能简介

1、无需在现有系统中进行集成，只需部署 DynamicTable 系统并对接接口即可轻松实现动态表格

2、可以为同一数据库表不同的表格设置不同的列显示，灵活满足多场景需求

3、DynamicTable是基于若依系统开发的SpringBoot项目

系统演示

demo

使用流程

1、运行系统

本系统基于若依系统开发，可以参考若依文档运行系统（点击可跳转）

2、修改从数据库连接，编辑resources目录下的application-druid.yml

# 从库数据源
slave:
   # 从数据源开关/默认关闭
   enabled: true
   url: jdbc:mysql://localhost:3306/bussiness_db?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
   username: root
   password: 12345678

将数据源改为您业务系统的数据源

3、登录系统

默认用户名：admin 密码：123456

在这里插入图片描述

4、新增表格模型

在这里插入图片描述

5、字段设置：【表格模型】列表点击编辑，切换到【字段设置】

在这里插入图片描述

（1）默认这里带出的都是数据库表中所有字段

（2）如果有不是数据库表中的字段，也可以新增自定义字段

（3）是否显示列：暂时无用

（4）是否排序列：标识字段是否可以排序

（5）默认宽度：列宽

6、列表设置

在您的业务系统中，同一个数据库表可能对应多个表格视图，系统允许针对每个表格视图配置不同的字段显示，提供更灵活的管理方式

在这里插入图片描述

7、第三方业务系统对接

您的业务系统可以使用如下接口对接

接口名称：查询表格字段

请求方式：GET

请求地址：/api/tablecolumn/getTableColumnList

请求参数：

参数名称	参数解释	是否必填
modelCode	模型编码	是
tabName	列表名称	是

请求结果：

参数名称	参数解释
code	返回结果：0-成功，其他-失败
msg	返回消息
fieldName	字段名称
fieldCode	字段编码
width	宽度
fieldOrder	字段顺序
sortFlag	是否可以排序：1：可以排序，0：不可以排序

返回成功案例：

{
    "msg": "操作成功",
    "code": 0,
    "data": [
        {
            "fieldName": "负责人",
            "fieldCode": "leader",
            "width": 100,
            "fieldOrder": 0,
            "sortFlag": 0
        },
        {
            "fieldName": "邮箱",
            "fieldCode": "email",
            "width": 100,
            "fieldOrder": 1,
            "sortFlag": 0
        }
    ]
}

8、对接示例

（1）Vue2+Element UI

// 获取表字段列表
export function getColumns(modelCode,tabName) {
  return request({
    url: 'http://127.0.0.1/api/tablecolumn/getTableColumnList?modelCode=' + modelCode + "&tabName=" + tabName,
    method: 'get'
  })
}

export default {
  name: "Customer",
  data() {
    return {
      // 表格列（从接口获取）
      columns: []
    };
  },
  created() {
    this.getColumns();
    this.getList();
  },
  methods: {
    /** 查询表格列字段 */
    getColumns() {
      getColumns("Customer","customerList").then(response => {
        this.columns = response.data;
      });
    },
    /** 查询客户列表 */
    getList() {
      this.loading = true;
      listCustomer(this.queryParams).then(response => {
        this.customerList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    }
  }
};

<el-table v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />
    <!-- 动态渲染表头 -->
    <el-table-column
      v-for="(column, index) in columns"
      :key="index"
      :label="column.fieldName"
      :prop="column.fieldCode"
      :width="column.width">
    </el-table-column>
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleUpdate(scope.row)"
          v-hasPermi="['system:customer:edit']"
        >修改</el-button>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.row)"
          v-hasPermi="['system:customer:remove']"
        >删除</el-button>
      </template>
    </el-table-column>
</el-table>

（2）Jquery + Bootstrap

// 获取表格列字段
$.ajax({
    url: 'http://127.0.0.1/api/tablecolumn/getTableColumnList?modelCode=Customer&tabName=customerList',  // Replace with your actual endpoint
    method: 'GET',
    success: function(response) {
        if(response.code != 0){
            $.modal.alertError(response.msg);
            return;
        }
        var columns = response.data;
        var columnDefs = [];
        columns.forEach(function(column) {
            columnDefs.push({
                field: column.fieldCode,
                title: column.fieldName,
                width: column.width,
                sortable: column.sortFlag,
            });
        });
        // 在数组的开头添加复选框
        columnDefs.unshift({
            checkbox: true
        });  // 添加到开头
        //操作列
        var extraColumnEnd =  {
            title: '操作',
            align: 'center',
            width: 100,
            formatter: function(value, row, index) {
                var actions = [];
                actions.push('<a οnclick=""><i class="fa fa-edit"></i>编辑</a> ');
                actions.push('<a οnclick=""><i class="fa fa-remove"></i>删除</a>');
                return actions.join('');
            }
        }
        // 在数组的最后添加操作列
        columnDefs.push(extraColumnEnd); // 添加到末尾
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "客户",
            columns: columnDefs,
        };
        $.table.init(options);
    },
    error: function() {
        alert('Failed to load columns.');
    }
});