跳转到内容

树表格(增强)

实现可折叠树形表格组件,支持节点数据懒加载、列宽拖拽调整、行双击事件触发、多条件排序及行选中高亮,提升数据浏览与操作效率。

基础

操作列

子节点

行编辑

界面样式及图标

刷新模式

事件

能力调用

输入参数

名称说明类型默认值
modelData树表格增强模型数据Object as IDETreeGridEx-
context应用上下文对象Object as IContext-
params视图参数对象Object as IParams{}
provider部件适配器Object as IControlProvider-

状态

名称说明类型默认值
isCreated控制器是否走完created生命周期booleanfalse
isMounted控制器是否走完mounted生命周期booleanfalse
isDestroyed控制器是否走完destroy生命周期booleanfalse
context应用上下文对象IApiContext{}
activated当前部件是否为激活状态(缓存下的激活状态,一般与框架的生命周期相同)booleanfalse
isSimple是否是简单模式,简单模式下不加载数据,而是由父组件传值booleanfalse
isLoading部件是否正在加载booleanfalse
loadDefault是否默认加载数据booleantrue
disabled部件禁用状态booleanfalse
maskOption部件遮罩参数IApiMaskOption-
items树节点集合IApiTreeNodeData[][]
selectedData选中节点集合IApiTreeNodeData[][]
selectedKeys多数据部件选中数据主键集合string[]-
singleSelect是否是单项选择booleantrue
mdctrlActiveMode多数据部件激活模式,0:无激活;1:单击激活;2:双击激活number | 0 | 1 | 20
curPage当前页number1
size分页条数number20
total总条数number0
totalx全部计数条数,数据集配置需勾选返回全部计数number0
totalPages总页数number-
isLoaded是否加载过数据,用于某些需要等待数据加载回来之后的场景。booleanfalse
searchParams搜索部件的查询参数IApiParams{}
noSort是否禁用排序booleanfalse
sortQuery排序查询条件string''
groups分组数据IApiMDControlGroupState[][]
hideNoDataImage隐藏无数据图片,该状态仅PC端使用。booleanfalse
enableNavView是否启用内置导航视图,该状态仅PC端使用。booleanfalse
showNavView是否显示内置导航视图,该状态仅PC端使用。booleanfalse
showNavIcon是否显示内置导航图标,导航视图显示模式为程序控制时不显示。该状态仅PC端使用。booleanfalse
showRowDetail是否显示行明细,该状态仅PC端(表格,列表)使用。booleanfalse
enableGroup是否启用分组,该状态仅PC端(表格,卡片,列表)使用。boolean-
defaultExpandedKeys外部提供的默认展开的节点集合string[][]
rootNodes树的根节点IApiTreeNodeData[][]
expandedKeys实际默认展开节点标识集合string[][]
query查询条件string''
placeHolder快速搜索占位符string''
mobExpandedKey移动端展开节点标识(存储最后展开节点的标识)string''
rowEditOpen开启表格行编辑booleantrue

控制器

