京東又開源一個新框架，用起來真優雅！

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 標準配置數據渲染成動態列表。

推薦一個開源免費的 Spring Boot 實戰項目：

https://github.com/javastacks/spring-boot-best-practice

配置端

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

應用端正常渲染效果如下：

開源地址：https://github.com/JDFED/drip-table

近期熱文推薦：

1.1,000+ 道 Java面試題及答案整理(2022最新版)

2.勁爆！Java 協程要來了。。。

3.Spring Boot 2.x 教程，太全了！

4.別再寫滿屏的爆爆爆炸類了，試試裝飾器模式，這才是優雅的方式！！

5.《Java開發手冊（嵩山版）》最新發佈，速速下載！

覺得不錯，別忘了隨手點贊+轉發哦！