简介

DripTable，是由京东零售iPaaS前端研发团队推出的一种通过LowCode方式搭建web列表的技术方案。

这款轻量简单的企业级中后台动态列表生成解决方案，基于 React 和 JSON Schema，旨在通过简单配置快速生成页面动态列表来。

可视化搭建列表，降低列表开发难度、提高工作效率、节约开发人力和资源。

DripTable分为两个部分：

• drip-table：动态列表解决方案的核心库，其主要能力是支持符合 JSON Schema 标准的数据自动渲染列表内容。
• drip-table-generator：一个可视化的用于 DripTable 配置 JSON Schema 标准的配置数据的生成工具。

虽然是两个部分，但它们是相辅相成的。根据上面的介绍，一个是渲染数据，另一个是可视化配置的。下面我们举两个例子来看下。

drip-table安装和使用

先来看drip-table，这是用来渲染数据到列表中的。

首先注意下环境要求

Node >= 10.14.0
React >= 16.9.0

安装

安装前，确保drip-table所依赖React已经安装完毕。

npm install --save drip-table

基本使用

先引入相关的依赖

import React from 'react';
import DripTable from 'drip-table';
import 'drip-table/dist/index.min.css';

接着就可以创建组件实例

export default Demo = () => {
  return (
    <DripTable
      schema={schema}
      dataSource={dataSource}
    />
  );
};

这里的重点是schema--它用来约束了表格的结构定义。我们来看个例子。

const schema = {
  size: "middle",
  pagination: {
    pageSize: 10,
    position: "bottomRight",
  },
  columns: [
    {
      key: "mock_1",
      title: "商品名称",
      dataIndex: "name",
      component: "text",
      options: {
        mode: "single",
        maxRow: 1,
      },
    },
    {
      key: "mock_2",
      title: "商品详情",
      align: "center",
      dataIndex: "description",
      component: "text",
      options: {
        mode: "single",
        ellipsis: true,
        maxRow: 1,
      },
    },
    {
      key: "mock_3",
      title: "库存状态",
      dataIndex: "status",
      description: "这是一条提示信息",
      component: "text",
      options: {
        mode: "single",
        i18n: {
          onSale: '售卖中',
          soldOut: '已售罄',
        },
      },
    },
    {
      key: "mock_4",
      title: "商品价格",
      width: 80,
      dataIndex: "price",
      component: "text",
      options: {
        mode: "single",
        prefix: "￥",
      },
    },
    {
      key: "mock_5",
      title: "操作",
      width: 118,
      dataIndex: "operate",
      component: "link",
      options: {
        mode: "multiple",
        operates: [
          { name: "order", label: "预定", href: "./#order", target: "_blank" },
          { name: "view", label: "查看", href: "./#view" },
          { name: "remove", label: "删除", href: "./#remove" },
        ],
      },
    },
  ],
};

// 这是表格的数据
const dataSource = [
  {
    id: 1,
    name: "商品一",
    description:
      "商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。",
    status: "onSale",
    price: 7999,
  },

看下效果

这部分的内容和antd、elementui中的表格很像，大家理解起来应该没难度。

drip-table-generator安装和使用

好啦！接下来说说drip-table-generator。根据名称，我们知道这是drip-table的生成器--可视化和 low-code 方式进行 JSON Schema 标准数据的生成

drip-table的schema太复杂，我们可能记不住这么多。那怎么办？drip-table-generator能搞定！

安装依赖

drip-table-generator 依赖 antd、drip-table 和 react，单独使用不要忘记安装～

yarn add drip-table-generator

使用

先依赖引入

import DripTableGenerator from 'drip-table-generator';
import 'drip-table-generator/dist/index.min.css';

接着，页面引入生成器即可

<DripTableGenerator />

然后就得到这个页面

点击?就可以配置列表了。

可视化选项，要什么选什么。选好了，点击配置编辑，就能看到JSON schema是什么样的了。然后，ctrl + c 和 ctrl + v就可以使用啦！

DripTable优势和使用场景

优势

• 高效开发：提高前端列表开发效率，实现 Lowcode 方式快速开发列表页。
• 配置化渲染：以简单的 JSON Schema 配置字段，自动渲染处所需要的列表，降低用户使用成本。
• 动态可扩展：支持自定义组件开发，通过API快速生成自定义的或者实现业务功能的单元格组件。
• 界面框架自由：表格界面框架支持多种主题包，另外还支持自定义主题包。

使用场景

但凡涉及到列表需求的都可以用它。

列表页的快速搭建，可以通过简单 JSON Schema 数据即可生成，无需硬编码。

用于 Lowcode 列表搭建的前端 Table 预览以及实现，无需复杂前端代码，便可实现自定义的列表。

当然，这里也只是入门介绍了DripTable的使用。更多详情，大家可以参阅官方文档。

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

官网地址：http://drip-table.jd.com