名称说明类型
id控制器实例的唯一标识,创建时自动生成 string
state状态对象,泛型 S
model模型对象,泛型 T
context应用上下文对象 IApiContext
params视图参数对象 IApiParams
view当前视图控制器 IApiViewController & IApiData
ctrlId部件标识 string
controlParams部件参数 IApiParams
layoutPanel部件布局面板控制器 IApiViewLayoutPanelController & IApiData
runMode运行模式(DESIGN:设计模式,RUNTIME:运行时) 'DESIGN' | 'RUNTIME'
force强制更新,触发render函数(_callback?: () => void) => void
startLoading开始加载() => Promise<void>
endLoading加载完毕() => Promise<void>
getControlType获取部件类型() => string
enable取消部件禁用() => void
disabled设置部件禁用(options?: IApiMaskOption) => void
emitDEDataChange触发实体数据变更的通知(type: 'create' | 'update' | 'remove', data: IApiData) => void
setSort设置排序(key?: string, order?: 'asc' | 'desc') => void
loadMore加载更多() => Promise<void>
load加载数据(args?: IApiMDCtrlLoadParams) => Promise<IApiData[]>
remove删除数据(args?: IApiMDCtrlRemoveParams) => Promise<void>
refresh刷新数据() => Promise<void>
importData导入数据() => Promise<void>
getData获取选中数据() => IApiData[]
setSelection设置选中数据,设置的数据和已经选中的一样时会触发onSelectionChange事件(selection: IApiData[], isEmit?: boolean) => void
setActive设置激活数据(data: IApiData, event?: MouseEvent | undefined) => Promise<void>
goToFirstPage跳转第一页() => Promise<IApiData[]>
goToPreviousPage跳转上一页() => Promise<IApiData[]>
goToNextPage跳转下一页() => Promise<IApiData[]>
goToLastPage跳转最后一页() => Promise<IApiData[]>
selectAll选中全部数据(state?: boolean) => void
execGroup执行多数据分组(arg: IApiMDGroupParams[], params?: IApiParams) => Promise<void>
setSelectedData设置选中数据(items: IData[]) => void
newRow新建行(args?: IApiMDCtrlLoadParams) => Promise<void>
refreshNodeChildren刷新指定树节点的子节点数据(nodeData: IApiTreeNodeData | IApiData, refreshParent?: boolean) => Promise<void>
expandNodeByKey展开并加载节点(expandedKeys: string[]) => Promise<void>
changeCollapse展开/收缩节点(params?: IApiData) => void
getNodeModel获取节点模型(id: string) => IDETreeNode | undefined
getNodeData通过标识获取节点数据(key: string) => IApiTreeNodeData | undefined
newTreeNode新建树节点(_params: IApiNewTreeNodeParams) => void
save保存单条数据(data: IApiTreeNodeData) => Promise<void>

事件

名称描述类型
onCreated自身的准备工作完成(如模型加载,各种初始化,init结束){eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onMounted没有下级组件created之后的生命周期,有下级时需要等所有下级组件onMounted完成后触发{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onBeforeDestroy组件销毁前{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onDestroyed自身组件被销毁时触发{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onActivated自身组件重新激活{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onDeactivated自身组件暂时停用{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onUIAction界面行为执行{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onRefreshSuccess刷新成功{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onActive数据激活事件{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onSelectionChange选中数据变更事件{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onBeforeSave保存之前{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onSaveSuccess保存成功后{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onSaveError保存失败{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onBeforeRemove删除之前{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onRemoveSuccess删除成功之后{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onRemoveError删除失败{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onBeforeLoad加载前事件{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onLoadSuccess加载后处理事件{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onLoadError加载失败{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onNavDataChange导航数据变更{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onAfterRefreshParent父节点刷新结束之后事件{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onAfterNodeDrop树节点拖入变更处理完成后事件{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onNewTreeNode新建树节点{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}
onRowEditChange表格行编辑切换事件{eventName:string, context:IApiContext, params:IApiParams, data:IApiData[], targetName:string, view:IApiViewController, ctrl:IApiControlController, [key: string]: any}

控件动态参数

名称说明类型默认值
overflowmode单元格内容超出单元格宽度时的呈现模式,包含超出省略 'ellipsis',换行 'wrap' 两种模式'ellipsis' | 'wrap''wrap'
emptyhiddenunit单元格无值时,其对应的值单位(如'天'、'%'等)是否隐藏booleantrue
editshowmode表格进行行编辑时的呈现模式,包含单行编辑模式 'row',单元格编辑 'cell' 模式,整个表格编辑模式 'all' 三种模式'row' | 'cell' | 'all''row'
editsavemode处理表格进行行编辑时的保存模式,包含单元格失焦 'cell-blur' 时保存,自动保存 'auto',手动确认 'manual' 三种模式'cell-blur' | 'auto' | 'manual''cell-blur'
未来已来,立即拥抱应用融合的力量
Released under the MIT License.