ToB企服应用市场:ToB评测及商务社交产业平台

标题: 京东又开源一个新框架,用起来真优雅! [打印本页]

作者: 石小疯    时间: 2023-8-2 10:14
标题: 京东又开源一个新框架,用起来真优雅!
DripTable 是京东零售推出的一款用于企业级中后台的动态列表解决方案,项目基于 React 和 JSON Schema,旨在通过简单配置快速生成页面动态列表来降低列表开发难度、提高工作效率。
DripTable 目前包含以下子项目:drip-table、drip-table-generator。
各个子项目具体介绍如下:

优势

何时使用



开始使用

DripTable 分为两种应用场景:配置端和应用端。配置端主要负责通过可视化方式和 low-code 方式进行 JSON Schema 标准数据的生成。应用端的职能则是将 JSON Schema 标准配置数据渲染成动态列表。
推荐一个开源免费的 Spring Boot 实战项目:
https://github.com/javastacks/spring-boot-best-practice
配置端

1  安装依赖

配置端依赖应用端,安装前先确保已安装 drip-table。
「yarn」
  1. yarn add drip-table-generator  
复制代码
「npm」
  1. npm install --save drip-table-generator  
复制代码
2  在文件开头引入依赖
  1. import DripTableGenerator from "drip-table-generator";  
  2. import "drip-table-generator/dist/index.min.css";  
复制代码
3  在页面中引用
  1. return <DripTableGenerator />;  
复制代码
配置端正常渲染效果如下:

应用端

1  安装依赖

安装 drip-table:
「yarn」
  1. yarn add drip-table  
复制代码
「npm」
  1. npm install --save drip-table  
复制代码
2  在文件开头引入依赖
  1. // 引入 drip-table  
  2. import DripTable from "drip-table";  
  3. // 引入 drip-table 样式  
  4. import "drip-table/dist/index.min.css";  
复制代码
3  引用
  1. const schema = {  
  2.   size: "middle",  
  3.   columns: [  
  4.     {  
  5.       key: "columnKey",  
  6.       title: "列标题",  
  7.       dataIndex: "dataIndexName",  
  8.       component: "text",  
  9.       options: {  
  10.         mode: "single",  
  11.       },  
  12.     },  
  13.   ],  
  14. };  
  15. return (  
  16.   <DripTable  
  17.     schema={schema}  
  18.     dataSource={[]}  
  19.   />  
  20. );  
复制代码
应用端正常渲染效果如下:

开源地址:https://github.com/JDFED/drip-table
近期热文推荐:
1.1,000+ 道 Java面试题及答案整理(2022最新版)
2.劲爆!Java 协程要来了。。。
3.Spring Boot 2.x 教程,太全了!
4.别再写满屏的爆爆爆炸类了,试试装饰器模式,这才是优雅的方式!!
5.《Java开发手册(嵩山版)》最新发布,速速下载!
觉得不错,别忘了随手点赞+转发哦!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!




欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4