本文介绍了如何在 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 数据。
-
引入 jsTree 库:
首先，你需要将 jsTree 库添加到你的 LWC 项目中。你可以通过静态资源引入，或者使用 npm 安装并导入。 这里我们演示使用静态资源。 将 jsTree 的 CSS 和 JavaScript 文件上传到 Salesforce 的静态资源。假设你创建了名为 jstree 的静态资源，其中包含 jstree.min.js 和 themes/default/style.min.css。
-
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。
-
注意事项:
- 确保已经正确上传了 jsTree 的 CSS 和 JavaScript 文件到静态资源。
- 需要在 LWC 中使用 jQuery。
- lwc:dom="manual" 指令允许你直接操作 DOM。
- 需要将 JSON 数据转换为 jsTree 期望的格式。
总结
通过使用 JavaScript 库，你可以灵活地在 LWC 中展示层级 JSON 数据为树形结构，而无需依赖 lightning-tree 组件。 选择合适的库并根据你的需求进行配置，可以创建出功能强大且用户友好的树形视图。 在实际应用中，你可能需要根据具体情况进行调整和优化，例如添加错误处理、自定义样式等。
