上一篇
如何生成LigerTree JSON？LigerTree树形结构json格式详解
LigerUI（通常简称为 ligerTree）是一个基于 jQuery 的 UI 组件库，其树形控件（ligerTree）在渲染数据时，对 JSON 数据的结构有特定的要求，为了生成兼容 ligerTree 的 JSON 数据，我们需要理解其核心字段映射关系以及嵌套逻辑。
核心数据结构解析
ligerTree 默认期望接收一个包含 id、text 和 children 字段的对象数组，以下是各字段的详细说明：
| 字段名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| id | String/Number | 是 | 节点的唯一标识符，用于标识节点，通常对应数据库中的主键。 |
| text | String | 是 | 节点显示的文本内容，通常对应数据库中的名称或标题字段。 |
| children | Array | 否 | 子节点数组，如果节点是叶子节点，此字段可省略或为空数组。 |
| url | String | 否 | 可选字段，用于指定点击节点时跳转的链接。 |
| icon | String | 否 | 可选字段，用于指定节点前的图标样式。 |
数据库到 JSON 的映射逻辑
在实际开发中,数据库通常采用自引用表结构（即包含 id 和 parent_id 的扁平结构），生成 ligerTree 所需的嵌套 JSON 需要经过以下步骤：
- 数据查询：从数据库中查询所有树形节点数据。
- 数据转换：将扁平的列表数据转换为嵌套的树形结构。
- 字段映射：确保每个节点对象包含 id 和 text 字段。
示例：数据库表结构
假设我们有一张分类表 category：
| id (INT) | name (VARCHAR) | parent_id (INT) |
|---|---|---|
| 1 | 电子产品 | 0 |
| 2 | 手机 | 1 |
| 3 | 电脑 | 1 |
| 4 | iPhone | 2 |
| 5 | Android | 2 |
生成的 ligerTree JSON 数据
经过转换后,生成的 JSON 数据如下：
[ { "id": 1, "text": "电子产品", "children": [ { "id": 2, "text": "手机", "children": [ { "id": 4, "text": "iPhone" }, { "id": 5, "text": "Android" } ] }, { "id": 3, "text": "电脑" } ] } ]
注意事项
- 唯一性：id 字段必须在整个树结构中唯一，否则 ligerTree 可能无法正确识别节点状态。
- 空值处理：如果某个节点没有子节点，children 字段可以省略， ligerTree 会自动将其识别为叶子节点。
- 异步加载：如果数据量较大，建议采用异步加载方式，JSON 结构中只需包含 id 和 text，并在 ligerTree 配置中设置 url 或 onSelect 事件来动态获取子节点数据。
相关问题与解答
问题 1：如果数据库中的节点没有直接的父子关系字段，而是通过路径字符串存储（如 “1/2/3″），如何生成 ligerTree 数据？
解答：
在这种情况下，首先需要解析路径字符串，构建出节点的层级关系，可以通过以下步骤实现：
- 遍历所有节点,根据路径字符串拆分出层级 ID。
- 使用一个字典（Map）来存储已创建的节点对象，键为节点 ID，值为节点对象。
- 对于每个节点,解析其路径，找到其父节点，如果父节点存在，则将当前节点添加到父节点的 children 数组中；如果父节点不存在（即为根节点），则将当前节点添加到根节点数组中。
- 返回根节点数组即可。
问题 2：ligerTree 是否支持在 JSON 中自定义节点的其他属性（如颜色、自定义图标）？
解答：
是的，ligerTree 支持在 JSON 中自定义其他属性，除了标准的 id、text 和 children 字段外，你可以在 JSON 对象中添加任意自定义字段，icon、url、css 等，在 ligerTree 的配置中，可以通过 onSelect 或 onBeforeExpand 等事件回调函数访问这些自定义属性，并根据需要进行样式调整或逻辑处理，可以在 JSON 中添加 "icon": "custom-icon-class"，然后在 ligerTree 的配置中设置 iconField: "icon"，即可应用自定义图标。
