Tree树型菜单模块

2024-09-28 23:52:33首发，3周前更新

Tree模块可创建多层次的树菜单，支持分页和缓加载，支持多种数据格式。

简单使用

对ul+li或ol+li结构的容器节点使用ax-tree属性即可。

也可以通过id+new的方式创建实例。

基础配置

属性	类型	默认值	说明
name	string	''	隐藏input的name属性
value	string	''	初始值
content	string	''	数据源内容
contType	'text'/'async'/'html'/'auto'/''	'text'	内容类型
contData	object	{}	请求数据参数
ajax	object	{}	异步请求配置
passive	boolean	false	是否完全禁止使用
disable	string/number/DOM/object/array	''	初始化禁用项
readonly	string/number/DOM/object/array	''	初始化只读项
min	number	0	限制分支最少数量
max	number	0	限制分支最多数量
sliced	boolean	true	是否裁剪掉超出的部分
delay	number	100	触发事件的防抖延迟时间(ms)
deferred	boolean	false	是否暂时不渲染子节点
chain	boolean	false	是否显示连线
autoFill	boolean	true	是否自动填充content
rootStart	number	-1	顶层分支的编号
idStart	number	0	分支id开始编号

展开配置

属性	类型	默认值	说明
expand.value	string/number/DOM/object/array	''	初始化展开项
expand.all	boolean	false	初始化时是否展开全部
expand.only	boolean	true	是否仅展开一项
expand.linkage	boolean	false	是否允许联动父层展开

选择配置

属性	类型	默认值	说明
select.enable	boolean	true	是否可选择分支作为焦点
select.only	boolean	true	是否只能让一个分支成为选择焦点
select.value	string/number/DOM/object/array	''	初始化selected项
select.linkage	boolean	false	是否父子联动selected
select.span	'tree'/'leaf'/'branch'	'tree'	设置可select的范围
select.addSelected	boolean	false	是否添加新分支后立即selected高亮

箭头配置

属性	类型	默认值	说明
arrow.enable	boolean	true	是否启用指示箭头
arrow.show	string	'_icon-right'	展开状态的箭头样式类名
arrow.hide	string	'_icon-right'	折叠状态的箭头样式类名
arrow.anim	string	'_rotate90'	箭头的动画样式类
arrow.type	'icon'/'image'	'icon'	图标类型
arrow.trigger	'click'/'hover'/'none'	'click'	打开菜单的事件类型

图例配置

属性	类型	默认值	说明
legend.enable	boolean	false	是否启用节点指示图标
legend.parent	array	['_icon-folder','_icon-folder-open']	父节点的图标，分别是未打开和打开状态
legend.child	string	'icon-file-text'	子节点图标
legend.type	'icon'/'image'	'icon'	图标类型

检查配置

属性	类型	默认值	说明
check.enable	boolean	false	是否启用checkbox和radio
check.type	'checkbox'/'radio'/'none'	'checkbox'	节点的check模式
check.value	string/number/DOM/object/array	''	初始化checked项
check.min	number	0	可check的最少数量
check.max	number	0	可check的最多数量
check.sliced	boolean	true	超出checked数量是否裁剪
check.linkage	boolean	true	父层子层是否checked联动
check.only	boolean	false	是否只check一个
check.span	'tree'/'leaf'/'branch'	'tree'	可check的范围

工具配置

属性	类型	默认值	说明
tools.enable	boolean	false	是否显示编辑工具
tools.trigger	'hover'/'click'/'none'	'hover'	显示工具的触发方式
tools.children	array	['close']	工具类型列表
popup.enable	boolean	true	是否启用弹出层
tags	object	{}	标签组件参数
tree	object	{}	树形组件参数

输出配置

属性	类型	默认值	说明
output.enable	boolean	true	是否可输出值
output.target	string	''	接收值的节点选择器
output.connector	string	'/'	输出路径值链接符
output.separator	string	','	输出多值的分隔符
output.type	'leaf'/'chain'/'branch'/''	''	输出值类型
output.from	'selected'/'checked'	'selected'	从哪类原生获得数据源
output.field	string	'label'	取值属性
output.instant	boolean	true	是否通过select或check分支立即赋值
output.autosort	boolean	false	是否按tree中节点先后顺序输出

SQL数据配置

属性	类型	默认值	说明
sqlData.deep	number	0	是否展开父节点后请求所有子/孙数据
sqlData.start	number	0	请求到的满足条件的数据从第几条开始截取
sqlData.count	number	0	一共截取几条
sqlData.order	string	'id asc'	检索结果按什么字段排序
sqlData.where	string	''	检索条件，写法同sql

分页配置

