• 優勢
• 何時使用
• 開始使用
  • 配置端
  • 應用端
  • 開源地址

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」

yarnadddrip-table-generator

「npm」

npminstall--savedrip-table-generator

2 在文件開頭引入依賴

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

3 在頁面中引用

return;

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

1 安裝依賴

安裝 drip-table：

「yarn」

yarnadddrip-table

「npm」

npminstall--savedrip-table

2 在文件開頭引入依賴

//引入drip-table
importDripTablefrom"drip-table";
//引入drip-table樣式
import"drip-table/dist/index.min.css";

3 引用

constschema={
size:"middle",
columns:[
{
key:"columnKey",
title:"列標題",
dataIndex:"dataIndexName",
component:"text",
options:{
mode:"single",
},
},
],
};
return(

);

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

開源地址

• https://github.com/JDFED/drip-table