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 |
输出值时监听 |
