跳转到内容
Trantor 文档

CascadeList

级联列表容器

API

ITreeContainerBaseProps

参数类型说明默认值
keyboolean数据容器在页面内的唯一标识-
modelstring模型Key-
dataConditionstringDataStore 数据源condition，若condition=""表示使用空条件进行查询-
dataParamsstring给数据源 dataSource 携带参数。属性不需要写成表达式格式。使用对象格式的字符串，例如{ a: 1 }, 查询时会合并到查询参数search中-
dataSourcestring | ((param: any) => any)树容器获取数据来源 key， 也可以通过一个方法返回mock数据-
titlestring标题-
showboolean是否显示-
onDataLoaded(record: any) => void容器在数据获取完成后的回调-
parentFieldstring表示父级的 field key-
hasChildrenFieldstring是否有children节点 field key-
isLeafFieldstring是否是叶子节点 field key-
iconFieldstring表示icon的 field key-
searchableboolean是否开启搜索-
checkedFieldstring表示是否勾选的 field key-
asyncLoadChildrenboolean是否以同步方式加载子节点false
labelFieldstring显示的节点名称-
onSelectstring选中行数据触发 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内置删除按钮-
orderFieldstring获取节点列表时的排序字段名称，配合order属性使用-
order’asc’ | ‘desc’获取节点时的排序规则，配合orderField属性使用-

ICascadeListProps

参数类型说明默认值
depthLimitstring最大深度-
dataConditionstring筛选条件，根据筛选条件获取树形数据-
onAddstring点击 +号触发 Action-
onSelectstring选中行数据触发 Action-
columnTitlesstring[]层级标题-
labelFieldstring显示的节点名称-
add(({ record }: { record: { parent: any, addedNode: any } }) => void) | string内置节点新增按钮-
edit(({ record }: { record: { parent: any; editedNode: string } }) => void) | string内置编辑按钮-
del(({ record }: { record: { parent: any; deletedNode: any } }) => void) | string内置删除按钮-
draggableboolean是否允许拖拽排序-
orderFlowstring排序 flow-
orderFuncstring排序 function-
orderParamsstring获取需要排序节点的额外字段给 orderFlow/orderFunc-
allowDragnumber[]配置可拖拖拽排序的层级，当 draggable=true 时默认全部层级可拖拽排序-
loadChildrenExtraFieldstring获取子节点时携带当前节点的一些额外参数，可以用逗号隔开-

用法

基础用法

<View version="2" title="级联容器">
  <CascadeList model="trantor_doc_Tree" parentField="parent" depthLimit="4">
    <Fields>
      <Field name="name"  />
    </Fields>
  </CascadeList>
</View>

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

操作

<View version="2" title="级联容器">
  <CascadeList model="trantor_doc_Tree" parentField="parent" depthLimit="2" onAdd="trantor_doc_Tree_create"
    onSelect="handlerSelect">
    <Fields>
      <Field name="name"/>
    </Fields>
    <RecordActions>
      <Action key="handlerSelect" show="#{true}" label="编辑" logicFlow="trantor_doc_Tree_update" />
      <Action label="删除" logicFlow="trantor_doc_Tree_delete" after="Refresh" />
    </RecordActions>
  </CascadeList>
</View>

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

拖拽排序

拖拽排序为异步操作，需后端实现 Func/Flow 进行对数据排序。

排序 Func/Flow 实现规范

  • 入参：ISortParams
  • 响应：状态码 200，无需响应数据。

ISortParams - 排序接口参数

参数类型说明
parentFieldstring父节点字段，等价于 CascadeList.parentField
parentIdstring | null被拖拽节点的父节点 ID，用于查询所在层级所有节点进行排序
idstring被拖拽节点 ID
destinationnumber目的位置，[0, n]
[…]any其他字段，可以通过 orderParams 传递，允许传递 1 个额外的节点自身的字段

DSL - Example

<View version="2" title="级联容器">
  <CascadeList
    model="trantor_doc_Tree"
    parentField="parent"
    depthLimit="2"


    draggable="true" # 开启拖拽排序
    orderFunc="func_key" # 排序接口，也可以使用 flow
    orderParams="name" # 将节点的 name 字段和 ISortParams 一起提交给 func/flow，仅支持单个字段。
  >
    <Fields>
      <Field name="name"/>
    </Fields>
  </CascadeList>
</View>

后端 - Example

TO 声明

public class FrontCategoryMoveTO extends BaseModel<Long> {
    private static final long serialVersionUID = 7931310294022803382L;


    @Field
    private Long destination;


    @Field
    private String parentField;


    @Field
    private Long parentId;
}

Function 接口

@Function
public interface MoveFrontCategoryFunc {


    BooleanResult execute(FrontCategoryMoveTO frontCategoryMoveTO);
}