[]
在图文列表中使用JSON数据源模式，可以方便的设置图文列表的嵌套，完美地将其结构数据化，并轻松实现视觉上的嵌套。
下面以如下的“学习资源”目录为例，介绍如何在图文列表中使用JSON数据源模式，进行图文列表的嵌套。
操作步骤
1.在页面中，选择单元格区域，设置单元格类型为图文列表，并选择一个单元格样式。
2.数据绑定。选择“绑定JSON数据源”，然后单击“设置JSON数据源的列”。
3.在设置JSON数据源的列对话框中，单击下发的“设置示例JSON文本自动生成列”，然后输入要解析的JSON字符串。
↓
其中，资源节数组后有个
图标，单击此图标，弹出对话框，显示资源节数组的子节点。
单击资源数组后的图标，弹出对话框，显示资源数组的子节点。
4.编辑模板。在右侧单元格设置中单击“编辑模板”，在模板页面进行设计，绑定关联列。
①选择单元格区域，添加一个文本，设置关联列为“章节名称”。
②选择单元格区域，添加一个图文列表，设置关联列为“资源节数组”，然后单击“编辑模板”。
③在模板页中，选择单元格区域，添加一个文本，设置关联列为“章节名称”。
④再选择单元格区域，添加一个图文列表，设置关联列为“资源数组”，然后单击“编辑模板”。
⑤选择单元格区域，添加一个文本，设置关联列为“资源名称”。
5.回到父页面，设置图文列表单元格的值为指定的JSON字符串。
6.设置完成，运行页面。
示例的JSON字符串如下：
[ { "章节ID": "course-chapter20250707162732-001", "章节名称": "第1章 AI与AI智能体", "资源节数组": [ { "章节ID": "course-chapter20250707162732-002", "章节名称": "AI与AI智能体", "资源数组": [ { "章ID": "course-chapter20250707162732-001", "节ID": "course-chapter20250707162732-002", "资源ID": "course-chapter-resource-20250707-001", "资源名称": "1.1 课程介绍" }, { "章ID": "course-chapter20250707162732-001", "节ID": "course-chapter20250707162732-002", "资源ID": "course-chapter-resource-20250707-002", "资源名称": "1.2 什么是AI" }, { "章ID": "course-chapter20250707162732-001", "节ID": "course-chapter20250707162732-002", "资源ID": "course-chapter-resource-20250707-003", "资源名称": "1.3 AI发展简史" }, { "章ID": "course-chapter20250707162732-001", "节ID": "course-chapter20250707162732-002", "资源ID": "course-chapter-resource-20250707-004", "资源名称": "1.4 生成式AI与判别式AI" }, { "章ID": "course-chapter20250707162732-001", "节ID": "course-chapter20250707162732-002", "资源ID": "course-chapter-resource-20250707-005", "资源名称": "1.5 什么是AI智能体" }, { "章ID": "course-chapter20250707162732-001", "节ID": "course-chapter20250707162732-002", "资源ID": "course-chapter-resource-20250707-006", "资源名称": "1.6 AI智能体是如何构成的" }, { "章ID": "course-chapter20250707162732-001", "节ID": "course-chapter20250707162732-002", "资源ID": "course-chapter-resource-20250707-007", "资源名称": "1.7 AI智能体是如何开发出来的" }, { "章ID": "course-chapter20250707162732-001", "节ID": "course-chapter20250707162732-002", "资源ID": "course-chapter-resource-20250707-008", "资源名称": "1.8 为什么要对AI智能体做分级" }, { "章ID": "course-chapter20250707162732-001", "节ID": "course-chapter20250707162732-002", "资源ID": "course-chapter-resource-20250707-009", "资源名称": "1.9 AI智能体分级示例" }, { "章ID": "course-chapter20250707162732-001", "节ID": "course-chapter20250707162732-002", "资源ID": "course-chapter-test-20250707-001", "资源名称": "第1章 测验" } ], "章ID": "course-chapter20250707162732-001" } ] }, { "章节ID": "course-chapter20250707162732-012", "章节名称": "第2章 构建你的第一个AI智能体", "资源节数组": [ { "章节ID": "course-chapter20250707162732-013", "章节名称": "构建你的第一个AI智能体", "资源数组": [ { "章ID": "course-chapter20250707162732-012", "节ID": "course-chapter20250707162732-013", "资源ID": "course-chapter-resource-20250707-010", "资源名称": "2.1 需求分析与技术可行性验证" }, { "章ID": "course-chapter20250707162732-012", "节ID": "course-chapter20250707162732-013", "资源ID": "course-chapter-resource-20250707-011", "资源名称": "2.2 方案设计" }, { "章ID": "course-chapter20250707162732-012", "节ID": "course-chapter20250707162732-013", "资源ID": "course-chapter-resource-20250707-012", "资源名称": "2.3 开发LLM调用单元" }, { "章ID": "course-chapter20250707162732-012", "节ID": "course-chapter20250707162732-013", "资源ID": "course-chapter-resource-20250707-013", "资源名称": "2.4 开发前端交互（表单式）" }, { "章ID": "course-chapter20250707162732-012", "节ID": "course-chapter20250707162732-013", "资源ID": "course-chapter-resource-20250707-014", "资源名称": "2.5 开发周边功能" }, { "章ID": "course-chapter20250707162732-012", "节ID": "course-chapter20250707162732-013", "资源ID": "course-chapter-resource-20250707-015", "资源名称": "2.6 部署与运维" }, { "章ID": "course-chapter20250707162732-012", "节ID": "course-chapter20250707162732-013", "资源ID": "course-chapter-test-20250707-002", "资源名称": "第2章 测验" } ], "章ID": "course-chapter20250707162732-012" } ] } ]
