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

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

DripTable 目前包含以下子项目:drip-table、drip-table-generator。

图片

各个子项目具体介绍如下:

drip-table:动态列表解决方案的核心库,其主要能力是支持符合 JSON Schema 标准的数据自动渲染列表内容。

drip-table-generator:一个可视化的用于 DripTable 配置 JSON Schema 标准的配置数据的生成工具。

图片

 

优势

  • 高效开发:提高前端列表开发效率,实现 Lowcode 方式快速开发列表页。

  • 配置化渲染:以简单的 JSON Schema 配置字段,自动渲染处所需要的列表,降低用户使用成本。

  • 动态可扩展:支持自定义组件开发,通过API快速生成自定义的或者实现业务功能的单元格组件。

  • 界面框架自由:表格界面框架支持多种主题包,另外还支持自定义主题包。

何时使用

用于中后台 CMS 列表页的快速搭建,通过简单 JSON Schema 数据即可生成列表,无需硬编码。

用于 Lowcode 列表搭建的前端 Table 预览以及实现,无需复杂前端代码,便可实现自定义的列表。

图片

图片

开始使用

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={[]}  />  
);  

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

图片

 

开源地址

github.com/JDFED/drip-table

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/21266.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

静态网页加速器:优化性能和交付速度的 Node.js 最佳实践

如何使用 Node.js 发布静态网页 在本文中&#xff0c;我们将介绍如何使用 Node.js 来发布静态网页。我们将创建一个简单的 Node.js 服务器&#xff0c;将 HTML 文件作为响应发送给客户端。这是一个简单而灵活的方法&#xff0c;适用于本地开发和轻量级应用。 1、创建静态网页…

Linux中提示No such file or directory解决方法

说明&#xff1a; 在linux下&#xff0c;./xxx.sh执行shell脚本时会提示No such file or directory。但shell明明存在&#xff0c;为什么就是会提示这个呢&#xff1f; 这种其实是因为编码方式不对&#xff0c;如你在win下编辑sh&#xff0c;然后直接复制到linux下面 实现&…

机器学习笔记之优化算法(九)收敛速度的简单认识

