Tree树型菜单模块

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

简单使用

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

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

  • 输出
  • HTML
  • JS

基础配置

属性 类型 默认值 说明
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 输出值时监听