Tree 树菜单

简介

axTree插件是基于axui的独立插件,具备树形菜单常用的功能,是管理系统必备插件,axTree树菜单插件特点如下:

  • 1、支持多种数据格式,分别是ul+li节点、树形数组(带children属性)和一维数组(必须有id和pId)
  • 2、支持以对ul使用axTree属性启用该插件,与axui框架的插件使用方法一脉相承
  • 3、支持异步调用json数据和异步调取sql数据
  • 4、支持checked单选和checked多选以及联动选择
  • 5、支持父和子节点拖拽生成新树菜单
  • 6、支持导出treeDate和flatData,以便于与其他组件搭配使用
  • 7、支持父和子节点增、删和改的常规操作
  • 8、支持完全展开模式和完全收缩模式
  • 9、支持手风琴式的toggle模式
  • 10、支持节点关键字模糊检索
  • 11、支持禁用(不可checked)和只读模式(不可增删改)
  • 12、支持除了label外添加更多自定义内容
  • 13、支持以treeTable的形式显示数据
  • 14、支持自定义arrow、check和file图标
  • 15、支持以连线方式连接父和子节点
  • 16、支持selected多选或单选,并与checked联动

运行条件

页面引入ax.cssax.js之后还需引入以下文件。

                                <link href="https://src.axui.cn/v2.0/dist/plugins/axTree/ax-tree.css" rel="stylesheet" type="text/css">
                                <script src="https://src.axui.cn/v2.0/dist/plugins/axTree/axTree.js" type="text/javascript"></script>
                            

最新版本为v1.0.10,点击这里可直接下载该插件。

使用方法

插件运行方式有两种:

  • ax*属性:对ax-tree标签使用axTree属性即可按默认参数运行插件。
  • js实例:通过new axTree('#id',{参数})方式创建实例运行。
  •                                         let citys = [
                                                {
                                                    id: 1, label: '北京市', children: [
                                                        { id: 2, label: '朝阳区' },
                                                        { id: 3, label: '丰台区' },
                                                        { id: 4, label: '海淀区' },
                                                    ]
                                                },
                                                {
                                                    id: 5, label: '广东省', children: [
                                                        { id: 6, label: '广州市' },
                                                        { id: 7, label: '深圳市' },
                                                    ]
                                                },
                                                { id: 8, label: '上海市', },
                                                { id: 9, label: '重庆市' },
                                            ]
                                
                                            new axTree('#dft',{
                                                content: citys,
                                            });
                            
  •                                         <ul class="ax-tree" axTree>
                                                <li><a>北京</a>
                                                    <ul>
                                                        <li><a>朝阳区</a></li>
                                                        <li><a>丰台区</a></li>
                                                        <li><a>海淀区</a></li>
                                                    </ul>
                                                </li>
                                                <li><a>广东</a>
                                                    <ul>
                                                        <li><a>广州市</a></li>
                                                        <li><a>深圳市</a></li>
                                                    </ul>
                                                </li>
                                                <li><a>上海</a></li>
                                                <li><a>重庆</a></li>
                                            </ul>
    
                                            <ul class="ax-tree" id="dft"></ul>
                            

补充骨骼

默认参数并没有启用复杂效果,可以通过以下参数实现复杂个性的树菜单效果。

  • 1、使用line:true显示节点连线
  • 2、使用iconShow:true显示文件图标
  • 3、使用checkShow:true显示复选和单选按钮
  • 4、使用toolsShow:true显示增删改按钮
                                    <div class="ax-row ax-split">
                                        <div class="ax-col ax-col-6">
                                            line:true显示节点连线
                                            <ul class="ax-tree" axTree='line:true'>
                                                <li><a>北京</a>
                                                    <ul>
                                                        <li><a>朝阳区</a></li>
                                                        <li><a>丰台区</a></li>
                                                        <li><a>海淀区</a></li>
                                                    </ul>
                                                </li>
                                                <li><a>广东</a>
                                                    <ul>
                                                        <li><a>广州市</a></li>
                                                        <li><a>深圳市</a></li>
                                                    </ul>
                                                </li>
                                                <li><a>上海</a></li>
                                                <li><a>重庆</a></li>
                                            </ul>
                                        </div>
                                       
                                        <div class="ax-col ax-col-6">
                                            iconShow:true显示文件图标
                                            <ul class="ax-tree" axTree='iconShow:true'>
                                                <li><a>北京</a>
                                                    <ul>
                                                        <li><a>朝阳区</a></li>
                                                        <li><a>丰台区</a></li>
                                                        <li><a>海淀区</a></li>
                                                    </ul>
                                                </li>
                                                <li><a>广东</a>
                                                    <ul>
                                                        <li><a>广州市</a></li>
                                                        <li><a>深圳市</a></li>
                                                    </ul>
                                                </li>
                                                <li><a>上海</a></li>
                                                <li><a>重庆</a></li>
                                            </ul>
                                        </div>
                                        <div class="ax-col ax-col-6">
                                            checkShow:true显示勾选按钮
                                            <ul class="ax-tree" axTree='checkShow:true'>
                                                <li><a>北京</a>
                                                    <ul>
                                                        <li><a>朝阳区</a></li>
                                                        <li><a>丰台区</a></li>
                                                        <li><a>海淀区</a></li>
                                                    </ul>
                                                </li>
                                                <li><a>广东</a>
                                                    <ul>
                                                        <li><a>广州市</a></li>
                                                        <li><a>深圳市</a></li>
                                                    </ul>
                                                </li>
                                                <li><a>上海</a></li>
                                                <li><a>重庆</a></li>
                                            </ul>
                                        </div>
                                        <div class="ax-col ax-col-6">
                                            toolsShow:true显示增删改按钮
                                            <ul class="ax-tree" axTree='toolsShow:true'>
                                                <li><a>北京</a>
                                                    <ul>
                                                        <li><a>朝阳区</a></li>
                                                        <li><a>丰台区</a></li>
                                                        <li><a>海淀区</a></li>
                                                    </ul>
                                                </li>
                                                <li><a>广东</a>
                                                    <ul>
                                                        <li><a>广州市</a></li>
                                                        <li><a>深圳市</a></li>
                                                    </ul>
                                                </li>
                                                <li><a>上海</a></li>
                                                <li><a>重庆</a></li>
                                            </ul>
                                        </div>
                                    </div>
                

selected聚焦

插件默认可通过点击label节点实现聚焦,默认整个树结构只能selected一项,与selected相关的参数如下:

  • selectable:是否允许对label使用selected,默认为true,可设为false
  • oneSelected:是否整个树只允许一项selected,默认true,可设为false
  • clickLineTo:点击分支行是否允许聚焦label,将该参数设为'select'即可
                                <ul class="ax-tree" axTree='
                                checkShow:true,
                                iconShow:true,
                                clickLineTo:"select",
                                oneSelected:false
                                '>
                                    <li><a>北京</a>
                                        <ul>
                                            <li><a>朝阳区</a></li>
                                            <li><a>丰台区</a></li>
                                            <li><a>海淀区</a></li>
                                        </ul>
                                    </li>
                                    <li><a>广东</a>
                                        <ul>
                                            <li><a>广州市</a></li>
                                            <li><a>深圳市</a></li>
                                        </ul>
                                    </li>
                                    <li><a>上海</a></li>
                                    <li><a>重庆</a></li>
                                </ul>
    

Checked选中

通过checkType参数设置插件checked的方式,分别是checkbox和radio。他们的附属参数略有不同:

  • checkbox用于多选,其相关参数有:
    • checkboxIcon:可设置复选的状态图标(前提设置checkShow),默认值是['ax-icon-square', 'ax-icon-check-s', 'ax-icon-check-s-f'],数组元素为className
    • checkMin:设置可复选的最少数量,默认值是0
    • checkMax:设置可复选的最多数量,默认值是1000000
    • linkage:设置父子联动,默认为true,如果使用false,那么父子将不再联动
    • arrowIcon:设置指示箭头,默认值是['ax-icon-right', 'ax-icon-right', 'ax-none']
    • parentIcon:设置父层图标(前提设置iconShow),包括折叠和展开两种状态,默认值是['ax-icon-folder', 'ax-icon-folder-open']
    • childIcon:设置终极子层图标(前提设置iconShow),只有一种状态,默认值是'ax-icon-file-text'
  • radio用于单选,其相关参数有:
    • radioIcon:可设置单选的状态图标,默认值是['ax-icon-circle', 'ax-icon-radio', 'ax-icon-radio-f'],数组元素为className
    • oneRadio:设置整个tree是否只允许单选一个,默认为false
    • linkage:设置父子联动,默认为true,如果使用false,那么父子将不再联动
    • arrowIcon:设置指示箭头,默认值是['ax-icon-right', 'ax-icon-right', 'ax-none']
    • parentIcon:设置父层图标(前提设置iconShow),包括折叠和展开两种状态,默认值是['ax-icon-folder', 'ax-icon-folder-open']
    • childIcon:设置终极子层图标(前提设置iconShow),只有一种状态,默认值是'ax-icon-file-text'

arrowIcon图标数组中,如果展开和折叠状态的className相同,在展开或折叠的时候则会启用90旋转;arrowIcon数组最后一个值是ax-none,建议用户不要修改。

