使用 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 数据。

ModelScope

魔搭开源模型社区旨在打造下一代开源的模型即服务共享平台

下载

1. 引入 jsTree 库:

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

2. LWC 组件代码:

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