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、支持除了name外添加更多自定义内容
  • 13、支持以treeTable的形式显示数据
  • 14、支持自定义arrow、check和file图标
  • 15、支持以连线方式连接父和子节点
  • 16、支持selected多选或单选,并与checked联动

运行条件

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

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

点击这里可直接下载该插件。

使用方法

插件运行方式有两种:

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

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>
    

增删改

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.name等属性;this将指向实例本身,所以也可以使用实例内置的所有操作方法
双击节点名称可进入编辑状态;新增的节点id会从现有的节点最大id开始累计,并且dom节点会紧挨着父节点添加。
  •                                             //dialog方式删除
                                                const dialogDel = new axTree('#dialogDel', {
                                                    data: '#dialogDel',
                                                    toolsShow: true,
                                                    removeBefore: function (item) {
                                                        let _this = this;
                                                        new axDialog({
                                                            content: '确定删除么?',
                                                            confirm: {
                                                                callback: function () {
                                                                    _this.remove(item);
                                                                }
                                                            }
                                                        }).show();
                                                    },
                                    
                                                });
                                                //添加新工具
                                                const newTool = new axTree('#newTool', {
                                                    data: '#newTool',
                                                    toolsShow: true,
                                                    toolsAction: 'sticky',
                                                    addTools: [{
                                                        dom: '<i class="ax-iconfont ax-icon-copy">',
                                                        callback: function (item) {
                                                            alert('节点信息:id:'+item.id+',name:'+item.name);
                                                        }
                                                    },
                                                ]
                                                });
                            
  •                                         <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、expand、toggle、collapse属性。

  • checked表示初始化后将那些节点勾选中,id数组格式,比如[2,3,6,7]
  • disabled表示初始化后将那些节点禁用(即不可勾选checked),id数组格式,比如[2,3,6,7]
  • expand表示初始化后将那些节点展开,id数组格式,比如[5]
  • toggle表示是否使用手风琴式的折叠,也就是兄弟节点中只允许展开一个节点,默认为true
  • collapse表示初始化是否全部折叠父节点,默认为true,可选择true则会展开所有父节点,如果已经设置了expand参数,该参数将无效
  • 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">
                                    指定节点expand
                                    <ul class="ax-tree" axTree='expand:[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">
                                    collapse为false
                                    <ul class="ax-tree" axTree='collapse: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",插件data:"#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, name: '北京市', children: [
                                                            { id: 2, name: '朝阳区' },
                                                            { id: 3, name: '丰台区' },
                                                            { id: 4, name: '海淀区' },
                                                        ]
                                                    },
                                                    {
                                                        id: 5, name: '广东省', children: [
                                                            { id: 6, name: '广州市' },
                                                            { id: 7, name: '深圳市' },
                                                        ]
                                                    },
                                                    { id: 5, name: '上海市', },
                                                    { id: 6, name: '重庆市' },
                                                ],
                                                    childrenIns = new axTree('#childrenFormat', {
                                                        data: childrenData
                                                    });
                                                //一维数组
                                                let pidData = [
                                                    { id: 1, pId: 0, name: "北京市" },
                                                    { id: 2, pId: 1, name: "朝阳区" },
                                                    { id: 3, pId: 1, name: "丰台区" },
                                                    { id: 4, pId: 1, name: "海淀区" },
                                                    { id: 5, pId: 0, name: "广东省", },
                                                    { id: 6, pId: 5, name: "广州市", },
                                                    { id: 7, pId: 5, name: "深圳市", },
                                                    { id: 8, pId: 0, name: '上海市', },
                                                    { id: 9, pId: 0, name: '重庆市' },
                                                ],
                                                    pidIns = new axTree('#pidFormat', {
                                                        data: pidData
                                                    });
                                                //同域json文件
                                                let jsonoIns = new axTree('#jsonFormat', {
                                                    checkShow:true,
                                                    data: 'ajax/treeSimple.json',
                                                    async: 'json',
                                                });
                                                //从sql获取数据
                                                let sqlIns = new axTree('#sqlFormat', {
                                                    data: 'ajax/treeSql.php',
                                                    async: 'sql',
                                                });
                            
  • [
        {
            "id": 1,
            "name": "北京市",
            "children": [
                {
                    "id": 2,
                    "name": "朝阳区"
                },
                {
                    "id": 3,
                    "name": "丰台区"
                },
                {
                    "id": 4,
                    "name": "海淀区"
                }
            ]
        },
        {
            "id": 5,
            "name": "广东省",
            "children": [
                {
                    "id": 6,
                    "name": "广州市"
                },
                {
                    "id": 7,
                    "name": "深圳市"
                }
            ]
        },
        {
            "id": 8,
            "name": "上海市"
        },
        {
            "id": 9,
            "name": "重庆市"
        }
    ]
                            
  •                                             <?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,name 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文件。