axTree内置了一套svg图标供用户使用,以下实例使用了这套图标。

                            <div class="ax-row ax-split">
                                <div class="ax-col ax-col-8">
                                    checkbox自定义图标
                                    <ul class="ax-tree" axTree='
                                    checkShow:true,
                                    iconShow:true,
                                    line:true,
                                    checkType:"checkbox",
                                    arrowIcon:["ax-collapse", "ax-expand", "ax-none"],
                                    parentIcon:["ax-fold", "ax-unfold"],
                                    childIcon:"ax-childless",
                                    checkboxIcon:["ax-checkbox-unchecked","ax-checkbox-checking","ax-checkbox-checked"]
                                    '>
                                        <li><a>北京</a>
                                            <ul>
                                                <li><a>朝阳区</a></li>
                                                <li><a>丰台区</a></li>
                                                <li><a>海淀区</a></li>
                                            </ul>
                                        </li>
                                        <li><a>广东</a>
                                            <ul>
                                                <li><a>广州市</a></li>
                                                <li><a>深圳市</a></li>
                                            </ul>
                                        </li>
                                        <li><a>上海</a></li>
                                        <li><a>重庆</a></li>
                                    </ul>
                                </div>
                                <div class="ax-col ax-col-8">
                                    checkbox父子节点不联动
                                    <ul class="ax-tree" axTree='checkShow:true,checkType:"checkbox",linkage:false'>
                                        <li><a>北京</a>
                                            <ul>
                                                <li><a>朝阳区</a></li>
                                                <li><a>丰台区</a></li>
                                                <li><a>海淀区</a></li>
                                            </ul>
                                        </li>
                                        <li><a>广东</a>
                                            <ul>
                                                <li><a>广州市</a></li>
                                                <li><a>深圳市</a></li>
                                            </ul>
                                        </li>
                                        <li><a>上海</a></li>
                                        <li><a>重庆</a></li>
                                    </ul>
                                </div>
                                <div class="ax-col ax-col-8">
                                    checkbox至少checked两项,最多四项
                                    <ul class="ax-tree" axTree='checkShow:true,checkType:"checkbox",checkMin:2,checkMax:4'>
                                        <li><a>北京</a>
                                            <ul>
                                                <li><a>朝阳区</a></li>
                                                <li><a>丰台区</a></li>
                                                <li><a>海淀区</a></li>
                                            </ul>
                                        </li>
                                        <li><a>广东</a>
                                            <ul>
                                                <li><a>广州市</a></li>
                                                <li><a>深圳市</a></li>
                                            </ul>
                                        </li>
                                        <li><a>上海</a></li>
                                        <li><a>重庆</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="ax-break"></div>
                            <div class="ax-row ax-split">
                                <div class="ax-col ax-col-8">
                                    radio自定义图标
                                    <ul class="ax-tree" axTree='
                                    checkShow:true,
                                    line:true,
                                    iconShow:true,
                                    checkType:"radio",
                                    arrowIcon:["ax-collapse", "ax-expand", "ax-none"],
                                    parentIcon:["ax-fold", "ax-unfold"],
                                    childIcon:"ax-childless",
                                    radioIcon:["ax-radio-unchecked","ax-radio-checking","ax-radio-checked"]
                                    '>
                                        <li><a>北京</a>
                                            <ul>
                                                <li><a>朝阳区</a></li>
                                                <li><a>丰台区</a></li>
                                                <li><a>海淀区</a></li>
                                            </ul>
                                        </li>
                                        <li><a>广东</a>
                                            <ul>
                                                <li><a>广州市</a></li>
                                                <li><a>深圳市</a></li>
                                            </ul>
                                        </li>
                                        <li><a>上海</a></li>
                                        <li><a>重庆</a></li>
                                    </ul>
                                </div>
                                <div class="ax-col ax-col-8">
                                    radio父子节点不联动
                                    <ul class="ax-tree" axTree='checkShow:true,checkType:"radio",linkage:false'>
                                        <li><a>北京</a>
                                            <ul>
                                                <li><a>朝阳区</a></li>
                                                <li><a>丰台区</a></li>
                                                <li><a>海淀区</a></li>
                                            </ul>
                                        </li>
                                        <li><a>广东</a>
                                            <ul>
                                                <li><a>广州市</a></li>
                                                <li><a>深圳市</a></li>
                                            </ul>
                                        </li>
                                        <li><a>上海</a></li>
                                        <li><a>重庆</a></li>
                                    </ul>
                                </div>
                                <div class="ax-col ax-col-8">
                                    radio整个树只能选择一项
                                    <ul class="ax-tree" axTree='checkShow:true,checkType:"radio",oneRadio:true'>
                                        <li><a>北京</a>
                                            <ul>
                                                <li><a>朝阳区</a></li>
                                                <li><a>丰台区</a></li>
                                                <li><a>海淀区</a></li>
                                            </ul>
                                        </li>
                                        <li><a>广东</a>
                                            <ul>
                                                <li><a>广州市</a></li>
                                                <li><a>深圳市</a></li>
                                            </ul>
                                        </li>
                                        <li><a>上海</a></li>
                                        <li><a>重庆</a></li>
                                    </ul>
                                </div>
                            </div>
    

以上示例为点击复选按钮进行checked,可设置clickLineTo为check将整个分支都作为点击区域。

由于label节点默认是可被点击selected的,可设置selectable为false将其功能关闭。

            <ul class="ax-tree" axTree='
                                    checkShow:true,
                                    iconShow:true,
                                    clickLineTo:"check",
                                    selectable:false
                                '>
                <li><a>北京</a>
                    <ul>
                        <li><a>朝阳区</a></li>
                        <li><a>丰台区</a></li>
                        <li><a>海淀区</a></li>
                    </ul>
                </li>
                <li><a>广东</a>
                    <ul>
                        <li><a>广州市</a></li>
                        <li><a>深圳市</a></li>
                    </ul>
                </li>
                <li><a>上海</a></li>
                <li><a>重庆</a></li>
            </ul>

增删改

axTree支持常规的增加、删除和修改操作,支持操作前拦截,以popupdialog形式进行对应操作。使用前先将toolsShow参数设定为true

  • toolsShow参数用来表示是否使用节点操作功能,如果要启用增删改则必须将该参数设置为true
  • readonly是一个id数组,用来限制某些节点的编辑操作;如果节点的id包含在readonly里,那么该节点将不可进行增删改操作
  • toolsAction参数用来表示显示工具按钮的方式,默认是hover即鼠标滑过节点显示,使用click将在点击节点后显示,使用sticky将固定在节点右侧
  • addTools参数增加操作方式,除了增删改之外或许有其他操作需求,可通过该参数进行扩展,格式是[{dom:'<i class="ax-iconfont ax-icon-copy">',callback:function(item){}},...];callback函数支持item参数,即当前节点对象,可使用item.id、item.pId、item.label等属性;this将指向实例本身,所以也可以使用实例内置的所有操作方法
双击节点名称可进入编辑状态;新增的节点id会从现有的节点最大id开始累计,并且dom节点会紧挨着父节点添加。
  •                                             //dialog方式删除
                                                const dialogDel = new axTree('#dialogDel', {
                                                    toolsShow: true,
                                                    onBeforeRemove: function (item) {
                                                        let _this = this;
                                                        new axDialog({
                                                            content: '确定删除么?',
                                                            confirm: {
                                                                callback: function () {
                                                                    _this.remove(item);
                                                                }
                                                            }
                                                        }).show();
                                                    },
                                    
                                                });
                                                //添加新工具
                                                const newTool = new axTree('#newTool', {
                                                    toolsShow: true,
                                                    toolsAction: 'sticky',
                                                    addTools: [{
                                                        dom: '<i class="ax-iconfont ax-icon-copy">',
                                                        callback: function (item) {
                                                            alert('节点信息:id:'+item.id+',label:'+item.label);
                                                        }
                                                    },
                                                ]
                                                });
                            
  •                                         <div class="ax-row ax-split">
                                                <div class="ax-col ax-col-6">
                                                    普通增删改
                                                    <ul class="ax-tree" axTree='toolsShow:true'>
                                                        <li><a>北京</a>
                                                            <ul>
                                                                <li><a>朝阳区</a></li>
                                                                <li><a>丰台区</a></li>
                                                                <li><a>海淀区</a></li>
                                                            </ul>
                                                        </li>
                                                        <li><a>广东</a>
                                                            <ul>
                                                                <li><a>广州市</a></li>
                                                                <li><a>深圳市</a></li>
                                                            </ul>
                                                        </li>
                                                        <li><a>上海</a></li>
                                                        <li><a>重庆</a></li>
                                                    </ul>
                                                </div>
                                                <div class="ax-col ax-col-6">
                                                    禁止编辑并固定工具栏
                                                    <ul class="ax-tree" axTree='toolsShow:true,readonly:[2,3,8],toolsAction:"sticky"'>
                                                        <li><a>北京</a>
                                                            <ul>
                                                                <li><a>朝阳区</a></li>
                                                                <li><a>丰台区</a></li>
                                                                <li><a>海淀区</a></li>
                                                            </ul>
                                                        </li>
                                                        <li><a>广东</a>
                                                            <ul>
                                                                <li><a>广州市</a></li>
                                                                <li><a>深圳市</a></li>
                                                            </ul>
                                                        </li>
                                                        <li><a>上海</a></li>
                                                        <li><a>重庆</a></li>
                                                    </ul>
                                                </div>
                                                <div class="ax-col ax-col-6">
                                                    以dialog方式删除
                                                    <ul class="ax-tree" id="dialogDel">
                                                        <li><a>北京</a>
                                                            <ul>
                                                                <li><a>朝阳区</a></li>
                                                                <li><a>丰台区</a></li>
                                                                <li><a>海淀区</a></li>
                                                            </ul>
                                                        </li>
                                                        <li><a>广东</a>
                                                            <ul>
                                                                <li><a>广州市</a></li>
                                                                <li><a>深圳市</a></li>
                                                            </ul>
                                                        </li>
                                                        <li><a>上海</a></li>
                                                        <li><a>重庆</a></li>
                                                    </ul>
                                                </div>
                                                <div class="ax-col ax-col-6">
                                                    添加新工具
                                                    <ul class="ax-tree" id="newTool">
                                                        <li><a>北京</a>
                                                            <ul>
                                                                <li><a>朝阳区</a></li>
                                                                <li><a>丰台区</a></li>
                                                                <li><a>海淀区</a></li>
                                                            </ul>
                                                        </li>
                                                        <li><a>广东</a>
                                                            <ul>
                                                                <li><a>广州市</a></li>
                                                                <li><a>深圳市</a></li>
                                                            </ul>
                                                        </li>
                                                        <li><a>上海</a></li>
                                                        <li><a>重庆</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                            

拖拽

axTree可以通过设置draggable参数让树结构可拖拽,通过拖拽节点改变树节点顺序和父子关系,默认为false即不启用拖拽。

  • draggable:true表示整个树节点启用拖拽功能
  • draggable:false表示整个树节点不启用拖拽功能
  • draggable:[2,3,6]表示整个树节点只对id为2,3,6启用拖拽功能
                                <div class="ax-col ax-col-12">
                                    启用拖拽
                                    <ul class="ax-tree" axTree='toolsShow:true,draggable:true'>
                                        <li><a>北京</a>
                                            <ul>
                                                <li><a>朝阳区</a></li>
                                                <li><a>丰台区</a></li>
                                                <li><a>海淀区</a></li>
                                            </ul>
                                        </li>
                                        <li><a>广东</a>
                                            <ul>
                                                <li><a>广州市</a></li>
                                                <li><a>深圳市</a></li>
                                            </ul>
                                        </li>
                                        <li><a>上海</a></li>
                                        <li><a>重庆</a></li>
                                    </ul>
                                </div>
                                <div class="ax-col ax-col-12">
                                    指定节点可拖拽
                                    <ul class="ax-tree" axTree='toolsShow:true,draggable:[2,3,4,5,6]'>
                                        <li><a>北京</a>
                                            <ul>
                                                <li><a>朝阳区(可拖拽)</a></li>
                                                <li><a>丰台区(可拖拽)</a></li>
                                                <li><a>海淀区(可拖拽)</a></li>
                                            </ul>
                                        </li>
                                        <li><a>广东(可拖拽)</a>
                                            <ul>
                                                <li><a>广州市(可拖拽)</a></li>
                                                <li><a>深圳市</a></li>
                                            </ul>
                                        </li>
                                        <li><a>上海</a></li>
                                        <li><a>重庆</a></li>
                                    </ul>
                                </div>
                

