树形

树形是用于展示层级结构数据的视图组件，基于数据模型字段构建多层级的树形导航。它负责数据加载、层级展示和节点交互，支持单选和多选模式，提供节点点击事件和筛选条件输出。

树形元素分层结构为Meta（components.Meta） → Type（components.Tree） → 实例，开发者可通过JitAI的可视化开发工具快捷地创建树形实例元素。

当然，开发者也可以创建自己的Type元素，或者在自己的App中改写JitAi官方提供的components.TreeType元素，以实现自己的封装。

快速开始

基础配置示例

基础树形配置

{
  "firstLevel": ["department"],
  "secondLevel": ["position"], 
  "mode": "single",
  "defaultRender": true,
  "defaultFirstSelected": false,
  "requireElements": [
    {
      "name": "models.EmployeeModel",
      "filter": "",
      "orderBy": ["id"]
    }
  ]
}

配置属性说明

属性名	类型	必填	默认值	说明
firstLevel	string[]	是	[]	第一层级字段数组
secondLevel	string[]	是	[]	第二层级字段数组
thirdLevel	string[]	否	[]	第三层级字段数组
forthLevel	string[]	否	[]	第四层级字段数组
fifthLevel	string[]	否	[]	第五层级字段数组
mode	'single' | 'multiple'	否	'single'	选择模式：单选或多选
defaultRender	boolean	否	true	是否默认渲染数据
defaultFirstSelected	boolean	否	false	是否默认选中第一个节点

变量

filter

筛选条件变量，用于限制树形数据的查询范围。

• 类型：QFilter
• 只读：是
• 说明：基于关联数据模型的筛选条件，支持Q表达式语法

clickNodeFilter

节点点击后的筛选条件变量，包含当前选中节点的筛选信息。

• 类型：QFilter
• 只读：是
• 说明：点击节点时自动更新，可用于关联其他组件的数据筛选

方法

call

刷新树形数据，重新加载根节点列表。

参数详解

参数名	类型	必填	说明
qFilter	QFilter	否	筛选条件，用于过滤数据

返回值

无返回值（异步方法）

使用示例

调用刷新方法

// 无条件刷新
await treeComponent.call();

// 带筛选条件刷新
const filter = Q("status", "=", "active");
await treeComponent.call(filter);

getRootNodeList

获取根节点数据列表。

参数详解

参数名	类型	必填	说明
filterValue	string	否	过滤值字符串

返回值

无返回值（异步方法，结果更新到treeData属性）

使用示例

获取根节点

await treeComponent.getRootNodeList({
  filterValue: "Q(department='IT')"
});

getSubNodeList

获取子节点数据列表，用于展开树形节点时动态加载下级数据。

参数详解

参数名	类型	必填	说明
treeNode	TreeDataItem	是	要展开的树形节点对象

返回值

无返回值（异步方法，结果更新到treeData属性）

使用示例

获取子节点

const parentNode = {
  key: "dept=IT",
  title: "IT部门",
  nextField: "position"
};
await treeComponent.getSubNodeList(parentNode);

publishEvent

发布组件事件，触发事件处理器执行。

参数详解

参数名	类型	必填	说明
name	string	是	事件名称
ex	Record<string, any>	否	额外参数对象

返回值

Promise<void>

使用示例

发布事件

// 发布点击节点事件
await treeComponent.publishEvent('clickNode');

// 发布刷新事件
await treeComponent.publishEvent('refresh');

subscribeEvent

订阅组件事件，注册事件处理回调函数。

参数详解

参数名	类型	必填	说明
name	string	是	事件名称
evtCb	Function	是	事件回调函数
unSubscribeExist	boolean	否	是否取消已存在的订阅，默认true

返回值

string - 事件处理器ID

使用示例

订阅事件

const handleId = treeComponent.subscribeEvent('clickNode', async (data) => {
  console.log('节点点击:', data);
});

unSubscribeEvent

取消事件订阅，移除指定的事件处理器。

参数详解

参数名	类型	必填	说明
id	string	是	事件处理器ID

返回值

void

使用示例

取消订阅

treeComponent.unSubscribeEvent(handleId);

setConfig

设置组件配置，更新组件的配置参数。

参数详解

参数名	类型	必填	说明
next	Partial<TreeCompConfig>	是	新的配置对象
clean	boolean	否	是否清空原配置，默认false

返回值

void

使用示例

设置配置

// 合并配置
treeComponent.setConfig({
  mode: 'multiple',
  defaultFirstSelected: true
});

// 替换配置
treeComponent.setConfig({
  firstLevel: ['newField'],
  mode: 'single'
}, true);

bindApp

绑定应用实例到组件。

参数详解

参数名	类型	必填	默认值	说明
app	App	是	-	应用实例对象

返回值

void

使用示例

绑定应用

treeComponent.bindApp(app);

bindPage

绑定页面实例到组件，同时为组件变量绑定页面。

参数详解

