Tree

树容器，用于展示树形数据，获取数据为异步

API

ITreeContainerBaseProps

参数	类型	说明	默认值
key	boolean	数据容器在页面内的唯一标识	-
model	string	模型Key	-
dataCondition	string	DataStore 数据源condition，若condition=""表示使用空条件进行查询	-
dataParams	string	给数据源 dataSource 携带参数。属性不需要写成表达式格式。使用对象格式的字符串，例如{ a: 1 }, 查询时会合并到查询参数search中	-
dataSource	string | ((param: any) => any)	树容器获取数据来源 key， 也可以通过一个方法返回mock数据	-
title	string	标题	-
show	boolean	是否显示	-
onDataLoaded	(record: any) => void	容器在数据获取完成后的回调	-
parentField	string	表示父级的 field key	-
hasChildrenField	string	是否有children节点 field key	-
isLeafField	string	是否是叶子节点 field key	-
iconField	string	表示icon的 field key	-
searchable	boolean	是否开启搜索	-
checkedField	string	表示是否勾选的 field key	-
asyncLoadChildren	boolean	是否以同步方式加载子节点	false
labelField	string	显示的节点名称	-
onSelect	string	选中行数据触发 Action	-
optionFormat	(record: any) => string	自定义节点渲染文本	-
onAddRoot	(({ record }: { record: string }) => void) | string	内置根节点新增按钮	-
onAdd	(({ record }: { record: string }) => void) | string	内置节点新增按钮	-
onEdit	({ record }: { record: { parent: any; label: string } }) => void	内置编辑按钮	-
onDelete	({ record }: { record: any }) => void	内置删除按钮	-
orderField	string	获取节点列表时的排序字段名称，配合order属性使用	-
order	’asc’ | ‘desc’	获取节点时的排序规则，配合orderField属性使用	-

用法

基础用法

<View title="树形容器" version="2">
  <Tree model="trantor_doc_Tree" parentField="parent" hasChildrenField="hasChildren">
    <Fields>
      <Field name="name"/>
    </Fields>
  </Tree>
</View>

注意：当前例子为0.17.x 版本

操作

<View title="树形容器" version="2">
  <Tree model="trantor_doc_Tree" parentField="parent" hasChildrenField="hasChildren">
    <Fields>
      <Field name="name"/>
    </Fields>
    <RecordActions>
      <Action label="编辑" logicFlow="trantor_doc_Tree_update" />
      <Action label="删除" logicFlow="trantor_doc_Tree_delete" after="Refresh" />
    </RecordActions>
  </Tree>
</View>

注意：当前例子为0.17.x 版本

更新节点

场景： 左右分栏下，左边是树容器或者级联容器，右边是详情或者列表视图，右侧容器上的 action 执行完某个逻辑后，去刷新左侧的节点

<View xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" title="树形容器" type="List" forModel="md_CompanyBO" version="2" xsi:noNamespaceSchemaLocation="https://trantor-docs-dev.app.terminus.io/static/v0.16.x/schema/base.xsd" menuView="true">
    <Tree pageId="trantor_doc_Tree_Id" key="trantor_doc_Tree"
    model="md_CompanyBO" onSelect="mDEnterpriseDetail" parentField="parentCompany" searchable="#{true}" isLeafField="isLeaf" dataSource="md_CompanyBO_CompanyTreeDataSource">
        <Actions>
            <Action type="Create" targetView="md_CompanyBO_CompanyCreate"/>
        </Actions>
        <RecordActions>
            <Action key="mDEnterpriseDetail" openViewType="Columns" openViewSize="l" targetView="md_CompanyBO_CompanyDetail"/>
        </RecordActions>
    </Tree>
</View>

选中树容器中的节点【onSelect=“mDEnterpriseDetail” 】，即执行打开该节点详情页。

<View title="#{this.data.companyName}" forModel="md_CompanyBO" type="Form" version="2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://trantor-docs-dev.app.terminus.io/static/v0.16.x/schema/base.xsd">
    <Detail model="md_CompanyBO" key="detail" dataCondition="id = ?" dataParams="[pageContext.record.id]" postFunc="organization_HandleCompanyFunc">
        <Fields>
            <GroupField title="Billing Information">
                <Field name="branchBankNum" label="Branch bank number"/>
                <Field name="branchBankName" label="Branch bank name"/>
            </GroupField>
        </Fields>
        <Actions>
            <!-- 删除节点 -->
            <Action label="Delete" layout="Header" after="GoBack" openViewType="Dialog" confirm="Confirm to delete company?" show="#{this.data.companyStatus === 'DRAFT'}" logicFlow="organization_DeleteCompanyFlow"/>
            <!-- 更新节点 -->
            <Action label="Update" layout="Header" after="Refresh" openViewType="Self" targetView="md_CompanyBO_CompanyUpdate"/>
            <!-- 新建子节点 -->
            <Action type="Create" label="New Subordinate" layout="Header" targetView="md_CompanyBO_CompanyCreate"/>
        </Actions>
    </Detail>
</View>

1. 更新某个节点的内部信息

import { state, action, _, computed, Controller } from "nusi-sdk";

export default class extends Controller {

  @action
  // 刷新当前页面所有容器
  refresh()

  // 刷新当前容器
  refresh('trantor_doc_Tree')

  // 更新当前树节点
  // 使用场景
  // 1. 新增子节点
  this.getSourceView('treePageId').getContainerByKey('treeKey').refresh(currentId)

  // 更新当前树节点的父节点【刷新父节点，可更新当前节点以及其兄弟节点】
  // 使用场景
  // 1. 更新某个节点的内部信息
  // 2. 修改节点名称
  // 3. 删除当前节点
  // 4. 删除当前节点，并且当前节点是上级节点下的最后一个节点
  this.getSourceView('treePageId').getContainerByKey('treeKey').refreshParent(currentId)
}