使用 LWC 展示层级 JSON 数据为树形结构

本文介绍了如何在 Lightning Web Components (LWC) 中，不依赖 lightning-tree 组件，将层级结构的 JSON 数据以树形结构展示出来。我们将探讨如何利用 JavaScript 库来实现数据的可视化，并提供一些常用的 JSON 树形展示库供参考。

在 LWC 中展示层级 JSON 数据，虽然 lightning-tree 组件是一个选择，但在某些情况下，你可能需要更灵活的控制或自定义选项。这时，利用现有的 JavaScript 库可以提供一个高效的解决方案。

选择合适的 JavaScript 库

有许多 JavaScript 库可以帮助你将 JSON 数据转换为可折叠的树形结构。 以下是一些常用的库：

• jsTree: 一个功能强大且灵活的 jQuery 树形插件，支持各种特性，如拖放、搜索和自定义图标。
• Dynatree: 另一个流行的 jQuery 树形插件，提供类似 jsTree 的功能，并具有一些额外的特性，如延迟加载和复选框支持。
• JSON Formatter: 一个轻量级的库，专门用于格式化和显示 JSON 数据，包括树形视图。
• react-json-view: 如果你的 LWC 项目中使用了 React，那么这个库是一个不错的选择，它可以轻松地将 JSON 数据渲染为交互式的树形结构。

选择哪个库取决于你的具体需求和偏好。你需要考虑的因素包括：

• 功能需求: 库是否支持你需要的特性，如拖放、搜索、自定义图标等？
• 性能: 库的性能如何？它是否能处理大型 JSON 数据集？
• 易用性: 库是否易于使用和配置？
• 依赖关系: 库是否有大量的依赖关系？

示例：使用 jsTree 在 LWC 中展示 JSON 数据

以下示例演示了如何使用 jsTree 库在 LWC 中展示 JSON 数据。

DeepSeek

幻方量化公司旗下的开源大模型平台

7087

查看详情

1. 引入 jsTree 库:

   首先，你需要将 jsTree 库添加到你的 LWC 项目中。你可以通过静态资源引入，或者使用 npm 安装并导入。 这里我们演示使用静态资源。
   将 jsTree 的 CSS 和 JavaScript 文件上传到 Salesforce 的静态资源。假设你创建了名为 jstree 的静态资源，其中包含 jstree.min.js 和 themes/default/style.min.css。

2. LWC 组件代码:

   <!-- myTreeComponent.html -->
   <template>
   <lightning-card title="JSON Tree">
   <div class="slds-p-around_medium">
   <div lwc:dom="manual" class="tree-container"></div>
   </div>
   </lightning-card>
   </template>

   // myTreeComponent.js
   import { LightningElement, track, wire } from 'lwc';
   import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
   import jsTree from '@salesforce/resourceUrl/jstree';
   import { ShowToastEvent } from 'lightning/platformShowToastEvent';
   export default class MyTreeComponent extends LightningElement {
   @track isJsTreeInitialized = false;
   renderedCallback() {
   if (this.isJsTreeInitialized) {
   return;
   }
   this.isJsTreeInitialized = true;
   Promise.all([
   loadStyle(this, jsTree + '/themes/default/style.min.css'),
   loadScript(this, jsTree + '/jstree.min.js'),
   ])
   .then(() => {
   // JSON 数据
   const jsonData = [
   {
   "label": "Lauren Boyle",
   "name": "Lauren Boyle",
   "expanded": true,
   "items": [
   {
   "label": "Banoth Srikanth",
   "name": "Banoth Srikanth",
   "expanded": true,
   "items": [
   {
   "label": "Stella Pavlova",
   "name": "Stella Pavlova",
   "expanded": true,
   "items": []
   }
   ]
   },
   {
   "label": "Srikanth",
   "name": "Srikanth",
   "expanded": true,
   "items": []
   }
   ]
   }
   ];
   // 将 JSON 数据转换为 jsTree 格式
   const treeData = this.convertJsonToJsTree(jsonData);
   // 初始化 jsTree
   $(this.template.querySelector('.tree-container')).jstree({
   'core': {
   'data': treeData
   }
   });
   })
   .catch(error => {
   this.dispatchEvent(
   new ShowToastEvent({
   title: 'Error loading jsTree',
   message: error.message,
   variant: 'error',
   })
   );
   });
   }
   convertJsonToJsTree(jsonData) {
   let tree = [];
   jsonData.forEach(node => {
   let treeNode = {
   text: node.label,
   state: {
   opened: node.expanded
   },
   children: node.items ? this.convertJsonToJsTree(node.items) : []
   };
   tree.push(treeNode);
   });
   return tree;
   }
   }

   说明:

   • @salesforce/resourceUrl/jstree 用于引用静态资源 jstree。
   • loadScript 和 loadStyle 用于异步加载 jsTree 的 JavaScript 和 CSS 文件。
   • renderedCallback 方法在组件渲染完成后执行，用于初始化 jsTree。
   • jsonData 是你要展示的 JSON 数据。
   • convertJsonToJsTree 函数将你的 JSON 数据转换为 jsTree 期望的格式。 jsTree 期望的格式是每个节点都有 text (显示的文本), state (状态，如是否展开) 和 children (子节点)。
   • $(this.template.querySelector(‘.tree-container’)).jstree({…}) 初始化 jsTree。注意这里使用了 jQuery，需要在 LWC 中使用 jQuery。

3. 注意事项:

   • 确保已经正确上传了 jsTree 的 CSS 和 JavaScript 文件到静态资源。
   • 需要在 LWC 中使用 jQuery。
   • lwc:dom=”manual” 指令允许你直接操作 DOM。
   • 需要将 JSON 数据转换为 jsTree 期望的格式。

总结

通过使用 JavaScript 库，你可以灵活地在 LWC 中展示层级 JSON 数据为树形结构，而无需依赖 lightning-tree 组件。 选择合适的库并根据你的需求进行配置，可以创建出功能强大且用户友好的树形视图。 在实际应用中，你可能需要根据具体情况进行调整和优化，例如添加错误处理、自定义样式等。