Tree树型菜单模块
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 |
输出值时监听 |