以最有效的方式在浏览器中表示大型组织结构的最佳方式答案

【问题标题】：The best way to represent big organizational structure in browser in the most efficient way以最有效的方式在浏览器中表示大型组织结构的最佳方式
【发布时间】：2020-12-23 19:41:24
【问题描述】：

同事们！我们正在开发一个 Web 应用程序，该应用程序具有表示当前组织（例如银行）的组织结构的功能。组织结构表示为父子关系，其中每个节点只有一个父节点，每个父节点可能有零个或多个子节点。当实体（orgUnits）的数量比较少时，大约 500 个实体，我们的旧方法运行良好。通常，我们使用递归来获取所有父子实体，并将其作为 JSON 文档传递给浏览器，前端部分会解析该文档并将其呈现给用户。当我们上传另一个组织（另一家银行）的组织结构并且有 6000 个活跃的 orgUnits 时，问题就开始了。显然，获取所有 orgUnits 不是一种选择。我们开始使用请求参数 depth 来控制递归级别，但它并没有解决获取子实体的问题，因为每个父级可以有一个或多个子级。例如，我们有一个父 orgUnit，它有 100 个孩子，并且这个孩子中的任何一个都可以有一个或多个孩子。即使没有必要，此方法也会加载此级别的所有 orgUnit。现在，我正在寻找能够使每个 HTTP 请求的 orgUnit 数量保持相对较小并且浏览器在呈现时不会冻结的解决方案。我的想法很简单：

以某种方式对结果进行分页；
仅在用户需要时返回额外的子 orgUnit；

我们的 OrgUnitDTO 如下所示：

{
  "id": "a4f51de5-36f3-258c-232d-3d617c07fefc",
  "extId": null,
  "type": "OrgUnit",
  "orgId": "99beadc8-831a-f6ab-fee9-11143d43ccd1",
  "parentId": "99beadc8-831a-f6ab-fee9-11143d43ccd1",
  "code": "second-level-test-department",
  "name": "name",
  "note": "note",
  "manager": null,
  "children": [], // children property has objects of the same type
  "createdBy": "userName",
  "updatedBy": "userName",
  "createdAt": "2020-09-04T06:23:53.793Z",
  "updatedAt": "2020-09-04T06:23:53.795Z",
  "sortOrder": 0,
  "isManager": false
}

这就是它在 GUI 中的样子： screenshot

我也在寻找您对后端和前端的建议！

如果重要，我们使用 Spring-Boot 和 Hibernate。

【问题讨论】：

标签： json spring spring-boot rest web

【解决方案1】：

这与使用的框架或技术无关。您的问题更多的是关于解决方案。

经验法则：人类一次只能与少量数据交互，因此不要获取或显示大量数据，既无用又缓慢。

我过去处理过类似的问题，也是这样解决的，不过当然也可能有更好的解决方案：

我创建了一个后端函数，客户端可以调用它来填充第一次加载的页面，这样您就可以从一个节点开始使用整数参数（即 2 或 3）获取前 N 级深度树（如果要从顶部开始，则为 null）。
我添加了一个搜索功能（在 FE 和 BE 上），让用户立即跳转到他已经知道的位置（即员工姓名）：该函数仅返回组成节点的 JSON建立的节点的路径。其他节点可以用 [+] 按钮或类似的东西来扩展，只是为了在输出数据时超快和简洁。通常，如果您在组织结构图中搜索一个人，您想立即知道谁是他的老板，而不是别的。
在我的情况下，每个节点的子节点并不多，所以我没有在此处进行优化，但在您的情况下，如果同一级别有超过 X 个子节点，则可以通过分页实现延迟加载数据。您可以使用 \/ 图标在用户单击时加载更多节点，也可以在用户向下滚动页面时自动加载。它是由你决定。您还可以决定分页后要加载的节点数。您可以使其具有响应性，如果屏幕有空间显示它们，您可以加载更多节点。
要打开每个后续节点，仅当用户单击 [+] 时调用您在第一页加载时使用的函数，将当前节点 ID 和 1 作为参数传递以指定您只需要多一层。
为了实现 FE 部分，我使用了 jstree 和 jstreegrid。

一般提示：先选择FE零件库，再创建后端函数，这样会更容易，重构也更少。

【讨论】：