参数名	类型	必填	默认值	说明
page	BasePage	是	-	页面实例对象

返回值

void

使用示例

绑定页面

treeComponent.bindPage(page);

getEventKey

获取组件事件的唯一键值。

参数详解

参数名	类型	必填	默认值	说明
eventName	string	是	-	事件名称

返回值

string - 格式为 ${uuid}.${name}.${eventName} 的唯一键值

使用示例

获取事件键值

const eventKey = treeComponent.getEventKey('clickNode');

runCode

在页面上下文中运行代码字符串。

参数详解

参数名	类型	必填	默认值	说明
code	string	是	-	要执行的代码字符串

返回值

any - 代码执行结果

使用示例

运行代码

const result = treeComponent.runCode('self.treeData.length');

getPermConfig

获取组件的权限配置信息。

返回值

Record<string, any> | undefined - 权限配置对象

使用示例

获取权限配置

const permConfig = treeComponent.getPermConfig();

destroy

销毁组件实例，清理所有事件监听器和变量。

使用示例

销毁组件

treeComponent.destroy();

属性

treeData

当前树形数据数组，包含所有层级的节点信息。

• 类型：TreeData (TreeDataItem[])
• 只读：否
• 说明：树形节点数据结构，包含key、title、children等属性

primaryKey

数据模型的主键字段名。

• 类型：string
• 只读：否
• 默认值：'id'

fieldDefineList

字段定义列表，包含关联数据模型的所有字段配置。

• 类型：DataTypeConfig[]
• 只读：否

allFieldDict

所有字段的字典映射，以字段名为键，字段配置为值。

• 类型：Record<string, DataTypeConfig>
• 只读：否

treeField

树形层级字段数组，按层级顺序排列的字段名列表。

• 类型：string[]
• 只读：否

loading

加载状态变量，表示数据是否正在加载中。

• 类型：Numeric
• 只读：否
• 说明：0表示未加载，非0表示加载中

name

组件实例名称。

• 类型：string
• 只读：否

title

组件显示标题。

• 类型：string
• 只读：否

config

组件配置对象，包含所有配置参数和关联元素。

• 类型：TreeCompConfig & {requireElements: requireElement[]}
• 只读：否

type

组件类型标识。

• 类型：string
• 只读：否

showTitle

是否显示组件标题。

• 类型：boolean
• 只读：否

app

当前绑定的应用实例。

• 类型：App
• 只读：是
• 说明：通过getter访问，优先返回绑定的应用实例，否则返回运行时应用

page

当前绑定的页面实例。

• 类型：BasePage | undefined
• 只读：是
• 说明：通过getter访问，返回组件所属的页面实例

compType

组件类型标识符。

• 类型：COMPONENT_TYPE
• 只读：否
• 说明：标识组件的具体类型

fullName

组件的完整名称标识。

• 类型：string
• 只读：否
• 说明：组件在系统中的唯一标识路径

dataTypeList

组件关联的数据类型列表。

• 类型：BaseDataType[]
• 只读：否
• 说明：包含组件所有变量的数据类型配置

事件

clickNode

点击树形节点时触发的事件。

• 触发时机：用户点击树形节点后
• 数据变量：clickNodeFilter
• 说明：事件触发时会更新clickNodeFilter变量，包含选中节点的筛选条件

使用示例

订阅节点点击事件

// 订阅点击节点事件
const handleId = treeComponent.subscribeEvent('clickNode', async (eventData) => {
  // 获取选中节点的筛选条件
  const filter = treeComponent.clickNodeFilter.value;
  console.log('节点筛选条件:', filter);
  
  // 根据选中节点更新其他组件
  if (filter) {
    // 例如：刷新关联的表格组件
    await tableComponent.call(filter);
  }
});

// 手动触发点击节点事件
await treeComponent.publishEvent('clickNode', {
  nodeKey: 'dept=IT',
  nodeTitle: 'IT部门'
});

处理多选模式的节点事件

// 多选模式下的事件处理
treeComponent.subscribeEvent('clickNode', async (eventData) => {
  const filter = treeComponent.clickNodeFilter.value;
  
  if (filter) {
    // 处理多个选中节点的筛选条件
    console.log('多选节点筛选:', filter);
    
    // 更新相关联的组件数据
    await Promise.all([
      chartComponent.call(filter),
      listComponent.call(filter)
    ]);
  }
});

结合权限控制的事件处理

// 带权限检查的事件处理
treeComponent.subscribeEvent('clickNode', async (eventData) => {
  // 获取权限配置
  const permConfig = treeComponent.getPermConfig();
  
  if (permConfig?.permitFilter) {
    // 结合权限筛选条件
    const userFilter = treeComponent.clickNodeFilter.value;
    const combinedFilter = Q.combine([
      Q.from(permConfig.permitFilter),
      userFilter
    ]);
    
    // 使用组合后的筛选条件
    await relatedComponent.call(combinedFilter);
  }
});