序言水珠报表Drip Table 1

序言

水珠报表Drip Table 1.0版本号做为水滴平台的核心竞争力之一，现阶段已经在京东公司级中后台管理系统中广泛运用，但在实际应用中仍发现一些必须改善的目标和难题。因此精英团队从8月份逐渐筹划更新，迄今四个月，总算发布Drip Table 2.0版本号，包括制作器互动更新，底层架构提升、新增加表格编辑水平、新增加转换信用卡规划布局数据可视化构建水平提高等。以实现1.0版本号无成本费更新，在京东内部得到一致好评。感激在这段时间每一位给予意见反馈、提议及其奉献得人！下边把 2.0版本号关键的新增工作中在这里例举，具体修改内容也可以浏览官方网站（drip-table.jd.com）、Demo（drip-table.jd.com/demo/）和Github（github.com/JDFED/drip-…）。

主要内容

一、制作器互动更新

秉着用户至上和美观大方规范有序标准，将网页布局调整至前后左右合理布局，详略得当了报表的工作区域，提高了信息资源管理效率。除此之外，左右两个栏根据抽屉柜方式适用进行和掩藏，这样既能保证了客户操控的便利性又确保了网页页面作用的一致性。随后，制作器的上面一栏还此外增加了一条菜单栏，用户可运用这些工具迅速配备常见的报表配置项，做到简单实用效果。

此次更新实际所涉及到的修改关键如下所示：

1. 在构建流程的互动上，大家使用了拖拽式互动，大大简化了客户实际操作，更符合客户使用生活习惯。此外，报表工作区域直接地展现出报表，而且允许用户立即根据报表开展编写实际操作完成眼见为实。

2. 新版本制作器放弃了原先使用的情况管理工具，继而运用 React Context 完成属性传送和状态管理。改善了制作器性能，提升了代码质量和可扩展性。

3. 改善了组成部件构建流程及交互技术。之前客户务必选定组成元件的某一子合理布局然后去挑选添充的子组件。如今仅需轻轻地拖动，随后放进相对应的部位就可以，大大的便捷用户组成部件构建表格中具体内容的操作方式。

二、底层架构提升

Drip Table 1.0 版本号应用 Drip Design 做为底层驱动。Drip Design 做为组件库具备部件诸多，特性配备健全，功能齐全等优点和益处，因为当时成为我们底层驱动的不二之选。而后来随着 Drip Table 对相关业务系统软件或是适用场景支撑实力的不断扩展，我们不难发现 Drip Table 只用了这其中的报表部件及其极少的其他一些部件，这个就白白浪费许多作用，并且也无形之中装上许多依靠。假如使用人不能使用 Drip Design 当作工程项目的组件库，易造成全局性款式环境污染，这对他而言是十分不友善。此外，人们遭遇一些繁杂的定做的需求场景，就目前的作用不能满足其要求，没法支撑点其业务。

根据以上因素，我决定重新写过报表底层驱动，开展产品升级，选用 React Component 做为底层驱动。通过一个月的梳理与重新写过，大家实现了底层驱动更新，Drip Table 2.0 彻底根据一个新的底层架构完成。克服了依靠太大、全局性环境污染等诸多问题，规范了虚似目录的功能和提升了其性能，给大家带来了更友善的交互方式和使用感受。此外，根据新技术架构设计后面比较容易开展作用拓展，不会受到外界框架的管束。

新版本 Drip Table 架构如下所示：

三、报表核心能力

1、新增加编辑工具

表格编辑做为在实际应用中较为高频率的一种适用场景，尤其是在中后台需求场景中常会要用到，都是 Drip Table 客户呼吁相对较高的作用之一。但由于完成难度很大，而且受制于 Drip Table 1.0 架构不够完善，没法支撑点编写水平，因此在实现了架构设计升级后，咱们就着手根据 rc-table 可编辑表格的研发，如今它真的来了。

大家提供了丰富的部件来支撑表格中的编辑，包含文本框、选择框、日期选择符这些，后边大家还会拓展。最主要的是，我们自己的编写态是关联在表格中部件中，这也就是说，开发人员还可以在拓展部件中可设置编辑状态来拓展我们自己的编写水平，乃至能通过自定的业务组件来支撑修改代码。

2、子表格作用

表中能够嵌入子表格，无尽嵌入下来。包括子表格是不是默认设置进行、子表格首尾扩展槽等服务。

3、拖动行作用

还增加了行拖动的功效，允许用户根据数据可视化拖动方法改动行数据信息。

4、固定不动队伍作用

能设第一行固定不动，也能设某列左或是右固定不动。

四、新增加信用卡合理布局

为了能拓展 Drip Table 能力，满足更多的需求场景，给予丰富多样的展示方式，大家提供了新的列表展示方式--信用卡合理布局。相对于传统报表，卡片设计目录具备更真实的视觉视觉效果，将信息分层进而突出主题，概述性很强有利于开展数据对比分析。

Drip Table 的信用卡规划布局传统式报表合理布局重复使用同一套 JSON Schema， 客户不用此外重新配置，还提供了一键切换合理布局，适用多种多样业务流程展现情景，提升了报表的视觉视觉效果。此外，Drip Table 还能够对于信用卡合理布局开展个性化配备，在完全不受影响报表展现的情形下，对信用卡的视觉效果进行进一步加工和装饰。例如，信用卡合理布局适用设定每排较多展现的信用卡数以融入不同类型的分辩率。实际配备详细信息可以参考一下官方文档：drip-table.jd.com/drip-table/…。

五、构建水平提高

在需求场景下，我们常常碰到在表中展现下拉选择框、日期展现及其实际操作栏内点一下弹出窗口的现象。因此此次，Drip Table 2.0 增加了下拉列表、日期、网页页面弹窗等基础组件，带来更多的作用，充实了组件库：

部件适用自定列头自定配备，可以直接在属性栏中纳入HTML精彩片段，充实了页眉展示方式：

最终，此次更新全局配置，大家加了适用冻洁页眉、荧光色等配置，进一步提升 Drip Table 综合配备水平，为大家带来了更强以更有价值的LowCode表格生成器：

汇总

Drip Table 2.0 的成功发版离不了团队人员贡献，也离不开小区参加者和使用人对咱们大力支持，及其每一个参加协助开发和提出建议得人。就是你们的一点一滴汇成美好的 Drip Table。

你如果对 Drip Table 有兴趣，欢迎你来 Drip Table 官方网站（drip-table.jd.com/）看一下，或是浏览Drip Table Github 库房（github.com/JDFED/drip-…）Star和Fork，我们也很希望各位小伙伴们前去贡献自己的一份力量。

有关网络资源

• Drip Form（jdfed.github.io/drip-form/）: 根据React和JSONSchema动态化表格解决方法

• MicroApp（micro-zoe.github.io/micro-app/）: 一款轻巧、高效率、功能强大微前端ui框架

文中已经参与「 . 」