京东开源:一款高效的企业级表格可视化搭建解决方案!

简介: 京东开源:一款高效的企业级表格可视化搭建解决方案!

DripTable 是京东零售推出的一款用于企业级中后台的动态列表解决方案,项目基于 React 和 JSON Schema,旨在通过简单配置快速生成页面动态列表来降低列表开发难度、提高工作效率。

DripTable 目前包含以下子项目:drip-table、drip-table-generator。各个子项目具体介绍如下:

  • drip-table :动态列表解决方案的核心库,其主要能力是支持符合 JSON Schema 标准的数据自动渲染列表内容。
  • drip-table-generator :一个可视化的用于 DripTable 配置 JSON Schema 标准的配置数据的生成工具。

优势

  • 高效开发 :提高前端列表开发效率,实现 Lowcode 方式快速开发列表页。
  • 配置化渲染 :以简单的 JSON Schema 配置字段,自动渲染处所需要的列表,降低用户使用成本。
  • 动态可扩展 :支持自定义组件开发,通过API快速生成自定义的或者实现业务功能的单元格组件。
  • 界面框架自由 :表格界面框架支持多种主题包,另外还支持自定义主题包。

基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

何时使用

  • 用于中后台 CMS 列表页的快速搭建,通过简单 JSON Schema 数据即可生成列表,无需硬编码。
  • 用于 Lowcode 列表搭建的前端 Table 预览以及实现,无需复杂前端代码,便可实现自定义的列表。

基于 Spring Cloud Alibaba + Gateway + Nacos + RocketMQ + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能

开始使用

DripTable 分为两种应用场景:配置端和应用端。配置端主要负责通过可视化方式和 low-code 方式进行 JSON Schema 标准数据的生成。应用端的职能则是将 JSON Schema 标准配置数据渲染成动态列表。

配置端

1  安装依赖

配置端依赖应用端,安装前先确保已安装 drip-table。

「yarn」

yarn add drip-table-generator

「npm」

npm install --save drip-table-generator

2  在文件开头引入依赖

import DripTableGenerator from "drip-table-generator";  
import "drip-table-generator/dist/index.min.css";

3  在页面中引用

return <DripTableGenerator />;

配置端正常渲染效果如下:

应用端

1  安装依赖

安装 drip-table:

「yarn」

yarn add drip-table

「npm」

npm install --save drip-table

2  在文件开头引入依赖

// 引入 drip-table  
import DripTable from "drip-table";  
// 引入 drip-table 样式  
import "drip-table/dist/index.min.css";

3  引用

const schema = {  
  size: "middle",  
  columns: [  
    {  
      key: "columnKey",  
      title: "列标题",  
      dataIndex: "dataIndexName",  
      component: "text",  
      options: {  
        mode: "single",  
      },  
    },  
  ],  
};  
return (  
  <DripTable  
    schema={schema}  
    dataSource={[]}  
  />  
);

应用端正常渲染效果如下:

开源地址

相关文章
|
存储 数据可视化 JavaScript
(低代码)可视化搭建平台数据源设计剖析
低代码平台属于APaaS(应用平台即服务),其解决的是企业内部应用协调和人效成本的问题. 随着计算机技术诸如云服务等的发展, 传统软件服务已无法满足数字化浪潮的压力,
1100 0
|
10月前
|
数据可视化 前端开发 定位技术
地图作业平台低代码实战(搭建能力提升)
该内容是关于地图数据作业平台从大型WebGIS的“综合作业”模式向人机结合、所见即所得的“简单作业”模式转变的探讨。平台在低代码建设过程中,遇到的问题是如何让非研发人员(如产品经理、工艺人员)能独立搭建车间,而无需理解前端基本概念如事件驱动、数据不可变原则等。为解决这一问题,文章提出了数据筛选器和saveEffect对象的解决方案,简化了数据处理和组件间联动的实现,使非研发人员也能通过可视化方式构建组件通信和联动逻辑。此外,还展示了如何将普通UI组件接入saveEffect的改造方法。最后,文中提到了未来的规划,包括引入逻辑编排能力和图形化表达逻辑代码,以支持更复杂的车间搭建。
地图作业平台低代码实战(搭建能力提升)
|
10月前
|
前端开发 数据可视化 JavaScript
探索前端可视化开发:低代码平台原理与实践
【4月更文挑战第7天】本文探讨了低代码平台在前端开发中的应用,介绍了其模型驱动、组件化和自动化部署的原理,强调了提升效率、降低技术门槛、灵活适应变更和保证一致性等优势。建议开发者明确适用场景,选择合适平台,并培养团队低代码技能,同时规划与现有技术栈的融合,实施持续优化治理。低代码平台正改变开发格局,为业务创新和数字化转型提供新途径。
394 0
|
10月前
|
数据可视化 Java BI
商业开源MES+源码+送可拖拽式数据大屏
这是一个商业开源的JAVA MES系统,包含源码和本地部署教程。基于Springboot、Vue3和MySQL8,适用于开发学习。功能包括车间数据建模、生产物料控制、计划管理、过程控制、质量管理、库存管理、看板管理、报表分析和基础管理。需JDK11、Tomcat及Maven环境,源码付费获取。
150 0
|
10月前
|
资源调度 数据可视化 前端开发
基于mathlive从零将公式编辑器集成到可视化搭建平台
基于mathlive从零将公式编辑器集成到可视化搭建平台
252 0
|
10月前
|
SQL 分布式计算 DataWorks
构建高效数据统计服务:阿里云产品实践指南
在今天的数字化时代,数据统计服务对于业务决策和优化至关重要。本文将介绍如何基于阿里云相关产品,搭建一个高效、可扩展的数据统计服务。我们将使用MaxCompute、DataWorks、Quick BI等阿里云产品,通过代码示例和详细说明,带你一步步完成整个流程。
357 0
|
10月前
|
存储 数据采集 运维
构建高效日志管理系统:阿里云产品实践与技术解析
日志管理对于系统运维和故障排查至关重要。本文将详细介绍如何利用阿里云相关产品搭建一个高效、可扩展的日志管理系统。我们将使用Log Service、Elasticsearch、DataHub等阿里云产品,通过代码示例和详细说明,带你一步步完成整个流程。
440 0
|
供应链 数据可视化 数据管理
[开源]免费开源MES系统,精美的可视化数字大屏,支持低代码大屏设计
万界星空开源MES制造执行系统的Java开源版本。开源mes系统包括系统管理,车间基础数据管理,计划管理,物料控制,生产执行,质量管理,库存管理,看板管理,数据分析等主体功能模块。广泛应用于汽车、高科技电子、 设备制造、新能源、电梯、家电、家居、纺织、电气、电机等行业。
1076 0
[开源]免费开源MES系统,精美的可视化数字大屏,支持低代码大屏设计
|
SQL 数据可视化 Oracle
JNPF可视化平台的搭建及使用
JNPF可视化平台的搭建及使用
516 0
|
存储 SQL 供应链
拓展数据管理与应用的重要工具
MySQL是一种开源的关系型数据库管理系统,被广泛应用于互联网应用、企业级系统、数据分析等各个领域。MySQL以其稳定性、可扩展性和开放性受到众多开发者和企业的青睐。本文将介绍MySQL数据库的特点、应用领域以及对数据管理与应用的重要性,展示MySQL数据库在信息时代的关键地位。