设置属性

可通过简单的参数设置树菜单的checked、disabled、expanded、toggle、collapseAll属性。

  • checked表示初始化后将那些节点勾选中,id数组格式,比如[2,3,6,7]
  • disabled表示初始化后将那些节点禁用(即不可勾选checked),id数组格式,比如[2,3,6,7]
  • expanded表示初始化后将那些节点展开,id数组格式,比如[5]
  • toggle表示是否使用手风琴式的折叠,也就是兄弟节点中只允许展开一个节点,默认为true
  • collapseAll表示初始化是否全部折叠父节点,默认为true,可选择true则会展开所有父节点,如果已经设置了expanded参数,该参数将无效
  • selected表示初始化高亮的节点,id数组格式,比如[2,3,6,7],默认为空;跟该参数配合使用的是onSelected,表示整个tree是否只允许一个节点高亮,默认为true
                            <div class="ax-row ax-split">
                                <div class="ax-col ax-col-8">
                                    指定节点checked
                                    <ul class="ax-tree" axTree='checkShow:true,checked:[2,3,6,7]'>
                                        <li><a>北京</a>
                                            <ul>
                                                <li><a>朝阳区</a></li>
                                                <li><a>丰台区</a></li>
                                                <li><a>海淀区</a></li>
                                            </ul>
                                        </li>
                                        <li><a>广东</a>
                                            <ul>
                                                <li><a>广州市</a></li>
                                                <li><a>深圳市</a></li>
                                            </ul>
                                        </li>
                                        <li><a>上海</a></li>
                                        <li><a>重庆</a></li>
                                    </ul>
                                </div>
                                <div class="ax-col ax-col-8">
                                    指定节点disabled
                                    <ul class="ax-tree" axTree='checkShow:true,disabled:[2,3,6,7,9]'>
                                        <li><a>北京</a>
                                            <ul>
                                                <li><a>朝阳区</a></li>
                                                <li><a>丰台区</a></li>
                                                <li><a>海淀区</a></li>
                                            </ul>
                                        </li>
                                        <li><a>广东</a>
                                            <ul>
                                                <li><a>广州市</a></li>
                                                <li><a>深圳市</a></li>
                                            </ul>
                                        </li>
                                        <li><a>上海</a></li>
                                        <li><a>重庆</a></li>
                                    </ul>
                                </div>
                                <div class="ax-col ax-col-8">
                                    指定节点expanded
                                    <ul class="ax-tree" axTree='expanded:[1]'>
                                        <li><a>北京</a>
                                            <ul>
                                                <li><a>朝阳区</a></li>
                                                <li><a>丰台区</a></li>
                                                <li><a>海淀区</a></li>
                                            </ul>
                                        </li>
                                        <li><a>广东</a>
                                            <ul>
                                                <li><a>广州市</a></li>
                                                <li><a>深圳市</a></li>
                                            </ul>
                                        </li>
                                        <li><a>上海</a></li>
                                        <li><a>重庆</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="ax-break"></div>
                            <div class="ax-row ax-split">
                                <div class="ax-col ax-col-8">
                                    toggle为false
                                    <ul class="ax-tree" axTree='toggle:false'>
                                        <li><a>北京</a>
                                            <ul>
                                                <li><a>朝阳区</a></li>
                                                <li><a>丰台区</a></li>
                                                <li><a>海淀区</a></li>
                                            </ul>
                                        </li>
                                        <li><a>广东</a>
                                            <ul>
                                                <li><a>广州市</a></li>
                                                <li><a>深圳市</a></li>
                                            </ul>
                                        </li>
                                        <li><a>上海</a></li>
                                        <li><a>重庆</a></li>
                                    </ul>
                                </div>
                                <div class="ax-col ax-col-8">
                                    collapseAll为false
                                    <ul class="ax-tree" axTree='collapseAll:false'>
                                        <li><a>北京</a>
                                            <ul>
                                                <li><a>朝阳区</a></li>
                                                <li><a>丰台区</a></li>
                                                <li><a>海淀区</a></li>
                                            </ul>
                                        </li>
                                        <li><a>广东</a>
                                            <ul>
                                                <li><a>广州市</a></li>
                                                <li><a>深圳市</a></li>
                                            </ul>
                                        </li>
                                        <li><a>上海</a></li>
                                        <li><a>重庆</a></li>
                                    </ul>
                                </div>
                                <div class="ax-col ax-col-8">
                                    selected+oneSelected多个节点高亮
                                    <ul class="ax-tree" axTree='selected:[1,8],oneSelected:false'>
                                        <li><a>北京</a>
                                            <ul>
                                                <li><a>朝阳区</a></li>
                                                <li><a>丰台区</a></li>
                                                <li><a>海淀区</a></li>
                                            </ul>
                                        </li>
                                        <li><a>广东</a>
                                            <ul>
                                                <li><a>广州市</a></li>
                                                <li><a>深圳市</a></li>
                                            </ul>
                                        </li>
                                        <li><a>上海</a></li>
                                        <li><a>重庆</a></li>
                                    </ul>
                                </div>
                            </div>
    

数据源

axTree支持五种数据源以适应不同开发方式。

  • 1、对现有的ul+li的dom结构直接渲染成插件数据源,对ul写上id="#demo",插件content:"#demo"即可
  • 2、json格式的多维树结构数据,该数据的重要特征是以children属性进行父子关联
  • 3、json格式的一维数组结构,该数据的重要特征是以id和pId属性进行父子关联
  • 4、以ajax异步的方式获取同域的json文件进行数据解析,json文件中的数据格式同2或3;注意id应该从1开始,插件是将0作为顶级父节点的
  • 5、以ajax异步方式向动态文件发起请求或许sql数据,数据格式同3;不像前面4种方式会一次全部加载所有节点,从sql获取数据的一个特点是:一次只会检索并加载第一层子节点;注意id应该从1开始,插件是将0作为顶级父节点的

以下若干实例为非ul+li数据实例。

children多维数据
id+pId一维数据
同域json数据
sql请求数据
  •                                         <div class="ax-row ax-split">
                                                <div class="ax-col ax-col-6">
                                                    children多维数据
                                                    <ul class="ax-tree" id="childrenFormat">
                                                    </ul>
                                                </div>
                                                <div class="ax-col ax-col-6">
                                                    id+pId一维数据
                                                    <ul class="ax-tree" id="pidFormat">
                                                    </ul>
                                                </div>
                                                <div class="ax-col ax-col-6">
                                                    同域json数据
                                                    <ul class="ax-tree" id="jsonFormat">
                                                    </ul>
                                                </div>
                                                <div class="ax-col ax-col-6">
                                                    sql请求数据
                                                    <ul class="ax-tree" id="sqlFormat">
                                                    </ul>
                                                </div>
                                            </div>
                            
  •                                             //多维数组
                                                let childrenData = [
                                                    {
                                                        id: 1, label: '北京市', children: [
                                                            { id: 2, label: '朝阳区' },
                                                            { id: 3, label: '丰台区' },
                                                            { id: 4, label: '海淀区' },
                                                        ]
                                                    },
                                                    {
                                                        id: 5, label: '广东省', children: [
                                                            { id: 6, label: '广州市' },
                                                            { id: 7, label: '深圳市' },
                                                        ]
                                                    },
                                                    { id: 8, label: '上海市', },
                                                    { id: 9, label: '重庆市' },
                                                ],
                                                    childrenIns = new axTree('#childrenFormat', {
                                                        content: childrenData,
                                                        rootStart:0,
                                                    });
                                                //一维数组
                                                let pidData = [
                                                    { id: 1, pId: 0, label: "北京市" },
                                                    { id: 2, pId: 1, label: "朝阳区" },
                                                    { id: 3, pId: 1, label: "丰台区" },
                                                    { id: 4, pId: 1, label: "海淀区" },
                                                    { id: 5, pId: 0, label: "广东省", },
                                                    { id: 6, pId: 5, label: "广州市", },
                                                    { id: 7, pId: 5, label: "深圳市", },
                                                    { id: 8, pId: 0, label: '上海市', },
                                                    { id: 9, pId: 0, label: '重庆市' },
                                                ],
                                                    pidIns = new axTree('#pidFormat', {
                                                        content: pidData,
                                                    });
                                                //同域json文件
                                                let jsonoIns = new axTree('#jsonFormat', {
                                                    checkShow:true,
                                                    content: 'ajax/treeSimple.json',
                                                    async: 'json',
                                                });
                                                //从sql获取数据
                                                let sqlIns = new axTree('#sqlFormat', {
                                                    content: 'ajax/treeSql.php',
                                                    async: 'sql',
                                                    rootStart:0,
                                                });
                            
  • [
        {
            "id": 1,
            "label": "北京市",
            "children": [
                {
                    "id": 2,
                    "label": "朝阳区"
                },
                {
                    "id": 3,
                    "label": "丰台区"
                },
                {
                    "id": 4,
                    "label": "海淀区"
                }
            ]
        },
        {
            "id": 5,
            "label": "广东省",
            "children": [
                {
                    "id": 6,
                    "label": "广州市"
                },
                {
                    "id": 7,
                    "label": "深圳市"
                }
            ]
        },
        {
            "id": 8,
            "label": "上海市"
        },
        {
            "id": 9,
            "label": "重庆市"
        }
    ]
                            
  •                                             <?php
                                                header("Content-Type:text/plain;charset=utf-8");
                                                //连接数据库,数据库用户自己定义
                                                $server="自己的数据库地址";
                                                $username="数据库访问账户";
                                                $password="数据库访问密码";
                                                $database="数据库名";
                                                $table = '所在表名';
                                                $connect = mysql_connect($server,$username,$password) or die("数据库链接错误");
                                                mysql_select_db($database,$connect);
                                                mysql_query("set names 'utf8'");
                                                
                                                //检索最终数据
                                                $sqlString="select id,pId,label from {$table} where pId = {$_POST[pId]} order by id+0 asc,pId+0 asc";
                                                $sql=mysql_query($sqlString);
                                                
                                                //根据数据生成对象数组
                                                $result = array();
                                                while ($row = mysql_fetch_object($sql)){
                                                
                                                    //判断本id下是否有子节点,有则追加children属性
                                                    $rows2=mysql_query("select id,pId from {$table} where pId={$row->id}");
                                                    if (mysql_num_rows($rows2) > 0){
                                                        $row->children = array();
                                                    }
                                                
                                                    //sql查出来是string,转成数字
                                                    $row->id = (int)$row->id;
                                                    $row->pId = (int)$row->pId;
                                                
                                                    array_push($result,$row);
                                                }
                                                $success = json_encode($result);
                                                echo $success;
                                                
                                                ?>
                            

