本文介绍了如何在 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 组件。 选择合适的库并根据你的需求进行配置，可以创建出功能强大且用户友好的树形视图。 在实际应用中，你可能需要根据具体情况进行调整和优化，例如添加错误处理、自定义样式等。