操作方法

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

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

  • 内部成员变量:
    • this.checkeds:输出当前tree的所有checked节点的id数组
    • this.selecteds:输出当前tree的所有高亮节点的id数组
    • this.expands:输出当前tree的所有已经展开父节点的id数组
    • this.disableds:输出当前tree的所有禁止勾选节点的id数组
    • this.flatData:输出当前tree的一维对象数组
    • this.treeData:输出当前tree的原始多维对象数组
    • this.searchs:输出当前检索项的对象数组
    • this.readonlys:输出当前只读数组(不可增删改)
  • 内部操作方法:
    • this.add(target, newItem, relation, placement,callback):增加新节点,参数说明如下:
      • target:对象类型,基于哪个节点进行新增,是从flatData取得的对象
      • newItem:对象类型,新增的节点对象,必须包含id和pId,该参数可为空
      • relation:字符串类型,新增的节点是target的子几点还是兄弟节点,默认是child子节点,可选择brother兄弟节点
      • placement:字符串类型,新增的节点相对target的位置;默认front,可填behind
      • callback:函数类型,新增节点后的回调函数,有两个参数分别是target和newItem,都是对象类型
    • this.remove(target,callback):参数一个节点以及子节点,参数说明如下:
      • target:对象类型,将要删除的节点,同时从flatData和treeData中删除
      • callback:函数类型,删除节点后的回调函数,有一个参数是target,也就是自己
    • this.edit(target,callback):编辑节点,参数说明如下:
      • target:对象类型,将要编辑的节点,是从flatData取得的对象
      • callback:函数类型,编辑节点后的回调函数,有一个参数是target,也就是自己
    • this.flatTree(data):重新将treeData转成flatData,一个参数:原始的多维数组(children结构)
    • 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):勾选或取消勾选,两个参数说明如下:
      • ids:数字或数组类型,为一个ID或一个ID数组
      • flag:布尔类型,勾选还是不勾选,默认是true,可选择false
    • this.disable(ids,flag):禁止勾选,两个参数说明如下:
      • ids:数字或数组类型,为一个ID或一个ID数组
      • flag:布尔类型,禁用勾选还是启用勾选,默认是true,可选择false
    • this.readonly(ids,flag):禁止操作或启用操作,两个参数说明如下:
      • ids:数字或数组类型,为一个ID或一个ID数组
      • flag:布尔类型,禁用操作还是启用操作,默认是true,可选择false
    • this.expandAll():展开所有父节点,无参数
    • this.collapseAll():折叠所有父节点,无参数
    • this.reset():重置插件,清除所有节点从0创建,无参数
  •                                         <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="expand">expand节点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>
                                                <a href="###" class="ax-btn" id="tranData">转成一维数组</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="expandAll">全部展开</a>
                                                <a href="###" class="ax-btn" id="collapseAll">全部折叠</a>
    
    
                                                <div class="ax-break"></div>
                                                <div>其他</div>
                                                <a href="###" class="ax-btn" id="reset">重置</a>
                                            </div>
                            
  •                                             let methodIns = new axTree('#method', {
                                                    expand: [2, 8, 12, 17],
                                                    checkShow: true,
                                                    oneSelected: false,
                                                    toolsShow: true,
                                                    toolsAction: 'sticky',
                                                    disabled: [5, 21],
                                                    readonly: [2, 3],
                                                    draggable: true,
                                                    checkShow: true,
                                                    data: 'ajax/treeComplex.json',
                                                    async: 'json',
                                                });
                                                let checked = document.querySelector('#checked'),
                                                    selected = document.querySelector('#selected'),
                                                    expand = document.querySelector('#expand'),
                                                    disabled = document.querySelector('#disabled'),
                                                    flatData = document.querySelector('#flatData'),
                                                    treeData = document.querySelector('#treeData'),
                                                    tranData = document.querySelector('#tranData'),
                                                    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'),
                                                    expandAll = document.querySelector('#expandAll'),
                                                    collapseAll = document.querySelector('#collapseAll'),
                                                    reset = document.querySelector('#reset');
                                                checked.onclick = function () {
                                                    console.log(methodIns.checkeds);
                                                }
                                                selected.onclick = function () {
                                                    console.log(methodIns.selecteds);
                                                }
                                                expand.onclick = function () {
                                                    console.log(methodIns.expands);
                                                }
                                                disabled.onclick = function () {
                                                    console.log(methodIns.disableds);
                                                }
                                                flatData.onclick = function () {
                                                    console.log(methodIns.flatData)
                                                }
                                                treeData.onclick = function () {
                                                    console.log(methodIns.treeData);
                                                }
                                                tranData.onclick = function () {
                                                    console.log(methodIns.flatTree(methodIns.treeData));
                                                }
                                                searchs.onclick = function () {
                                                    console.log(methodIns.searchs);
                                                }
                                                readonlys.onclick = function () {
                                                    console.log(methodIns.readonlys);
                                                }
                                                addBrotherFront.onclick = function () {
                                                    methodIns.add(3, '', 'brother', 'front');
                                                }
                                                addBrotherBehind.onclick = function () {
                                                    methodIns.add(4, '', 'brother', 'behind');
                                                }
                                                addChildFront.onclick = function () {
                                                    methodIns.add(1, '', 'child', 'front');
                                                }
                                                addChildBehind.onclick = function () {
                                                    methodIns.add(1, '', 'child', 'behind');
                                                }
                                                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)
                                                }
                                                expandAll.onclick = function () {
                                                    methodIns.expandAll();
                                                }
                                                collapseAll.onclick = function () {
                                                    methodIns.collapseAll();
                                                }
                                                reset.onclick = function () {
                                                    methodIns.reset();
                                                }
                            
  •                                         [
                                                {
                                                    "id": 1,
                                                    "name": "北京市",
                                                    "children": [
                                                        {
                                                            "id": 2,
                                                            "name": "朝阳区"
                                                        },
                                                        {
                                                            "id": 3,
                                                            "name": "丰台区"
                                                        },
                                                        {
                                                            "id": 4,
                                                            "name": "海淀区"
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 5,
                                                    "name": "上海市"
                                                },
                                                {
                                                    "id": 6,
                                                    "name": "重庆市"
                                                },
                                                {
                                                    "id": 7,
                                                    "name": "广东省",
                                                    "children": [
                                                        {
                                                            "id": 8,
                                                            "name": "广州市",
                                                            "children": [
                                                                {
                                                                    "id": 9,
                                                                    "name": "花都区"
                                                                },
                                                                {
                                                                    "id": 10,
                                                                    "name": "番禺区"
                                                                },
                                                                {
                                                                    "id": 11,
                                                                    "name": "越秀区"
                                                                }
                                                            ]
                                                        },
                                                        {
                                                            "id": 12,
                                                            "name": "深圳市",
                                                            "children": [
                                                                {
                                                                    "id": 13,
                                                                    "name": "福田区"
                                                                },
                                                                {
                                                                    "id": 14,
                                                                    "name": "罗湖区",
                                                                    "children": [
                                                                        {
                                                                            "id": 15,
                                                                            "name": "桂园街道"
                                                                        },
                                                                        {
                                                                            "id": 16,
                                                                            "name": "黄贝街道"
                                                                        },
                                                                        {
                                                                            "id": 17,
                                                                            "name": "东门街道"
                                                                        },
                                                                        {
                                                                            "id": 18,
                                                                            "name": "南湖街道"
                                                                        },
                                                                        {
                                                                            "id": 19,
                                                                            "name": "笋岗街道"
                                                                        }
                                                                    ]
                                                                },
                                                                {
                                                                    "id": 20,
                                                                    "name": "龙岗区"
                                                                }
                                                            ]
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 21,
                                                    "name": "湖南省",
                                                    "children": [
                                                        {
                                                            "id": 22,
                                                            "name": "长沙市"
                                                        },
                                                        {
                                                            "id": 23,
                                                            "name": "永州市"
                                                        },
                                                        {
                                                            "id": 24,
                                                            "name": "株洲市"
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 25,
                                                    "name": "湖北省",
                                                    "children": [
                                                        {
                                                            "id": 26,
                                                            "name": "武汉市"
                                                        },
                                                        {
                                                            "id": 27,
                                                            "name": "襄阳市"
                                                        }
                                                    ]
                                                }
                                            ]
                            

关键字检索

实例初始化后,可通过外部的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 ax-val-none" 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', {
                                                    data: '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,
                                                    "name": "北京市",
                                                    "children": [
                                                        {
                                                            "id": 2,
                                                            "name": "朝阳区"
                                                        },
                                                        {
                                                            "id": 3,
                                                            "name": "丰台区"
                                                        },
                                                        {
                                                            "id": 4,
                                                            "name": "海淀区"
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 5,
                                                    "name": "上海市"
                                                },
                                                {
                                                    "id": 6,
                                                    "name": "重庆市"
                                                },
                                                {
                                                    "id": 7,
                                                    "name": "广东省",
                                                    "children": [
                                                        {
                                                            "id": 8,
                                                            "name": "广州市",
                                                            "children": [
                                                                {
                                                                    "id": 9,
                                                                    "name": "花都区"
                                                                },
                                                                {
                                                                    "id": 10,
                                                                    "name": "番禺区"
                                                                },
                                                                {
                                                                    "id": 11,
                                                                    "name": "越秀区"
                                                                }
                                                            ]
                                                        },
                                                        {
                                                            "id": 12,
                                                            "name": "深圳市",
                                                            "children": [
                                                                {
                                                                    "id": 13,
                                                                    "name": "福田区"
                                                                },
                                                                {
                                                                    "id": 14,
                                                                    "name": "罗湖区",
                                                                    "children": [
                                                                        {
                                                                            "id": 15,
                                                                            "name": "桂园街道"
                                                                        },
                                                                        {
                                                                            "id": 16,
                                                                            "name": "黄贝街道"
                                                                        },
                                                                        {
                                                                            "id": 17,
                                                                            "name": "东门街道"
                                                                        },
                                                                        {
                                                                            "id": 18,
                                                                            "name": "南湖街道"
                                                                        },
                                                                        {
                                                                            "id": 19,
                                                                            "name": "笋岗街道"
                                                                        }
                                                                    ]
                                                                },
                                                                {
                                                                    "id": 20,
                                                                    "name": "龙岗区"
                                                                }
                                                            ]
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 21,
                                                    "name": "湖南省",
                                                    "children": [
                                                        {
                                                            "id": 22,
                                                            "name": "长沙市"
                                                        },
                                                        {
                                                            "id": 23,
                                                            "name": "永州市"
                                                        },
                                                        {
                                                            "id": 24,
                                                            "name": "株洲市"
                                                        }
                                                    ]
                                                },
                                                {
                                                    "id": 25,
                                                    "name": "湖北省",
                                                    "children": [
                                                        {
                                                            "id": 26,
                                                            "name": "武汉市"
                                                        },
                                                        {
                                                            "id": 27,
                                                            "name": "襄阳市"
                                                        }
                                                    ]
                                                }
                                            ]
                            

监听事件

借鉴jQuery的写法,本插件有若干监听方法,格式是:instance.on('event',function(){});具体事件说明如下:

  • reset tree重置后执行,无参数
  • collapse 节点折叠后执行,支持参数obj,即当前折叠的节点对象
  • expand 节点展开后执行,支持参数obj,即当前展开的节点对象
  • setReadonly 设置节点只读后执行,支持参数items,即当前设置只读的对象数组
  • setDisabled 设置节点禁止勾选后执行,支持参数items,即当前设置禁止勾选的对象数组
  • setChecked 设置节点勾选后执行,支持参数items,即当前设置勾选的对象数组
  • searched 关键字搜索后执行,支持参数items和value,即当前检索结果数组和关键字
  • removed 删除节点后执行,支持参数item,即当前删除的节点对象
  • edited 编辑节点后执行,支持参数item,即当前编辑的节点对象
  • added 新增节点后执行,支持参数item和obj,即当前要操作的节点对象和新增的节点对象
  • selected 高亮节点后执行,支持参数item,即当前高亮的节点对象
  • planted tree节点生成后执行,无参数
  • clickCheck 点击勾选后执行,支持参数item和checkeds,即当前要操作的节点对象和当前tree的所有checked节点数组
  • dropped 拖拽完成后执行,支持参数item和insert,即当前要操作的节点对象和拖拽过来的节点对象
  • init 插件初始化后执行,无参数
  • tooMuch checked数量太多后执行,支持length和max,即当前checked节点数量和允许的最多数量
  • tooLittle checked数量太少后执行,支持length和min,即当前checked节点数量和要求最少数量

演示实例使用console方法,请用F12打开浏览器控制台查看监听结果。

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

    参数选项

    document.addEventListener("DOMContentLoaded", function() {
          var demo1 = new axTree('#id',{
                toggle: true, //是否同时只显示一个父级菜单,默认是true,可选择false
                collapse: true, //是否折叠所有ul,默认是true:折叠,可选择false,全部展开
                disabled: [], //初始化后禁止哪些菜单check和select(可以展开),格式为id数组,填id值
                expand: [], //初始化要展开的菜单,格式为id数组,填id值
                checked: [], //初始化要check的项,格式为id数组,填id值
                selected: '', //被点击选择成为焦点的分支,多个id用英文逗号隔开,比如selected:[1,6,15]
                oneSelected: true, //是否只能让一个分支成为选择焦点,默认是,可选择false便能使用多个选择焦点
                arrowIcon: ['ax-icon-right', 'ax-icon-right', 'ax-none'], //菜单箭头图标,分别是折叠和打开状态,默认两者一致
    
                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只能选一个
    
                readonly: '', //设置只读项,不可点击name,也不能增删改,数组格式
    
                url: '', //异步追加菜单地址,html格式,填写举例:'/a/b/ajax.html'
                cookie: '', //是否保存cookie,刷新页面保持之前的打开状态,填写唯一字符串,比如:'mycookie001'
    
                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">',callback:function(){}},...],数组格式
    
                firstFloor: 0, //顶层的编号,数字类型
    
                draggable: false, //是否可拖拽,默认false不可拖拽,可使用true启用拖拽,如果需要对某些节点指定可拖拽,可以添加id数组
    
                line: false,//是否显示连线,默认不显示,可使用true显示连线
    
                data: '', //数据源,支持三种数据类型,1是填页面ul的#id,ul+li将转成tree数组,2是填写带pId的一维数组,3是直接是带children的tree数组
                async: '',//异步方式,选择从json文件获取数组数据,或选择sql从数据库获得数据
                delay: 0,//异步分页内容时延时加载
    
                removeBefore: function (item, dom) {
                    return true;
                    //删除前等待函数,返回true或false,如果返回true则将删除节点,返回false将停止操作
                },
                remove: function (id) {
                    //删除节点的回调函数
                },
                getCheckeds: function (obj, arr) {
                    //触发checked后的回调函数,obj为当前节点,arr参数为当前checked=true的项目数组
                },
          });
    });