点击这里可直接下载所需的sql文件。

字符串id和pId

id和pId通常为数字类型,但是有些项目有历史传承问题或需要特别编码,需要自定义格式的字符串作为id和pId。

以下演示uuid创建tree实例。

  •                                             <ul class="ax-tree" id="uuid">
                            
  •                                             new axTree('#uuid', {
                                                    rootStart: '4A906DD0-FD71-EB95-05FD-B1A5BC1EAF89',
                                                    content: [{
                                                        id: 'FE5DE2AF-FAD2-0D30-B5BB-A7F39BF9D74C',
                                                        pId: '4A906DD0-FD71-EB95-05FD-B1A5BC1EAF89',
                                                        label: "北京市"
                                                    }, {
                                                        id: 'F9C5AD07-DA56-9925-752B-DB708C990FB1',
                                                        pId: 'FE5DE2AF-FAD2-0D30-B5BB-A7F39BF9D74C',
                                                        label: "朝阳区"
                                                    }, {
                                                        id: 'CC75A8A4-E37B-638B-E480-EF46FA77138D',
                                                        pId: 'FE5DE2AF-FAD2-0D30-B5BB-A7F39BF9D74C',
                                                        label: "丰台区"
                                                    }, {
                                                        id: '462CD1CB-6A4F-C190-60F9-4280E223FBA6',
                                                        pId: 'FE5DE2AF-FAD2-0D30-B5BB-A7F39BF9D74C',
                                                        label: "海淀区"
                                                    }, {
                                                        id: 'F9CDA624-8AAC-632B-C28A-F05E595562DD',
                                                        pId: '4A906DD0-FD71-EB95-05FD-B1A5BC1EAF89',
                                                        label: "广东省",
                                                    }, {
                                                        id: '876F4D96-2FDB-A730-2E77-05640E726E5A',
                                                        pId: 'F9CDA624-8AAC-632B-C28A-F05E595562DD',
                                                        label: "广州市",
                                                    }, {
                                                        id: '9C2BCDBF-A95E-3A68-8A00-8EC4E49972F7',
                                                        pId: 'F9CDA624-8AAC-632B-C28A-F05E595562DD',
                                                        label: "深圳市",
                                                    }, {
                                                        id: 'BB7E3FAF-22BB-6E67-9834-F3165F0C5DC6',
                                                        pId: '4A906DD0-FD71-EB95-05FD-B1A5BC1EAF89',
                                                        label: '上海市',
                                                    }, {
                                                        id: '6A15B3F4-9378-F032-5710-81B54FA30C28',
                                                        pId: '4A906DD0-FD71-EB95-05FD-B1A5BC1EAF89',
                                                        label: '重庆市'
                                                    }]
                                                });
                            

赋值

插件默认需要手动赋值(可通过getValues方法获得值),如果需要自动赋值请使用output参数,该参数为一个对象,其属性如下

  • enable:是否开启自动赋值,默认false,使用true开启
  • receiver:赋值的容器,容器可以是input、textarea或普通标签(div等),参数可填#id、.className、.nodeName或节点。
  • type:输出值类型,默认为空即输出所checked的项label;ultimate即输出终极项(无children属性)的label文本;chain即输出整个层级链条(path);parent只输出所有父节点(有children属性)
  • from:从哪类元素获得数据源,默认checked元素即从树中checked状态的元素获取值,可选selected
  • connector:输出路径值链接符,默认'/',对type=chain有效。
  • separator:输出多值的分隔符,默认为英文逗号。
                                <input type="text" id="receiver" />
                                <ul class="ax-tree" axTree='output:{enable:true,receiver:"#receiver"},checkShow:true'>
                                    <li><a>北京</a>
                                        <ul>
                                            <li><a>朝阳区</a></li>
                                            <li><a>丰台区</a></li>
                                            <li><a>海淀区</a></li>
                                        </ul>
                                    </li>
                                    <li><a>广东</a>
                                        <ul>
                                            <li><a>广州市</a></li>
                                            <li><a>深圳市</a></li>
                                        </ul>
                                    </li>
                                    <li><a>上海</a></li>
                                    <li><a>重庆</a></li>
                                </ul>
                    

展示方式

可通过display参数设置插件展示方式,默认值为inline即插件默认在页面以物理节点存在,设为popup值将以气泡形式展示,popup形式将目标节点变为气泡的打开按钮。

如果需要设置气泡风格可通过参数popup设置,与axPopup参数设置方法一致。

使用popup模式等同于treeSelect,所以将被强制允许赋值。如果需要设置输出值格式,请设置output参数。

  •                                             <input type="text" id="popup" />
                            
  •                                             let pidData = [{
                                                    id: 1,
                                                    pId: 0,
                                                    label: "北京市"
                                                }, {
                                                    id: 2,
                                                    pId: 1,
                                                    label: "朝阳区"
                                                }, {
                                                    id: 3,
                                                    pId: 1,
                                                    label: "丰台区"
                                                }, {
                                                    id: 4,
                                                    pId: 1,
                                                    label: "海淀区"
                                                }, {
                                                    id: 5,
                                                    pId: 0,
                                                    label: "广东省",
                                                }, {
                                                    id: 6,
                                                    pId: 5,
                                                    label: "广州市",
                                                }, {
                                                    id: 7,
                                                    pId: 5,
                                                    label: "深圳市",
                                                }, {
                                                    id: 8,
                                                    pId: 0,
                                                    label: '上海市',
                                                }, {
                                                    id: 9,
                                                    pId: 0,
                                                    label: '重庆市'
                                                },]
                                                new axTree('#popup', {
                                                    display:'popup',
                                                    checkShow: true,
                                                    content: pidData,
                                                    linkage:false,
                                                    selectable:false,
                                                    clickLineTo:'check',
                                                });
                            

操作方法

axTree插件有系列内部成员变量和内部操作方法,用户根据这些变量和方法可以自由操作实例,并且方便与其他非tree节点进行交互。