机器学习笔记之优化算法——收敛速度的简单认识 引言收敛速度的判别标准 Q \mathcal Q Q-收敛速度 R \mathcal R R-收敛速度关于算法复杂度与收敛速度 引言 本节对收敛速度简单介绍。 收敛速度的判别标准 我们之前几节介绍了线搜索方法 ( Line Search Method ) (\text{Line …

leetcode----JavaScript 详情题解(2)

目录 2629. 复合函数 2631. 分组 2634. 过滤数组中的元素 2635. 转换数组中的每个元素 2637. 有时间限制的 Promise 对象 2648. 生成斐波那契数列 2649. 嵌套数组生成器 2665. 计数器 II 2666. 只允许一次函数调用 2629. 复合函数 恒等函数 在数学里&#xff0c;恒等函…

kubectl get node notReady | network not ready | kube-flannel not ready

问题 # 查看 node 状态 notReady [rootlocalhost ~]# kubectl get node NAME STATUS ROLES AGE VERSION node1 NotReady control-plane 31m v1.27.4 # 查看详细信息 network not ready [rootlocalhost ~]# kubectl describe node node1 Name: …

【Linux命令200例】awk文本处理工具的系统与实战讲述(常用)

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f3c6;本文已…

美团基础架构面经总结汇总

美团基础架构的面经。 问的全是基础,一个编程语言的问都没有。 问题记录 MySQL-MVCC InooDB是通过 MVCC 实现可重复读的隔离级别的,MVCC 就是多版本并发控制,它其实记录了历史版本的数据,解决了读写并发冲突问题。有一个版本编码,然后它进入了各种操作下的数据状态,能…

篇一:单例模式:C++中的独一无二

篇一&#xff1a;“单例模式&#xff1a;C中的独一无二” 设计模式在软件开发中起到了至关重要的作用&#xff0c;其中单例模式是最为常用且基础的设计模式之一。单例模式确保一个类只有一个实例&#xff0c;并提供全局访问点&#xff0c;以保证系统中的某个对象只有唯一的存在…

redis数据未到过期时间被删除

1. 问题描述 使用了jeecgboot开发后端代码&#xff0c;代码设置的redis过期时间为24小时&#xff0c;部署使用的宝塔面板&#xff0c;在redis中看到的过期时间也是为24小时&#xff0c;但是并未到过期时间&#xff0c;数据就被删除。 2. 解决办法 观察了一下redis中的数据&a…

DataGrip实时模板的配置

DataGrip实时模板的配置 File→Setting→Editor→Live Templates→点击“”→Live Template 即可新写入一条模板语句 写入新模板 缩写&#xff1a;seld select $END$ from dual; 注意:一开始都是默认无应用的&#xff0c;需要手动配置应用于所有SQL 点击difine&#xff08;…

【计算机网络】NAT技术

文章目录 1. NAT技术简介2. 使用NAT技术转换IP的过程3. NAPT4. NAT技术的缺陷5. NAT和代理服务器 1. NAT技术简介 NAT&#xff08;Network Address Translation&#xff0c;网络地址转换&#xff09;技术&#xff0c;是解决IP地址不足的主要手段&#xff0c;并且能够有效避免外…

TestFilterOnProxyWithoutTarget

目录 1 TestFilterOnProxyWithoutTarget 1.1 Test_ex_thrown_from_filters 1.2 Test_catching_ex_thrown_from_filters 1.2.1 // Exceptions are handled TestFilterOnProxyWithoutTarget using Flatwhite.Core.Tests.Attributes; using Microsoft.Extensions.Depend…

Linux下安装配置Redis

文章目录 安装依赖库上传安装包并解压 启动默认启动指定配置启动开机自启 安装 依赖库 Redis是基于C语言编写的&#xff0c;因此首先需要安装Redis所需要的gcc依赖&#xff1a; yum install -y gcc tcl上传安装包并解压 将Redis安装包上传到服务器的任意目录&#xff0c;例…

Vue - Element el-form 表单对象多层嵌套校验

针对el-form的数据源是对象嵌套对象&#xff0c;在进行数据绑定和校验时和单层的对象有一点区别&#xff0c; 具体是下面两部分&#xff1a; 数据源&#xff1a; fromData: {name: ,health: {height: } }1、 给 el-form-item 的 prop设为&#xff1a;prop"health.height&…

JavaScript |(三)内建对象 | 数组 | string对象 | 尚硅谷JavaScript基础实战

学习来源&#xff1a;尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版 文章目录 &#x1f4da;数组&#x1f407;数组介绍⭐️数组&#xff08;Array&#xff09;⭐️基本操作⭐️数组的字面量 &#x1f407;数组中的常用方法⭐️push()⭐️pop()⭐️unshift()⭐️shif…

CSS中page-break-after属性

在CSS中&#xff0c;page-break-after是一个属性&#xff0c;它控制了元素后的分页行为。 当你打印一个网页的时候&#xff0c;page-break-after属性可以设置在元素后插入一个分页符&#xff0c;将内容分割到新的一页上。它的值可以是以下之一&#xff1a; auto&#xff1a; …

spring websocket 调用受权限保护的方法失败

版本 spring-security 5.6.10 spring-websocket 5.3.27 现象 通过AbstractWebSocketHandler实现websocket端点处理器 调用使用PreAuthorize注解的方法报错&#xff0c;无法在SecurityContext中找到认证信息 org.springframework.security.authentication.AuthenticationCred…

无人驾驶实战-第一课(自动驾驶概述)

在七月算法上报了《无人驾驶实战》课程&#xff0c;老师讲的真好。好记性不如烂笔头&#xff0c;记录一下学习内容。 课程入口&#xff0c;感兴趣的也可以跟着学一下。 ————————————————————————————————————————— 无人驾驶汽车的定义…

音频光耦合器

音频光耦合器是一种能够将电信号转换为光信号并进行传输的设备。它通常由发光二极管&#xff08;LED&#xff09;和光敏电阻&#xff08;光电二极管或光敏电阻器&#xff09;组成。 在音频光耦合器中&#xff0c;音频信号经过放大和调节后&#xff0c;被转换为电流信号&#xf…

Windows11+Opencv+Clion编译源码

Windows11OpencvClion编译源码 参考&#xff1a;https://www.robotsfan.com/posts/69395e08.html 注意事项 编译过程中使用的软件&#xff0c;开源码等所有工具的安装路径一定不要有中文和空格。cmake过程会下载一些文件&#xff0c;如果是局域网的话可能下载不下来&#xf…