DripTable 是京東零售推出的一款用于企業(yè)級中后臺的動態(tài)列表解決方案，項目基于 React 和 JSON Schema，旨在通過簡單配置快速生成頁面動態(tài)列表來降低列表開發(fā)難度、提高工作效率。
DripTable 目前包含以下子項目：drip-table、drip-table-generator。
各個子項目具體介紹如下：
drip-table：動態(tài)列表解決方案的核心庫，其主要能力是支持符合 JSON Schema 標準的數(shù)據(jù)自動渲染列表內(nèi)容。
drip-table-generator：一個可視化的用于 DripTable 配置 JSON Schema 標準的配置數(shù)據(jù)的生成工具。
? 文章來源：http://www.zghlxwxcb.cn/news/detail-624076.html
優(yōu)勢
-
高效開發(fā)：提高前端列表開發(fā)效率，實現(xiàn) Lowcode 方式快速開發(fā)列表頁。
-
配置化渲染：以簡單的 JSON Schema 配置字段，自動渲染處所需要的列表，降低用戶使用成本。
-
動態(tài)可擴展：支持自定義組件開發(fā)，通過API快速生成自定義的或者實現(xiàn)業(yè)務(wù)功能的單元格組件。
-
界面框架自由：表格界面框架支持多種主題包，另外還支持自定義主題包。
何時使用
用于中后臺 CMS 列表頁的快速搭建，通過簡單 JSON Schema 數(shù)據(jù)即可生成列表，無需硬編碼。
用于 Lowcode 列表搭建的前端 Table 預(yù)覽以及實現(xiàn)，無需復(fù)雜前端代碼，便可實現(xiàn)自定義的列表。
開始使用
DripTable 分為兩種應(yīng)用場景：配置端和應(yīng)用端。配置端主要負責(zé)通過可視化方式和 low-code 方式進行 JSON Schema 標準數(shù)據(jù)的生成。應(yīng)用端的職能則是將 JSON Schema 標準配置數(shù)據(jù)渲染成動態(tài)列表。
配置端
1 安裝依賴
配置端依賴應(yīng)用端，安裝前先確保已安裝 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?/>;??
配置端正常渲染效果如下：
?
應(yīng)用端
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={[]}??
??/>??
);??
應(yīng)用端正常渲染效果如下：
?
開源地址
github.com/JDFED/drip-table文章來源地址http://www.zghlxwxcb.cn/news/detail-624076.html
到了這里，關(guān)于京東開源的、高效的企業(yè)級表格可視化搭建解決方案：DripTable的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
