前面我们以国家为例，介绍了如何使用数组型数据字典。在这里，我们以城市为例，介绍如何使用树型数据字典

由于选择的国家不同，所使用的城市数据字典也就不同，也就存在国家和城市的数据联动。基于循序渐进的原则，我们先介绍如何使用中国的城市数据字典，在下一篇中再讲述如何实现国家和城市的数据联动

0. 创建城市数据字典

如何创建数据字典，请参见：创建数据字典

在这里，我们只需要看看树形数据字典的数据结构是什么模样：

src/module-system/a-dictbooster/backend/src/config/static/dict/cities/citiesChina.json

  1. 1[
  2. 2  {
  3. 3      "code": "110000",
  4. 4      "title": "北京市",
  5. 5      "children": [
  6. 6      {
  7. 7          "code": "110100",
  8. 8          "title": "北京市",
  9. 9          "children": [
  10. 10          {
  11. 11              "code": "110101",
  12. 12              "title": "东城区"
  13. 13          },
  14. 14          {
  15. 15              "code": "110102",
  16. 16              "title": "西城区"
  17. 17          }],
  18. 18      }],
  19. 19  }],  
  20. 20
名称 说明
code 字典项的唯一标识
title 字典项的标题
children 字典项的子项

与数组型数据字典相比，树型数据字典有以下两点不同：

  1. code：在数据库中存储完整路径，比如：用户选择东城区，那么code值就是：110000/110100/110101。这样设计有两点好处：

    1. 便于进行code/title转换，而且转换后的title也可以是完整路径，如：北京市/北京市/东城区

    2. 便于按不同层级检索数据：可以直接构造模糊查询条件，比如，我们要查询整个北京市的数据，就可以这样：select * from testParty where partyCity like ‘110000/110100/%‘

  2. children：通过children扩展数据字典的层级

1. 前端表单渲染

src/suite-vendor/test-party/modules/test-party/backend/src/config/validation/schema/party.js

  1. 1schemas.party = {
  2. 2    type: 'object',
  3. 3    properties: {
  4. 4      ...
  5. 5      partyCity: {
  6. 6        type: 'string',
  7. 7        ebType: 'dict',
  8. 8        ebTitle: 'Party City',
  9. 9        ebParams: {
  10. 10          dictKey: 'a-dictbooster:citiesChina',
  11. 11          mode: 'tree',
  12. 12          separator: '/',
  13. 13          leafOnly: true,
  14. 14        },
  15. 15      },
  16. 16      ...
  17. 17      },
  18. 18  };
名称 说明
type 字段类型
ebType 字段渲染类型，用于标示前端渲染组件类型。dict是系统内置的字典组件
ebTitle 字段标题，用于前端渲染，支持国际化
ebParams 渲染参数，具体内容由渲染组件决定
  • ebParams
名称 说明
dictKey 所使用数据字典的atomStaticKey
mode 数据字典的显示模式，tree是显示为树型选择框的模式
separator 多级字典项的title在合并时所采用的分隔符
leafOnly 当选择字典项时，是否只能选择叶子结点

2. 后端code/title转换

同样，树型数据字典的code/title转换也是在后端进行。树型数据字典的code值在存入数据库时采用的是完整路径，在进行转换时也会生成完整路径的title。这一切也是CabloyJS的内置功能，我们只需要在宴会的meta信息中配置一下即可：

src/suite-vendor/test-party/modules/test-party/backend/src/meta.js

  1. 1    base: {
  2. 2      atoms: {
  3. 3        party: {
  4. 4          info: {
  5. 5            ...
  6. 6            dict: {
  7. 7              fields: {
  8. 8                ...
  9. 9                partyCity: {
  10. 10                  dictKey: 'a-dictbooster:citiesChina',
  11. 11                  separator: '/',
  12. 12                },
  13. 13                ...
  14. 14              },
  15. 15            },
  16. 16          },
  17. 17        },
  18. 18      },
  19. 19    },
  • dict.fields.partyCity
名称 说明
dictKey 所使用数据字典的atomStaticKey
separator 多级字典项的title在合并时所采用的分隔符

3. 前端显示Title

后端方法ctx.bean.atom.select和ctx.bean.atom.read在查询到数据后，自动进行code/title转换，并把转换后的title写入数据，方便前端显示。写入数据的字段名规则如下：

code字段 title字段 title国际化字段
name _{name}Title _{name}TitleLocale
partyCity _partyCityTitle _partyCityTitleLocale

比如，在PC布局中，通过表格形式显示宴会列表，表格中城市的字段配置如下：

src/suite-vendor/test-party/modules/test-party/front/src/config/config/configPartyRenderList.js

  1. 1  layouts: {
  2. 2    table: {
  3. 3      blocks: {
  4. 4        items: {
  5. 5          columns: [
  6. 6            {
  7. 7              dataIndex: '_partyCityTitleLocale',
  8. 8              title: 'Party City',
  9. 9              align: 'left',
  10. 10            },
  11. 11            ...
  12. 12          ],
  13. 13        },
  14. 14      },
  15. 15    },
  16. 16  },
  • layouts.table.blocks.items.columns
名称 说明
dataIndex 要显示的字段名
title 字段标题，支持国际化
align 对齐方式