• 優(yōu)勢(shì)
• 何時(shí)使用
• 開(kāi)始使用
  • 配置端
  • 應(yīng)用端
  • 開(kāi)源地址

DripTable 是京東零售推出的一款用于企業(yè)級(jí)中后臺(tái)的動(dòng)態(tài)列表解決方案，項(xiàng)目基于 React 和 JSON Schema，旨在通過(guò)簡(jiǎn)單配置快速生成頁(yè)面動(dòng)態(tài)列表來(lái)降低列表開(kāi)發(fā)難度、提高工作效率。

DripTable 目前包含以下子項(xiàng)目：drip-table、drip-table-generator。各個(gè)子項(xiàng)目具體介紹如下：

• drip-table：動(dòng)態(tài)列表解決方案的核心庫(kù)，其主要能力是支持符合 JSON Schema 標(biāo)準(zhǔn)的數(shù)據(jù)自動(dòng)渲染列表內(nèi)容。
• drip-table-generator：一個(gè)可視化的用于 DripTable 配置 JSON Schema 標(biāo)準(zhǔn)的配置數(shù)據(jù)的生成工具。

優(yōu)勢(shì)

• 高效開(kāi)發(fā)：提高前端列表開(kāi)發(fā)效率，實(shí)現(xiàn) Lowcode 方式快速開(kāi)發(fā)列表頁(yè)。
• 配置化渲染：以簡(jiǎn)單的 JSON Schema 配置字段，自動(dòng)渲染處所需要的列表，降低用戶使用成本。
• 動(dòng)態(tài)可擴(kuò)展：支持自定義組件開(kāi)發(fā)，通過(guò)API快速生成自定義的或者實(shí)現(xiàn)業(yè)務(wù)功能的單元格組件。
• 界面框架自由：表格界面框架支持多種主題包，另外還支持自定義主題包。

何時(shí)使用

• 用于中后臺(tái) CMS 列表頁(yè)的快速搭建，通過(guò)簡(jiǎn)單 JSON Schema 數(shù)據(jù)即可生成列表，無(wú)需硬編碼。
• 用于 Lowcode 列表搭建的前端 Table 預(yù)覽以及實(shí)現(xiàn)，無(wú)需復(fù)雜前端代碼，便可實(shí)現(xiàn)自定義的列表。

開(kāi)始使用

DripTable 分為兩種應(yīng)用場(chǎng)景：配置端和應(yīng)用端。配置端主要負(fù)責(zé)通過(guò)可視化方式和 low-code 方式進(jìn)行 JSON Schema 標(biāo)準(zhǔn)數(shù)據(jù)的生成。應(yīng)用端的職能則是將 JSON Schema 標(biāo)準(zhǔn)配置數(shù)據(jù)渲染成動(dòng)態(tài)列表。

配置端

1 安裝依賴

配置端依賴應(yīng)用端，安裝前先確保已安裝 drip-table。

「yarn」

yarnadddrip-table-generator

「npm」

npminstall--savedrip-table-generator

2 在文件開(kāi)頭引入依賴

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

3 在頁(yè)面中引用

return;

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

1 安裝依賴

安裝 drip-table：

「yarn」

yarnadddrip-table

「npm」

npminstall--savedrip-table

2 在文件開(kāi)頭引入依賴

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

3 引用

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

);

應(yīng)用端正常渲染效果如下：

開(kāi)源地址

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