请使用f12打开浏览器控制台来观摩以下实例。

  • 内部成员变量:
    • this.flatData:输出当前tree的一维对象数组,包含的属性如下:
      • id:项目id,数字或字符串类型,如果没有将自动创建(数字类型)
      • pId:父节点id,数字或字符串类型,如果没有将自动创建(数字类型)
      • path:项目路径,例如“-1>1>2”
      • floor:项目层级,第一层为1
      • children:子元素,是数组
      • label:标题,支持HTML文本
      • selected:是否为选中状态
      • disabled:是否为禁用状态
      • expanded:是否为激活项(焦点项)
      • wrapperDom:项目总节点(li)
      • headerDom:标题行节点(div)
      • labelDom:标题的标题节点(a或i)
      • arrowDom:指示箭头节点(i)
      • addDom:添加按钮节点(i)
      • removeDom:删除按钮节点(i)
      • editDom:编辑按钮节点(i)
      • legendDom:图标节点(i)
      • toosDom:工具外节点(span)
      • indentDom:缩进节点(span)
      • checkDom:勾选节点(i)
      • otherTools:其他工具数组,数组中的属性有dom(工具节点)和callback,callback支持一个参数即项目本身对象
      • callback:回调函数,支持一个参数即项目本身,this指向实例本身
    • this.treeData:输出当前tree的原始多维对象数组
    • this.checkeds:输出当前tree的所有checked节点的id数组
    • this.selecteds:输出当前tree的所有高亮节点的id数组
    • this.expandeds:输出当前tree的所有已经展开父节点的id数组
    • this.disableds:输出当前tree的所有禁止勾选节点的id数组
    • this.searchs:输出当前检索项的对象数组
    • this.readonlys:输出当前只读数组(不可增删改)
  • 内部操作方法:
    • this.add(newItem, target,isChild, isFront,callback):增加新节点,参数说明如下:
      • newItem:对象类型,新增的节点对象,必须包含id和pId,该参数可为空
      • target:对象类型,基于哪个节点进行新增,是从flatData取得的对象,如果为空将在tree最后新增一个兄弟节点
      • isChild:布尔值类型,新增的节点是target的子几点还是兄弟节点,默认是true子节点,可选择false兄弟节点
      • isFront:布尔值类型,新增的节点相对target的位置;默认true在前方,可填false在后方
      • callback:函数类型,新增节点后的回调函数,有两个参数分别是target和newItem,都是对象类型
    • this.remove(target,callback):参数一个节点以及子节点,参数说明如下:
      • target:对象类型,将要删除的节点,同时从flatData和treeData中删除
      • callback:函数类型,删除节点后的回调函数,有一个参数是target,也就是自己
    • this.edit(target,callback):编辑节点,参数说明如下:
      • target:对象类型,将要编辑的节点,是从flatData取得的对象
      • callback:函数类型,编辑节点后的回调函数,有一个参数是target,也就是自己
    • this.getParents(ids,mode):获取节点的所有父节点数组,两个参数说明如下:
      • ids:可以是一个ID、一个对象或者一个ID数组
      • mode:字符串类型,是获取父节点对象还是父ID,默认是obj获取父对象,可填id以获取父ID,也可填both表示返回obj和id的对象
    • this.getChildren(ids):获取节点的所有子节点,一个参数,可以是一个ID、一个对象或者一个ID数组
    • this.search(str,callback):显示关键字所得节点和其父节点,两个参数说明如下:
      • str:字符串类型,检索关键字
      • callback:函数类型,检索后的回调函数,该回调函数支持两个参数:items和value,即所有检索结果对象和检索关键字
    • this.check(ids,flag,callback):勾选或取消勾选,三个参数说明如下:
      • ids:数字或数组类型,为一个ID或一个ID数组
      • flag:布尔类型,勾选还是不勾选,默认是true,可选择false
      • callback:回调函数,支持一个参数即返回的checked数组
    • this.disable(ids,flag,callback):禁止勾选,三个参数说明如下:
      • ids:数字或数组类型,为一个ID或一个ID数组
      • flag:布尔类型,禁用勾选还是启用勾选,默认是true,可选择false
      • callback:回调函数,支持一个参数即返回的disabled数组
    • this.readonly(ids,flag,callback):禁止操作或启用操作,三个参数说明如下:
      • ids:数字或数组类型,为一个ID或一个ID数组
      • flag:布尔类型,禁用操作还是启用操作,默认是true,可选择false
      • callback:回调函数,支持一个参数即返回的readonly数组
    • this.expand(ids,callback):展开父节点,两个参数说明如下:
      • ids:数字或数组类型,为一个ID或一个ID数组
      • callback:回调函数,支持一个参数即返回的展开项数组
    • this.collapse(ids,callback):折叠父节点,两个参数说明如下:
      • ids:数字或数组类型,为一个ID或一个ID数组
      • callback:回调函数,支持一个参数即返回的折叠项数组
    • this.getValues(options={}):获得tree值,options参数中属性说明如下:
      • from:从哪类数据取值,字符串格式,默认checked即从checked项取值,可选择selected
      • isString:是否输出字符串格式,布尔值,默认true,可选择false即输出数组
      • separator:多值分隔符,字符串格式,对输出字符串有用,默认英文逗号
      • type:取值类型,字符串格式,同output.type,即为空或'ultimate'或'parent'或'chain'
      • connector:路径连接符,字符串格式,同output.connector,默认为'/',对type=chain类型有效
    • this.expandAll(callback):展开所有父节点,支持一个参数即回调函数,回调无参数
    • this.collapseAll(callback):折叠所有父节点,支持一个参数即回调函数,回调无参数
    • this.reset(callback):重置插件,清除所有节点从0创建,支持一个参数即回调函数,回调无参数
  •                                         <div class="ax-row ax-split">
                                                <div class="ax-col ax-col-8">
                                                    <ul class="ax-tree" id="method"></ul>
                                                </div>
                                                <div class="ax-col ax-col-16">
                                                    <div>内部成员变量</div>
                                                    <a href="###" class="ax-btn" id="checked">checked节点ID</a>
                                                    <a href="###" class="ax-btn" id="selected">selected节点ID</a>
                                                    <a href="###" class="ax-btn" id="expanded">expanded节点ID</a>
                                                    <a href="###" class="ax-btn" id="disabled">disabled节点ID</a>
                                                    <div class="ax-break"></div>
                                                    <a href="###" class="ax-btn" id="flatData">flatData一维数组</a>
                                                    <a href="###" class="ax-btn" id="treeData">treeData多维数组</a>
                                                    <a href="###" class="ax-btn" id="searchs">当前检索对象数组</a>
                                                    <div class="ax-break"></div>
                                                    <a href="###" class="ax-btn" id="readonlys">当前只读数组</a>
        
                                                    <div class="ax-break"></div>
                                                    <div>一般操作方法</div>
                                                    <a href="###" class="ax-btn" id="addBrotherFront">向前增加兄弟节点</a>
                                                    <a href="###" class="ax-btn" id="addBrotherBehind">向后增加兄弟节点</a>
                                                    <a href="###" class="ax-btn" id="addChildFront">向前增加子节点</a>
                                                    <div class="ax-break"></div>
                                                    <a href="###" class="ax-btn" id="addChildBehind">向后增加子节点</a>
                                                    <a href="###" class="ax-btn" id="remove">删除节点</a>
                                                    <a href="###" class="ax-btn" id="edit">编辑节点</a>
                                                    <div class="ax-break"></div>
                                                    <a href="###" class="ax-btn" id="getParents">获得父元素对象</a>
                                                    <a href="###" class="ax-btn" id="getChildren">获得子元素对象</a>
                                                    <a href="###" class="ax-btn" id="search">关键字搜索</a>
                                                    <a href="###" class="ax-btn" id="blank">空字符搜索</a>
                                                    <div class="ax-break"></div>
                                                    <a href="###" class="ax-btn" id="check">勾选节点</a>
                                                    <a href="###" class="ax-btn" id="uncheck">取消勾选节点</a>
                                                    <a href="###" class="ax-btn" id="disable">禁止勾选</a>
                                                    <a href="###" class="ax-btn" id="able">允许勾选</a>
                                                    <a href="###" class="ax-btn" id="readonly">禁止增删改</a>
                                                    <div class="ax-break"></div>
                                                    <a href="###" class="ax-btn" id="cando">允许增删改</a>
                                                    <a href="###" class="ax-btn" id="expand">展开父节点</a>
                                                    <a href="###" class="ax-btn" id="collapse">折叠父节点</a>
                                                    <a href="###" class="ax-btn" id="expandAll">全部展开</a>
                                                    <a href="###" class="ax-btn" id="collapseAll">全部折叠</a>
        
                                                    <div class="ax-break"></div>
                                                    <div>取值方法</div>
                                                    <a href="###" class="ax-btn" id="getValueCkd">从checked项中取值</a>
                                                    <a href="###" class="ax-btn" id="getValueStd">从selected项中取值</a>
                                                    <a href="###" class="ax-btn" id="getValueCkdPath">从checked路径取值</a>
                                                    <div class="ax-break"></div>
                                                    <a href="###" class="ax-btn" id="getValueStdPath">从selected路径取值</a>
                                                    <a href="###" class="ax-btn" id="getValueUlt">只取终极元素值</a>
                                                    <a href="###" class="ax-btn" id="getValueParent">只取父元素值</a>
        
                                                    <div class="ax-break"></div>
                                                    <div>其他</div>
                                                    <a href="###" class="ax-btn" id="reset">重置</a>
                                                </div>
                                            </div>
                            
  •                                             let methodIns = new axTree('#method', {
                                                    expanded: [2, 8, 12, 17],
                                                    checkShow: true,
                                                    oneSelected: false,
                                                    toolsShow: true,
                                                    toolsAction: 'sticky',
                                                    disabled: [5, 21],
                                                    readonly: [2, 3],
                                                    draggable: true,
                                                    checkShow: true,
                                                    content: 'ajax/treeComplex.json',
                                                    async: 'json',
                                                });
                                                let checked = document.querySelector('#checked'),
                                                    selected = document.querySelector('#selected'),
                                                    expanded = document.querySelector('#expanded'),
                                                    disabled = document.querySelector('#disabled'),
                                                    flatData = document.querySelector('#flatData'),
                                                    treeData = document.querySelector('#treeData'),
                                                    searchs = document.querySelector('#searchs'),
                                                    readonlys = document.querySelector('#readonlys'),
                                                    addBrotherFront = document.querySelector('#addBrotherFront'),
                                                    addBrotherBehind = document.querySelector('#addBrotherBehind'),
                                                    addChildFront = document.querySelector('#addChildFront'),
                                                    addChildBehind = document.querySelector('#addChildBehind'),
                                                    remove = document.querySelector('#remove'),
                                                    edit = document.querySelector('#edit'),
                                                    getParents = document.querySelector('#getParents'),
                                                    getChildren = document.querySelector('#getChildren'),
                                                    search = document.querySelector('#search'),
                                                    blank = document.querySelector('#blank'),
                                                    check = document.querySelector('#check'),
                                                    uncheck = document.querySelector('#uncheck'),
                                                    able = document.querySelector('#able'),
                                                    disable = document.querySelector('#disable'),
                                                    readonly = document.querySelector('#readonly'),
                                                    cando = document.querySelector('#cando'),
                                                    expand = document.querySelector('#expand'),
                                                    collapse = document.querySelector('#collapse'),
                                                    expandAll = document.querySelector('#expandAll'),
                                                    getValueCkd = document.querySelector('#getValueCkd'),
                                                    getValueStd = document.querySelector('#getValueStd'),
                                                    getValueCkdPath = document.querySelector('#getValueCkdPath'),
                                                    getValueStdPath = document.querySelector('#getValueStdPath'),
                                                    getValueUlt = document.querySelector('#getValueUlt'),
                                                    getValueParent = document.querySelector('#getValueParent'),
                                                    collapseAll = document.querySelector('#collapseAll'),
                                                    reset = document.querySelector('#reset');
                                                checked.onclick = function () {
                                                    console.log(methodIns.checkeds);
                                                }
                                                selected.onclick = function () {
                                                    console.log(methodIns.selecteds);
                                                }
                                                expanded.onclick = function () {
                                                    console.log(methodIns.expandeds);
                                                }
                                                disabled.onclick = function () {
                                                    console.log(methodIns.disableds);
                                                }
                                                flatData.onclick = function () {
                                                    console.log(methodIns.flatData)
                                                }
                                                treeData.onclick = function () {
                                                    console.log(methodIns.treeData);
                                                }
                                                searchs.onclick = function () {
                                                    console.log(methodIns.searchs);
                                                }
                                                readonlys.onclick = function () {
                                                    console.log(methodIns.readonlys);
                                                }
                                                addBrotherFront.onclick = function () {
                                                    methodIns.add('', 3, false, true);
                                                }
                                                addBrotherBehind.onclick = function () {
                                                    methodIns.add('', 4, false, false);
                                                }
                                                addChildFront.onclick = function () {
                                                    methodIns.add('', 1, true, true);
                                                }
                                                addChildBehind.onclick = function () {
                                                    methodIns.add('', 1, true, false);
                                                }
                                                remove.onclick = function () {
                                                    methodIns.remove(5);
                                                }
                                                edit.onclick = function () {
                                                    methodIns.edit(6);
                                                }
                                                getParents.onclick = function () {
                                                    console.log(methodIns.getParents([4, 2, 18, 13, 12]));
                                                }
                                                getChildren.onclick = function () {
                                                    console.log(methodIns.getChildren(21));
                                                }
                                                search.onclick = function () {
                                                    methodIns.search('区');
                                                    console.log(methodIns.searchs)
                                                }
                                                blank.onclick = function () {
                                                    methodIns.search('');
                                                    console.log(methodIns.searchs)
                                                }
                                                check.onclick = function () {
                                                    methodIns.check([8, 2]);
                                                    console.log(methodIns.checkeds)
                                                }
                                                uncheck.onclick = function () {
                                                    methodIns.check(8, false)
                                                    console.log(methodIns.checkeds)
                                                }
                                                disable.onclick = function () {
                                                    methodIns.disable([1, 6])
                                                    console.log(methodIns.disableds)
                                                }
                                                able.onclick = function () {
                                                    methodIns.disable([1, 6], false)
                                                    console.log(methodIns.disableds)
                                                }
                                                readonly.onclick = function () {
                                                    methodIns.readonly([7, 10])
                                                    console.log(methodIns.readonlys)
                                                }
                                                cando.onclick = function () {
                                                    methodIns.readonly([7, 10], false)
                                                    console.log(methodIns.readonlys)
                                                }
                                                expand.onclick = function () {
                                                    methodIns.expand(7);
                                                }
                                                collapse.onclick = function () {
                                                    methodIns.collapse(7);
                                                }
                                                expandAll.onclick = function () {
                                                    methodIns.expandAll();
                                                }
                                                collapseAll.onclick = function () {
                                                    methodIns.collapseAll();
                                                }
                                                getValueCkd.onclick = function () {
                                                    let data = methodIns.getValues({from:'checked'});
                                                    console.log(data);
                                                }
                                                getValueStd.onclick = function () {
                                                    let data = methodIns.getValues({from:'selected'});
                                                    console.log(data);
                                                }
                                                getValueCkdPath.onclick = function () {
                                                    let data = methodIns.getValues({type:'chain'});
                                                    console.log(data);
                                                }
                                                getValueStdPath.onclick = function () {
                                                    let data = methodIns.getValues({type:'chain',from:'selected'});
                                                    console.log(data);
                                                }
                                                getValueUlt.onclick = function () {
                                                    let data = methodIns.getValues({type:'ultimate'});
                                                    console.log(data);
                                                }
                                                getValueParent.onclick = function () {
                                                    let data = methodIns.getValues({type:'parent'});
                                                    console.log(data);
                                                }
                                                reset.onclick = function () {
                                                    methodIns.reset();
                                                }
                            
  •                                         [
                                                {
                                                    "id": 1,
                                                    "label": "北京市",
                                                    "children": [
                                                        {
                                                            "id": 2,
                                                            "label": "朝阳区"
                                                        },
                                                        {
                                                            "id": 3,
                                                            "label": "丰台区"
                                                        },
                                                        {
                                                            "id": 4,
                                                            "label": "海淀区"
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 5,
                                                    "label": "上海市"
                                                },
                                                {
                                                    "id": 6,
                                                    "label": "重庆市"
                                                },
                                                {
                                                    "id": 7,
                                                    "label": "广东省",
                                                    "children": [
                                                        {
                                                            "id": 8,
                                                            "label": "广州市",
                                                            "children": [
                                                                {
                                                                    "id": 9,
                                                                    "label": "花都区"
                                                                },
                                                                {
                                                                    "id": 10,
                                                                    "label": "番禺区"
                                                                },
                                                                {
                                                                    "id": 11,
                                                                    "label": "越秀区"
                                                                }
                                                            ]
                                                        },
                                                        {
                                                            "id": 12,
                                                            "label": "深圳市",
                                                            "children": [
                                                                {
                                                                    "id": 13,
                                                                    "label": "福田区"
                                                                },
                                                                {
                                                                    "id": 14,
                                                                    "label": "罗湖区",
                                                                    "children": [
                                                                        {
                                                                            "id": 15,
                                                                            "label": "桂园街道"
                                                                        },
                                                                        {
                                                                            "id": 16,
                                                                            "label": "黄贝街道"
                                                                        },
                                                                        {
                                                                            "id": 17,
                                                                            "label": "东门街道"
                                                                        },
                                                                        {
                                                                            "id": 18,
                                                                            "label": "南湖街道"
                                                                        },
                                                                        {
                                                                            "id": 19,
                                                                            "label": "笋岗街道"
                                                                        }
                                                                    ]
                                                                },
                                                                {
                                                                    "id": 20,
                                                                    "label": "龙岗区"
                                                                }
                                                            ]
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 21,
                                                    "label": "湖南省",
                                                    "children": [
                                                        {
                                                            "id": 22,
                                                            "label": "长沙市"
                                                        },
                                                        {
                                                            "id": 23,
                                                            "label": "永州市"
                                                        },
                                                        {
                                                            "id": 24,
                                                            "label": "株洲市"
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 25,
                                                    "label": "湖北省",
                                                    "children": [
                                                        {
                                                            "id": 26,
                                                            "label": "武汉市"
                                                        },
                                                        {
                                                            "id": 27,
                                                            "label": "襄阳市"
                                                        }
                                                    ]
                                                }
                                            ]
                            

关键字检索

实例初始化后,可通过外部的input对tree进行检索,又或者使用按钮进行指定关键字检索,请观摩如下实例:

关键字:
共有0条检索结果
  •                                         <div class="ax-col ax-col-4">
                                                <ul class="ax-tree" id="keyIns">
                                                </ul>
                                            </div>
                                            <div class="ax-col ax-col-20">
                                                <div class="ax-form-group">
                                                    <div class="ax-flex-row">
                                                        <div class="ax-form-label">关键字:</div>
                                                        <div class="ax-form-con">
                                                            <div class="ax-form-con">
                                                                <div class="ax-form-input"><input name="key" placeholder="输入关键字" value="" type="text" id="keyInput"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear id="keyClear"></a></span></div>
                                                                <div class="ax-valid">共有<i id="keyResult">0</i>条检索结果</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
    
                                                <div class="ax-break-md"></div>
    
                                                <div class="ax-form-group">
                                                    <div class="ax-flex-row">
                                                        <div class="ax-form-label"></div>
                                                        <div class="ax-flex-block">
                                                            <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full" id="keyButton">检索“区”</button></div>
                                                        </div>
                                                    </div>
                                                </div>
    
                                            </div>
                            
  •                                             let keyIns = new axTree('#keyIns', {
                                                    content: 'ajax/treeComplex.json',
                                                    async: 'json',
                                                }),
                                                keyInput = document.querySelector('#keyInput'),
                                                keyResult = document.querySelector('#keyResult'),
                                                keyClear = document.querySelector('#keyClear'),
                                                keyButton = document.querySelector('#keyButton');
                                    
                                                keyButton.onclick = function () {
                                                    keyIns.search('区')
                                                    keyInput.value = '区';
                                                    keyResult.innerHTML = keyIns.searchs.length;
                                                }
                                                keyInput.oninput = axDebounce(function(){
                                                    let _this = this;
                                                    keyIns.search(_this.value);
                                                    keyResult.innerHTML = keyIns.searchs.length;
                                                });
                                                keyClear.onclick =function(){
                                                    keyIns.search('');
                                                    keyResult.innerHTML = 0;
                                                }
                            
  •                                         [
                                                {
                                                    "id": 1,
                                                    "label": "北京市",
                                                    "children": [
                                                        {
                                                            "id": 2,
                                                            "label": "朝阳区"
                                                        },
                                                        {
                                                            "id": 3,
                                                            "label": "丰台区"
                                                        },
                                                        {
                                                            "id": 4,
                                                            "label": "海淀区"
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 5,
                                                    "label": "上海市"
                                                },
                                                {
                                                    "id": 6,
                                                    "label": "重庆市"
                                                },
                                                {
                                                    "id": 7,
                                                    "label": "广东省",
                                                    "children": [
                                                        {
                                                            "id": 8,
                                                            "label": "广州市",
                                                            "children": [
                                                                {
                                                                    "id": 9,
                                                                    "label": "花都区"
                                                                },
                                                                {
                                                                    "id": 10,
                                                                    "label": "番禺区"
                                                                },
                                                                {
                                                                    "id": 11,
                                                                    "label": "越秀区"
                                                                }
                                                            ]
                                                        },
                                                        {
                                                            "id": 12,
                                                            "label": "深圳市",
                                                            "children": [
                                                                {
                                                                    "id": 13,
                                                                    "label": "福田区"
                                                                },
                                                                {
                                                                    "id": 14,
                                                                    "label": "罗湖区",
                                                                    "children": [
                                                                        {
                                                                            "id": 15,
                                                                            "label": "桂园街道"
                                                                        },
                                                                        {
                                                                            "id": 16,
                                                                            "label": "黄贝街道"
                                                                        },
                                                                        {
                                                                            "id": 17,
                                                                            "label": "东门街道"
                                                                        },
                                                                        {
                                                                            "id": 18,
                                                                            "label": "南湖街道"
                                                                        },
                                                                        {
                                                                            "id": 19,
                                                                            "label": "笋岗街道"
                                                                        }
                                                                    ]
                                                                },
                                                                {
                                                                    "id": 20,
                                                                    "label": "龙岗区"
                                                                }
                                                            ]
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 21,
                                                    "label": "湖南省",
                                                    "children": [
                                                        {
                                                            "id": 22,
                                                            "label": "长沙市"
                                                        },
                                                        {
                                                            "id": 23,
                                                            "label": "永州市"
                                                        },
                                                        {
                                                            "id": 24,
                                                            "label": "株洲市"
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 25,
                                                    "label": "湖北省",
                                                    "children": [
                                                        {
                                                            "id": 26,
                                                            "label": "武汉市"
                                                        },
                                                        {
                                                            "id": 27,
                                                            "label": "襄阳市"
                                                        }
                                                    ]
                                                }
                                            ]
                            

保存数据

因为主动或被动关闭了浏览器导致对实例的操作未结束,使用保存数据功能可在重新打开浏览器之后恢复关闭之前的状态,此状态包括active状态、disabled状态、内容增减状态以及其他参数状态(视插件而定)。

保存数据功能是基于this.save方法实现的,如果需要使用自动保存功能则需要填写storageName参数并确保该参数在当页localstorage存储中是唯一的。

使用axLocalStorage.get方法来查看保存的数据,关于axLocalStorage用法可点击这里

  •                                             <ul class="ax-tree" id="saveIns"></ul>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn" id="saveAdd">增加“青海省”</a>
                                                <a href="###" class="ax-btn" id="saveRemove">删除“北京”</a>
                                                <a href="###" class="ax-btn" id="saveContent">修改“重庆市”</a>
                                                <a href="###" class="ax-btn" id="saveUpdate">更新参数</a>
                                                <a href="###" class="ax-btn" id="saveLocal">查看本地保存的数据</a>
                                                <a href="###" class="ax-btn" id="saveData">查看详细数据</a>
                                            
  •                                             let saveIns = new axTree('#saveIns', {
                                                    storageName: 'MyTree01',
                                                    content: [
                                                        {
                                                            id: 1, label: '北京市', children: [
                                                                { id: 2, label: '朝阳区' },
                                                                { id: 3, label: '丰台区' },
                                                                { id: 4, label: '海淀区' },
                                                            ]
                                                        },
                                                        {
                                                            id: 5, label: '广东省', children: [
                                                                { id: 6, label: '广州市' },
                                                                { id: 7, label: '深圳市' },
                                                            ]
                                                        },
                                                        { id: 8, label: '上海市', },
                                                        { id: 9, label: '重庆市' },
                                                    ]
                                                    ,
                                                }),
                                                    saveAdd = document.querySelector('#saveAdd'),
                                                    saveRemove = document.querySelector('#saveRemove'),
                                                    saveContent = document.querySelector('#saveContent'),
                                                    saveUpdate = document.querySelector('#saveUpdate'),
                                                    saveLocal = document.querySelector('#saveLocal'),
                                                    saveData = document.querySelector('#saveData');
                                                saveAdd.onclick = () => {
                                                    saveIns.add('青海省');
                                                }
                                                saveRemove.onclick = () => {
                                                    saveIns.remove(1);
                                                }
                                                saveContent.onclick = () => {
                                                    saveIns.updateContent(9, '重庆市被修改了');
                                                }
                                                saveUpdate.onclick = () => {
                                                    saveIns.update({
                                                        expanded: [5],
                                                    });
                                                }
                                                saveLocal.onclick = () => {
                                                    console.log(axLocalStorage.get('MyTree01'));
                                                }
                                                saveData.onclick = () => {
                                                    console.log(saveIns.flatData);
                                                    console.log(saveIns.treeData);
                                                }
                                            

销毁实例

通过使用this.destroy(callback)方法销毁实例,支持回调函数,回调无参数;销毁后可通过init初始化重新启用。

  •                                             <div id="insDestroy"></div>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn ax-primary" id="btnDestroy">立即销毁</a>
                                                <a href="###" class="ax-btn ax-primary" id="btnInit">再次启用</a>
                                            
  •                                             let insDestroy = new axTree('#insDestroy', {
                                                    toolsShow: true,
                                                    checkShow: true,
                                                    draggable: true,
                                                    content: 'ajax/treeComplex.json',
                                                    async: 'json',
                                                }),
                                                    btnDestroy = document.querySelector('#btnDestroy'),
                                                    btnInit = document.querySelector('#btnInit');
                                                btnDestroy.onclick = function () {
                                                    insDestroy.destroy(function () {
                                                        alert('销毁了实例!');
                                                    });
                                                }
                                                btnInit.onclick = function () {
                                                    insDestroy.init();
                                                    alert('重新初始化了实例!');
                                                    console.log('查看初始化数据:');
                                                    console.log(insDestroy.flatData);
                                                }
                                            
  •                                         [
                                                {
                                                    "id": 1,
                                                    "label": "北京市",
                                                    "children": [
                                                        {
                                                            "id": 2,
                                                            "label": "朝阳区"
                                                        },
                                                        {
                                                            "id": 3,
                                                            "label": "丰台区"
                                                        },
                                                        {
                                                            "id": 4,
                                                            "label": "海淀区"
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 5,
                                                    "label": "上海市"
                                                },
                                                {
                                                    "id": 6,
                                                    "label": "重庆市"
                                                },
                                                {
                                                    "id": 7,
                                                    "label": "广东省",
                                                    "children": [
                                                        {
                                                            "id": 8,
                                                            "label": "广州市",
                                                            "children": [
                                                                {
                                                                    "id": 9,
                                                                    "label": "花都区"
                                                                },
                                                                {
                                                                    "id": 10,
                                                                    "label": "番禺区"
                                                                },
                                                                {
                                                                    "id": 11,
                                                                    "label": "越秀区"
                                                                }
                                                            ]
                                                        },
                                                        {
                                                            "id": 12,
                                                            "label": "深圳市",
                                                            "children": [
                                                                {
                                                                    "id": 13,
                                                                    "label": "福田区"
                                                                },
                                                                {
                                                                    "id": 14,
                                                                    "label": "罗湖区",
                                                                    "children": [
                                                                        {
                                                                            "id": 15,
                                                                            "label": "桂园街道"
                                                                        },
                                                                        {
                                                                            "id": 16,
                                                                            "label": "黄贝街道"
                                                                        },
                                                                        {
                                                                            "id": 17,
                                                                            "label": "东门街道"
                                                                        },
                                                                        {
                                                                            "id": 18,
                                                                            "label": "南湖街道"
                                                                        },
                                                                        {
                                                                            "id": 19,
                                                                            "label": "笋岗街道"
                                                                        }
                                                                    ]
                                                                },
                                                                {
                                                                    "id": 20,
                                                                    "label": "龙岗区"
                                                                }
                                                            ]
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 21,
                                                    "label": "湖南省",
                                                    "children": [
                                                        {
                                                            "id": 22,
                                                            "label": "长沙市"
                                                        },
                                                        {
                                                            "id": 23,
                                                            "label": "永州市"
                                                        },
                                                        {
                                                            "id": 24,
                                                            "label": "株洲市"
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 25,
                                                    "label": "湖北省",
                                                    "children": [
                                                        {
                                                            "id": 26,
                                                            "label": "武汉市"
                                                        },
                                                        {
                                                            "id": 27,
                                                            "label": "襄阳市"
                                                        }
                                                    ]
                                                }
                                            ]
                            

在创建实例的时候会自动添加到全局实例合集当中;如果填写了实例名insName,那么可通过axInstance方法进行销毁实例。关于axInstance使用方法请点击这里

监听事件

本插件有若干监听方法,以on为关键字,参数中监听格式为:new instance({onShow:function(){}});实例后监听格式是:instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下:

  • onInit/init 插件初始化后执行,无参数
  • onBeforeRemove 删除节点前执行,支持一个参数即删除对象,返回true将会删除节点,如果是异步的则需要使用this.remove()方法手动删除节点
  • onGetCheckeds 触发checked后的回调函数,支持两个参数arr和target,arr参数为当前checked=true的项目数组,target为当前节点
  • onReset/reset tree重置后执行,无参数
  • onCollapse/collapse 节点折叠前执行,支持参数obj,即当前折叠的节点对象
  • onExpend/expand 节点展开前执行,支持参数obj,即当前展开的节点对象
  • onCollapsed/collapsed 节点折叠后执行,支持参数obj,即当前折叠的节点对象
  • onExpended/expanded 节点展开后执行,支持参数obj,即当前展开的节点对象
  • onCollapseAll/collapseAll 节点全部折叠后执行,无参数
  • onExpendAll/expandAll 节点全部展开后执行,无参数
  • onSetReadonly/setReadonly 设置节点只读后执行,支持参数items,即当前设置只读的对象数组
  • onSetDisabled/setDisabled 设置节点禁止勾选后执行,支持参数items,即当前设置禁止勾选的对象数组
  • onSsetChecked/setChecked 设置节点勾选后执行,支持参数items,即当前设置勾选的对象数组
  • onSearched/searched 关键字搜索后执行,支持参数items和value,即当前检索结果数组和关键字
  • onRemoved/removed 删除节点后执行,支持参数item,即当前删除的节点对象
  • onEditing/editing 正在编辑执行,支持参数item,即当前编辑的节点对象
  • onEdited/edited 编辑节点后执行,支持参数item,即当前编辑的节点对象
  • onAdded/added 新增节点后执行,支持参数obj和target,即新增的节点对象和当前要操作的节点对象
  • onSelected/selected 高亮节点后执行,支持参数item,即当前高亮的节点对象
  • onPlanted/planted tree节点生成后执行,无参数
  • onChecked/checked 点击勾选后执行,支持参数target和checkeds,即当前tree的当前要操作的节点对象和所有checked节点数组
  • onDropped/dropped 拖拽完成后执行,支持参数insert和target,即当前拖拽过来的节点对象和要操作的节点对象
  • onTooMuch/tooMuch checked数量太多后执行,支持length和max,即当前checked节点数量和允许的最多数量
  • onTooLittle/tooLittle checked数量太少后执行,支持length和min,即当前checked节点数量和要求最少数量
  • save/onSave 保存数据后执行,无参数
  • updateContent/onUpdateContent 更新项目label后执行,支持一个参数即当前更新项
  • update/onUpdate 参数更新后执行,无参数
  • destroy/onDestroy 销毁后执行,无参数

演示实例显示结果使用了console.log方法,请按下F12按键打开开发者工具中的“控制台”查看监听效果。

    •                                             <ul class="ax-tree" id="on"></ul>
                                              
    •                                             let onIns = new axTree('#on', {
                                                      toolsShow:true,
                                                      checkShow:true,
                                                      draggable:true,
                                                      content: 'ajax/treeComplex.json',
                                                      async: 'json',
                                                  });
                                                  onIns.on('init',function(){
                                                      console.log('初始化完成!')
                                                  });
                                                  onIns.on('dropped',function(item,insert){
                                                      console.log('拖拽完成!当前节点:'+item.label+',拖入的节点:'+insert.label);
                                                  });
                                                  onIns.on('checked',function(item){
                                                      console.log('勾选了节点!当前节点:'+item.label);
                                                  });
                                                  onIns.on('added',function(item,newItem){
                                                      console.log('新增了节点!当前节点:'+item.label+',新节点:'+newItem.label);
                                                  });
                                                  onIns.on('edited',function(item){
                                                      console.log('编辑了节点!当前节点:'+item.label);
                                                  });
                                                  onIns.on('removed',function(item){
                                                      console.log('删除了节点!当前节点:'+item.label);
                                                  });
                                                  onIns.on('expand',function(item){
                                                      console.log('展开了节点!当前节点:'+item.label);
                                                  });
                                                  onIns.on('collapse',function(item){
                                                      console.log('折叠了节点!当前节点:'+item.label);
                                                  });
                                                  onIns.on('selected',function(item){
                                                      console.log('高亮了节点!当前节点:'+item.label);
                                                  });
                                              
    •                                         [
                                                  {
                                                      "id": 1,
                                                      "label": "北京市",
                                                      "children": [
                                                          {
                                                              "id": 2,
                                                              "label": "朝阳区"
                                                          },
                                                          {
                                                              "id": 3,
                                                              "label": "丰台区"
                                                          },
                                                          {
                                                              "id": 4,
                                                              "label": "海淀区"
                                                          }
                                                      ]
                                                  },
                                                  {
                                                      "id": 5,
                                                      "label": "上海市"
                                                  },
                                                  {
                                                      "id": 6,
                                                      "label": "重庆市"
                                                  },
                                                  {
                                                      "id": 7,
                                                      "label": "广东省",
                                                      "children": [
                                                          {
                                                              "id": 8,
                                                              "label": "广州市",
                                                              "children": [
                                                                  {
                                                                      "id": 9,
                                                                      "label": "花都区"
                                                                  },
                                                                  {
                                                                      "id": 10,
                                                                      "label": "番禺区"
                                                                  },
                                                                  {
                                                                      "id": 11,
                                                                      "label": "越秀区"
                                                                  }
                                                              ]
                                                          },
                                                          {
                                                              "id": 12,
                                                              "label": "深圳市",
                                                              "children": [
                                                                  {
                                                                      "id": 13,
                                                                      "label": "福田区"
                                                                  },
                                                                  {
                                                                      "id": 14,
                                                                      "label": "罗湖区",
                                                                      "children": [
                                                                          {
                                                                              "id": 15,
                                                                              "label": "桂园街道"
                                                                          },
                                                                          {
                                                                              "id": 16,
                                                                              "label": "黄贝街道"
                                                                          },
                                                                          {
                                                                              "id": 17,
                                                                              "label": "东门街道"
                                                                          },
                                                                          {
                                                                              "id": 18,
                                                                              "label": "南湖街道"
                                                                          },
                                                                          {
                                                                              "id": 19,
                                                                              "label": "笋岗街道"
                                                                          }
                                                                      ]
                                                                  },
                                                                  {
                                                                      "id": 20,
                                                                      "label": "龙岗区"
                                                                  }
                                                              ]
                                                          }
                                                      ]
                                                  },
                                                  {
                                                      "id": 21,
                                                      "label": "湖南省",
                                                      "children": [
                                                          {
                                                              "id": 22,
                                                              "label": "长沙市"
                                                          },
                                                          {
                                                              "id": 23,
                                                              "label": "永州市"
                                                          },
                                                          {
                                                              "id": 24,
                                                              "label": "株洲市"
                                                          }
                                                      ]
                                                  },
                                                  {
                                                      "id": 25,
                                                      "label": "湖北省",
                                                      "children": [
                                                          {
                                                              "id": 26,
                                                              "label": "武汉市"
                                                          },
                                                          {
                                                              "id": 27,
                                                              "label": "襄阳市"
                                                          }
                                                      ]
                                                  }
                                              ]
                              

    参数选项

    document.addEventListener("DOMContentLoaded", function() {
          var demo1 = new axTree('#id',{
            insName: '',//实例名称,字符串格式;如果填写了实例名称,那么该实例会被添加到实例合集当中,通过axInstance方法可获取本实例,详细请查看:ax-utils-instance.php
                storageName: '',//存储名称,字符串格式;如果需要保存实例当前数据请设定唯一的值,比如:storageName:'mystorage001'
                toggle: true, //是否同时只显示一个父级菜单,默认是true,可选择false
                collapseAll: true, //是否折叠所有ul,默认是true:折叠,可选择false,全部展开
                disabled: [], //初始化后禁止哪些菜单check和select(可以展开),格式为id数组,填id值
                expanded: [], //初始化要展开的菜单,格式为id数组,填id值
                checked: [], //初始化要check的项,格式为id数组,填id值
                selected: [], //被点击选择成为焦点的分支,格式为id数组,填id值
                readonly: [], //设置只读项,不可点击label,也不能增删改,格式为id数组,填id值
                selectable: true,//是否可选择分支作为焦点,默认允许,可选择false
                oneSelected: true, //是否只能让一个分支成为选择焦点,默认是,可选择false便能使用多个选择焦点
                arrowIcon: ['ax-icon-right', 'ax-icon-right', 'ax-none'], //菜单箭头图标,分别是折叠和打开状态,默认两者一致
                clickLineTo: '',//点击分支行等同于什么,默认为空,填check表示等同checked项;填select等同select项
    
    
                parentIcon: ['ax-icon-folder', 'ax-icon-folder-open'], //父节点的图标,分别是未打开和打开状态
                childIcon: 'ax-icon-file-text', //子节点图标,只有一种状态
                iconShow: false, //是否显示前缀图标,包裹子节点和父节点的图表,默认是false,可使用true显示
    
                checkboxIcon: ['ax-icon-square', 'ax-icon-check-s', 'ax-icon-check-s-f'], //复选三种状态图标,分别是未勾选时、勾选部分和勾选全部
                radioIcon: ['ax-icon-circle', 'ax-icon-radio', 'ax-icon-radio-f'], //单选状态图标,分别是未勾选时、勾选部分和勾选全部
                checkShow: false, //是否显示单选和多选控件,默认false不显示
                checkType: 'checkbox', //如果显示check,那么需要选择check的类型是checkbox还是radio
                checkMin: 0, //可check的最少数量,默认为0,即不限制
                checkMax: 1000000, //可check的最多数量,默认不限制,checkType: 'radio'+checkNum:1表示整个树菜单只能选一个
                linkage: true, //父层子层是否checked联动,对于radio类型,子项有一个选择就等于父层checked=ing;对于checkbox类型,子类全部选中,父层也选中了
                oneRadio: false, //单选排斥的范围,false表示在兄弟节点之间只能选一个,true表示在整个tree只能选一个
    
                url: '', //异步追加菜单地址,html格式,填写举例:'/a/b/ajax.html'
    
                inputWidth: '', //input和select的固定宽度,默认是92px
    
                toolsShow: false, //是否显示增删改工具,默认为false不显示,可选择true显示,与toolsAction参数搭配使用
                toolsAction: 'hover', //增删改工具的显示方式,默认是hover即经过name时显示,可选择click点击name显示或sticky直接显示
                addTools: [], //增加操作方法,举例:[{dom:'<i class="ax-iconfont ax-icon-copy"></i>',callback:function(){}},...],数组格式
    
                rootStart: -1, //顶层的编号,数字类型,通常是0或-1
                idStart: 0,//id开始编号,数字类型;如果从物理节点创建菜单,则需要自动创建项目id,默认第一项id为0
    
                draggable: false, //是否可拖拽,默认false不可拖拽,可使用true启用拖拽,如果需要对某些节点指定可拖拽,可以添加id数组
    
                line: false, //是否显示连线,默认不显示,可使用true显示连线
    
    
                async: '', //异步方式,选择从json文件获取数组数据,或选择sql从数据库获得数据
                ajaxType: 'post', //异步提交的方式,默认post,可填get
                delay: 0, //异步分页内容时延时加载
                fields: '', //使用其他的字段,生成的tree之后显示更多的内容,不仅仅是name,数组格式
    
                content: '', //数据源,支持三种数据类型,说明如下:
                //1、其他ul的#id或节点,ul+li将转成tree数组
                //2、页面数组变量,该数组可以是带pId的一维数组或带children的tree数组
                //3、地址字符串,在启用async前提下,可填json地址或动态页面地址
                //4、如果本身就是ul+li结构并满足插件物理节点要求,则该参数可为空
    
                display: 'inline',//展示方式,默认inline即将tree写入某个容器;可选择popup
                popup: {},//该参数设置popup的参数。如果display值为popup,则可设置该参数
                output: {
                    enable: false,//是否是可赋值的,如果为true则button节点将作为输入元素接收tree值
                    connector: '/',//输出路径值链接符,对type=chain有效
                    type: '',//输出值类型,默认为空即输出所checked的项label;ultimate即输出终极项的label文本;chain即输出整个层级链条(path);parent只输出父节点(多个)
                    from: 'checked',//从哪类原生获得数据源,默认checked元素,可选selected
                    receiver: '',//接收值的节点,可填#id、.className、nodeName或节点
                    separator: ',',//输出多值的分隔符,默认为英文逗号
                },
                breakpoints: {},//使用断点以适配终端,详情查看ax-utils-other.php页面
                onBeforeRemove: '',//删除前等待函数,支持参数obj(节点对象)和dom(节点本身),返回true或false,如果返回true则将删除节点,返回false将停止操作;如果回调中有异步操作需要手动使用this.remove(item)方法删除节点
                onGetCheckeds: '', //触发checked后的回调函数,支持两个参数arr和target,arr参数为当前checked=true的项目数组,target为当前节点
                onInit: '',//回调函数,初始化后执行,无参数
                onCollapse: '',//回调函数,节点折叠前执行,支持参数obj,即当前折叠的节点对象
                onExpand: '',//回调函数,节点展开前执行,支持参数obj,即当前展开的节点对象
                onCollapsed: '',//回调函数,节点折叠后执行,支持参数obj,即当前折叠的节点对象
                onExpanded: '',//回调函数,节点展开后执行,支持参数obj,即当前展开的节点对象
                onCollapseAll: '',//回调函数,节点全部折叠后执行,无参数
                onExpandAll: '',//回调函数,节点全部展开后执行,无参数
                onSetReadonly: '',//回调函数,设置节点只读后执行,支持参数items,即当前设置只读的对象数组
                onSetDisabled: '',//回调函数,设置节点禁止勾选后执行,支持参数items,即当前设置禁止勾选的对象数组
                onSetChecked: '',//回调函数,设置节点勾选后执行,支持参数items,即当前设置勾选的对象数组
                onSearched: '',//回调函数,关键字搜索后执行,支持参数items和value,即当前检索结果数组和关键字
                onRemoved: '',//回调函数,删除节点后执行,支持参数item,即当前删除的节点对象
                onEditing: '',//回调函数,正在编辑执行,支持参数item,即当前编辑的节点对象
                onEdited: '',//回调函数,编辑节点后执行,支持参数item,即当前编辑的节点对象
                onAdded: '',//回调函数,新增节点后执行,支持参数obj和target,即新增的节点对象和当前要操作的节点对象
                onSelected: '',//回调函数,高亮节点后执行,支持参数item,即当前高亮的节点对象
                onPlanted: '',//回调函数,tree节点生成后执行,无参数
                onChecked: '',//回调函数,点击勾选后执行,支持参数target和checkeds,即当前tree的当前要操作的节点对象和所有checked节点数组
                onDropped: '',//回调函数,拖拽完成后执行,支持参数insert和target,即拖拽过来的节点对象和当前要操作的节点对象
                onTooMuch: '',//回调函数,checked数量太多后执行,支持length和max,即当前checked节点数量和允许的最多数量
                onTooLittle: '',//回调函数,checked数量太少后执行,支持length和min,即当前checked节点数量和要求最少数量
                onDestroy: '',//回调函数,销毁后执行,无参数
                onSave: '',//回调函数,保存数据后执行,支持一个参数即localstorage值
                onUpdate: '',//回调函数,参数更新后执行,无参数
                onUpdateContent: '',//回调函数,子项内容更新后执行,支持一个参数即当前更新项
          });
    });
                            
    以axMenu插件为例,如果在元素上通过ax*使用属性,需要使用类似json的写法,属性不需要使用引号,如果值是字符串需要使用引号包裹,如果值是数字、布尔值、null或undefined不需要引号;比如要设置active,那么在元素的ax*属性中应该这样书写:axMenu="active:2"