本文展示了 schedulejs 在外部第三方表格组件:著名的 ag-grid 中的集成。目标是展示 schedulejs 集成到表组件中时的灵活性。
集成用例
我们发现了一些使用 ScheduleJS 开发调度组件的公司已经使用内部或第三方开发的表的情况。我们决定开展这个概念验证项目来演示一个场景,在该场景中,我们的用户选择利用他们的实际解决方案并使他们的 ScheduleJS 应用程序无缝集成到他们的环境中。这种方法的关键是能够重用公司花时间开发的功能。
高级树表实现
在ScheduleJS中,树形表格是经常放置在图形左侧的组件。它的作用是为最终用户提供有关给定行的附加信息,并提供与数据交互的工具。 ScheduleJS 提出了一个标准的集成树表组件,您可以在其中自定义列标题和行单元格,为最终用户创建完美的布局。这个标准的信息列 API 旨在为开发人员提供一个简单但功能强大的工具,以涵盖公司在调度应用程序中可能遇到的大多数用例。
当将 ScheduleJS 图形作为外部表组件的子组件托管时,我们能否达到相同的可用性?
将 ScheduleJS 集成为子组件
图形将复杂的数据呈现为可读的输出,以便用户可以快速收集信息并与描述性图形视图进行交互。 Web 应用程序在其架构的核心使用表格组件是很常见的。
AG-Grid 已被我们的开发人员确定为此练习的良好候选者,因为一致的公司池使用此组件来开发他们的表格。
以下概念验证将 AG-Grid 开箱即用功能与 ScheduleJS 图形可读性结合起来。
结果
对于此实现,我们决定选择 AG-Grid 表组件的开源版本,即使在商业项目中也是免版税的。
下面的视频展示了它在我们的开发环境中的功能:
想看最终结果的视频可以去看:ScheduleJS
与默认树表相比,得到的附加功能如下:
- 将特定列固定在 ScheduleJS 图形的最右侧和最左侧部分的选项
- 修改任何列的水平顺序的选项,包括 ScheduleJS 图形
- 能够调整任何列的大小,包括 ScheduleJS 图形
- 能够从 AG-Grid 单元触发行展开和折叠功能
- 能够使用AG-Grid集成过滤功能,影响ScheduleJS图形
本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除
码农资源网 » 将 ScheduleJS 集成到 AG-Grid 中