属性	类型	默认值	说明
paginated.enable	boolean	false	是否是可分页的
paginated.count	number	10	每一页最多数量
paginated.override	boolean	false	是否新页覆盖页码
paginated.exception	boolean	false	是否忽略主干分页

快捷操作配置

属性	类型	默认值	说明
shortcut.enable	boolean	false	是否启用快捷操作
shortcut.span	'blank'/'whole'	'blank'	可点击区域
shortcut.mean	'selected'/'checked'	'selected'	点击分支行等同于什么

搜索配置

属性	类型	默认值	说明
search.target	string	''	检索input的节点选择器
search.trigger	'input'/'change'	'input'	target触发检索的事件
search.delay	number	500	检索时的防抖延迟
search.value	string	''	初始值
search.limit	number	0	是否限制检索结果数量
search.fuzzy	boolean	true	是否为模糊检索
search.ignore	boolean	true	是否忽略大小写
search.result	boolean	true	是否显示检索结果

拖拽配置

属性	类型	默认值	说明
drag.enable	boolean	false	是否可拖拽
drag.exclude	string	''	排除不可拖拽的节点
drop.attr	string	'dropnode'	增加可释放节点的属性
drop.global	boolean	false	是否全局释放

布局和特性配置

属性	类型	默认值	说明
layout	string	'indent | arrow |check|legend|icon|disk|cube|image|label|badge|tips|custom|tools'	head部分的节点布局
feature.type	string	''	分支的风格特色，可选值：select，check，button，list，''
feature.expand.all	boolean	true	是否展开全部
feature.expand.only	boolean	false	是否只展开一个
feature.check.linkage	boolean	true	父子是否联动checked
feature.check.only	boolean	false	是否只check一个
feature.check.span	'tree'/'leaf'/'branch'	'tree'	可check的范围，linkage=false下有效
feature.layout.dropdown	string	'indent | |icon|disk|cube|image|label|holder|tips|badge'	type=dropdown的分支布局
feature.layout.select	string	'indent | arrow |icon|disk|cube|image|label|holder|tips|badge'	type=select的分支布局
feature.layout.check	string	'indent | arrow |check|icon|disk|cube|image|label|holder|tips|badge'	type=check的分支布局
feature.layout.button	string	'icon | arrow |disk|cube|image|label|tips|badge'	type=button的分支布局
feature.layout.list	string	'indent | arrow |icon|disk|cube|image(label|badge|tips|custom)'	type=list的分支布局

等待函数

属性	类型	默认值	说明
b4Expand	function	null	展开前等待函数
b4Collapse	function	null	折叠前等待函数
b4Add	function	null	添加前等待函数
b4Edit	function	null	编辑前等待函数
b4Remove	function	null	删除前等待函数
b4Graft	function	null	拖拽前等待函数

回调函数

属性	类型	默认值	说明
onRendered	function	null	渲染完成回调
onTrigger	function	null	节点触发回调
onAdded	function	null	添加后回调
onEdited	function	null	编辑后回调
onRemoved	function	null	删除后回调
onOutput	function	null	输出结果回调
onDisabled	function	null	禁用回调
onEnabled	function	null	启用回调
onDisabledAll	function	null	全部禁用回调
onEnabledAll	function	null	全部启用回调
onReadonly	function	null	只读回调
onReadonlyAll	function	null	全部只读回调
onPassivated	function	null	全局禁用回调
onActivated	function	null	取消全局禁用回调
onExpand	function	null	展开前回调
onExpanded	function	null	展开后回调
onCollapse	function	null	折叠前回调
onCollapsed	function	null	折叠后回调
onExpandAll	function	null	全部展开前回调
onExpandedAll	function	null	全部展开后回调
onCollapsedAll	function	null	全部折叠前回调
onSelected	function	null	选中回调
onDeselected	function	null	取消选中回调
onSelectedAll	function	null	全选回调
onChecked	function	null	勾选回调
onUnchecked	function	null	取消勾选回调
onCheckedAll	function	null	全部勾选回调
onTooFew	function	null	选择过少回调
onTooMany	function	null	选择过多回调
onFilled	function	null	填充完成回调
onTurned	function	null	翻页回调
onGetted	function	null	取值回调
onSet	function	null	设置值回调
onCleared	function	null	清除值回调
onGrafted	function	null	转移节点回调
onUpdatedCont	function	null	内容更新回调
onRequest	function	null	请求完成回调
onToofew	function	null	checked数量太少时监听
onToomany	function	null	checked数量太多时监听
onPassivated	function	null	全局禁用后执行
onActivated	function	null	取消全局禁用后执行
onOutput	function	null	输出值时监听