Tree 树菜单

                                        let citys = [
                                            {
                                                id: 1, label: '北京市', children: [
                                                    { id: 2, label: '朝阳区' },
                                                    { id: 3, label: '丰台区' },
                                                    { id: 4, label: '海淀区' },
                                                ]
                                            },
                                            {
                                                id: 5, label: '广东省', children: [
                                                    { id: 6, label: '广州市' },
                                                    { id: 7, label: '深圳市' },
                                                ]
                                            },
                                            { id: 8, label: '上海市', },
                                            { id: 9, label: '重庆市' },
                                        ]
                            
                                        new axTree('#dft',{
                                            content: citys,
                                        });
                        

                                        <ul class="ax-tree" axTree>
                                            <li><a>北京</a>
                                                <ul>
                                                    <li><a>朝阳区</a></li>
                                                    <li><a>丰台区</a></li>
                                                    <li><a>海淀区</a></li>
                                                </ul>
                                            </li>
                                            <li><a>广东</a>
                                                <ul>
                                                    <li><a>广州市</a></li>
                                                    <li><a>深圳市</a></li>
                                                </ul>
                                            </li>
                                            <li><a>上海</a></li>
                                            <li><a>重庆</a></li>
                                        </ul>

                                        <ul class="ax-tree" id="dft"></ul>
                        

                                            //dialog方式删除
                                            const dialogDel = new axTree('#dialogDel', {
                                                toolsShow: true,
                                                onBeforeRemove: function (item) {
                                                    let _this = this;
                                                    new axDialog({
                                                        content: '确定删除么？',
                                                        confirm: {
                                                            callback: function () {
                                                                _this.remove(item);
                                                            }
                                                        }
                                                    }).show();
                                                },
                                
                                            });
                                            //添加新工具
                                            const newTool = new axTree('#newTool', {
                                                toolsShow: true,
                                                toolsAction: 'sticky',
                                                addTools: [{
                                                    dom: '<i class="ax-iconfont ax-icon-copy">',
                                                    callback: function (item) {
                                                        alert('节点信息：id:'+item.id+'，label:'+item.label);
                                                    }
                                                },
                                            ]
                                            });
                        

                                        <div class="ax-row ax-split">
                                            <div class="ax-col ax-col-6">
                                                普通增删改
                                                <ul class="ax-tree" axTree='toolsShow:true'>
                                                    <li><a>北京</a>
                                                        <ul>
                                                            <li><a>朝阳区</a></li>
                                                            <li><a>丰台区</a></li>
                                                            <li><a>海淀区</a></li>
                                                        </ul>
                                                    </li>
                                                    <li><a>广东</a>
                                                        <ul>
                                                            <li><a>广州市</a></li>
                                                            <li><a>深圳市</a></li>
                                                        </ul>
                                                    </li>
                                                    <li><a>上海</a></li>
                                                    <li><a>重庆</a></li>
                                                </ul>
                                            </div>
                                            <div class="ax-col ax-col-6">
                                                禁止编辑并固定工具栏
                                                <ul class="ax-tree" axTree='toolsShow:true,readonly:[2,3,8],toolsAction:"sticky"'>
                                                    <li><a>北京</a>
                                                        <ul>
                                                            <li><a>朝阳区</a></li>
                                                            <li><a>丰台区</a></li>
                                                            <li><a>海淀区</a></li>
                                                        </ul>
                                                    </li>
                                                    <li><a>广东</a>
                                                        <ul>
                                                            <li><a>广州市</a></li>
                                                            <li><a>深圳市</a></li>
                                                        </ul>
                                                    </li>
                                                    <li><a>上海</a></li>
                                                    <li><a>重庆</a></li>
                                                </ul>
                                            </div>
                                            <div class="ax-col ax-col-6">
                                                以dialog方式删除
                                                <ul class="ax-tree" id="dialogDel">
                                                    <li><a>北京</a>
                                                        <ul>
                                                            <li><a>朝阳区</a></li>
                                                            <li><a>丰台区</a></li>
                                                            <li><a>海淀区</a></li>
                                                        </ul>
                                                    </li>
                                                    <li><a>广东</a>
                                                        <ul>
                                                            <li><a>广州市</a></li>
                                                            <li><a>深圳市</a></li>
                                                        </ul>
                                                    </li>
                                                    <li><a>上海</a></li>
                                                    <li><a>重庆</a></li>
                                                </ul>
                                            </div>
                                            <div class="ax-col ax-col-6">
                                                添加新工具
                                                <ul class="ax-tree" id="newTool">
                                                    <li><a>北京</a>
                                                        <ul>
                                                            <li><a>朝阳区</a></li>
                                                            <li><a>丰台区</a></li>
                                                            <li><a>海淀区</a></li>
                                                        </ul>
                                                    </li>
                                                    <li><a>广东</a>
                                                        <ul>
                                                            <li><a>广州市</a></li>
                                                            <li><a>深圳市</a></li>
                                                        </ul>
                                                    </li>
                                                    <li><a>上海</a></li>
                                                    <li><a>重庆</a></li>
                                                </ul>
                                            </div>
                                        </div>
                        

                                        <div class="ax-row ax-split">
                                            <div class="ax-col ax-col-6">
                                                children多维数据
                                                <ul class="ax-tree" id="childrenFormat">
                                                </ul>
                                            </div>
                                            <div class="ax-col ax-col-6">
                                                id+pId一维数据
                                                <ul class="ax-tree" id="pidFormat">
                                                </ul>
                                            </div>
                                            <div class="ax-col ax-col-6">
                                                同域json数据
                                                <ul class="ax-tree" id="jsonFormat">
                                                </ul>
                                            </div>
                                            <div class="ax-col ax-col-6">
                                                sql请求数据
                                                <ul class="ax-tree" id="sqlFormat">
                                                </ul>
                                            </div>
                                        </div>
                        

                                            //多维数组
                                            let childrenData = [
                                                {
                                                    id: 1, label: '北京市', children: [
                                                        { id: 2, label: '朝阳区' },
                                                        { id: 3, label: '丰台区' },
                                                        { id: 4, label: '海淀区' },
                                                    ]
                                                },
                                                {
                                                    id: 5, label: '广东省', children: [
                                                        { id: 6, label: '广州市' },
                                                        { id: 7, label: '深圳市' },
                                                    ]
                                                },
                                                { id: 8, label: '上海市', },
                                                { id: 9, label: '重庆市' },
                                            ],
                                                childrenIns = new axTree('#childrenFormat', {
                                                    content: childrenData,
                                                    rootStart:0,
                                                });
                                            //一维数组
                                            let pidData = [
                                                { id: 1, pId: 0, label: "北京市" },
                                                { id: 2, pId: 1, label: "朝阳区" },
                                                { id: 3, pId: 1, label: "丰台区" },
                                                { id: 4, pId: 1, label: "海淀区" },
                                                { id: 5, pId: 0, label: "广东省", },
                                                { id: 6, pId: 5, label: "广州市", },
                                                { id: 7, pId: 5, label: "深圳市", },
                                                { id: 8, pId: 0, label: '上海市', },
                                                { id: 9, pId: 0, label: '重庆市' },
                                            ],
                                                pidIns = new axTree('#pidFormat', {
                                                    content: pidData,
                                                });
                                            //同域json文件
                                            let jsonoIns = new axTree('#jsonFormat', {
                                                checkShow:true,
                                                content: 'ajax/treeSimple.json',
                                                async: 'json',
                                            });
                                            //从sql获取数据
                                            let sqlIns = new axTree('#sqlFormat', {
                                                content: 'ajax/treeSql.php',
                                                async: 'sql',
                                                rootStart:0,
                                            });
                        

[
    {
        "id": 1,
        "label": "北京市",
        "children": [
            {
                "id": 2,
                "label": "朝阳区"
            },
            {
                "id": 3,
                "label": "丰台区"
            },
            {
                "id": 4,
                "label": "海淀区"
            }
        ]
    },
    {
        "id": 5,
        "label": "广东省",
        "children": [
            {
                "id": 6,
                "label": "广州市"
            },
            {
                "id": 7,
                "label": "深圳市"
            }
        ]
    },
    {
        "id": 8,
        "label": "上海市"
    },
    {
        "id": 9,
        "label": "重庆市"
    }
]
                        

                                            <?php
                                            header("Content-Type:text/plain;charset=utf-8");
                                            //连接数据库，数据库用户自己定义
                                            $server="自己的数据库地址";
                                            $username="数据库访问账户";
                                            $password="数据库访问密码";
                                            $database="数据库名";
                                            $table = '所在表名';
                                            $connect = mysql_connect($server,$username,$password) or die("数据库链接错误");
                                            mysql_select_db($database,$connect);
                                            mysql_query("set names 'utf8'");
                                            
                                            //检索最终数据
                                            $sqlString="select id,pId,label from {$table} where pId = {$_POST[pId]} order by id+0 asc,pId+0 asc";
                                            $sql=mysql_query($sqlString);
                                            
                                            //根据数据生成对象数组
                                            $result = array();
                                            while ($row = mysql_fetch_object($sql)){
                                            
                                                //判断本id下是否有子节点，有则追加children属性
                                                $rows2=mysql_query("select id,pId from {$table} where pId={$row->id}");
                                                if (mysql_num_rows($rows2) > 0){
                                                    $row->children = array();
                                                }
                                            
                                                //sql查出来是string，转成数字
                                                $row->id = (int)$row->id;
                                                $row->pId = (int)$row->pId;
                                            
                                                array_push($result,$row);
                                            }
                                            $success = json_encode($result);
                                            echo $success;
                                            
                                            ?>
                        

                                            <ul class="ax-tree" id="uuid">
                        

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

                                            <input type="text" id="popup" />
                        

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

                                        <div class="ax-row ax-split">
                                            <div class="ax-col ax-col-8">
                                                <ul class="ax-tree" id="method"></ul>
                                            </div>
                                            <div class="ax-col ax-col-16">
                                                <div>内部成员变量</div>
                                                <a href="###" class="ax-btn" id="checked">checked节点ID</a>
                                                <a href="###" class="ax-btn" id="selected">selected节点ID</a>
                                                <a href="###" class="ax-btn" id="expanded">expanded节点ID</a>
                                                <a href="###" class="ax-btn" id="disabled">disabled节点ID</a>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn" id="flatData">flatData一维数组</a>
                                                <a href="###" class="ax-btn" id="treeData">treeData多维数组</a>
                                                <a href="###" class="ax-btn" id="searchs">当前检索对象数组</a>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn" id="readonlys">当前只读数组</a>
    
                                                <div class="ax-break"></div>
                                                <div>一般操作方法</div>
                                                <a href="###" class="ax-btn" id="addBrotherFront">向前增加兄弟节点</a>
                                                <a href="###" class="ax-btn" id="addBrotherBehind">向后增加兄弟节点</a>
                                                <a href="###" class="ax-btn" id="addChildFront">向前增加子节点</a>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn" id="addChildBehind">向后增加子节点</a>
                                                <a href="###" class="ax-btn" id="remove">删除节点</a>
                                                <a href="###" class="ax-btn" id="edit">编辑节点</a>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn" id="getParents">获得父元素对象</a>
                                                <a href="###" class="ax-btn" id="getChildren">获得子元素对象</a>
                                                <a href="###" class="ax-btn" id="search">关键字搜索</a>
                                                <a href="###" class="ax-btn" id="blank">空字符搜索</a>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn" id="check">勾选节点</a>
                                                <a href="###" class="ax-btn" id="uncheck">取消勾选节点</a>
                                                <a href="###" class="ax-btn" id="disable">禁止勾选</a>
                                                <a href="###" class="ax-btn" id="able">允许勾选</a>
                                                <a href="###" class="ax-btn" id="readonly">禁止增删改</a>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn" id="cando">允许增删改</a>
                                                <a href="###" class="ax-btn" id="expand">展开父节点</a>
                                                <a href="###" class="ax-btn" id="collapse">折叠父节点</a>
                                                <a href="###" class="ax-btn" id="expandAll">全部展开</a>
                                                <a href="###" class="ax-btn" id="collapseAll">全部折叠</a>
    
                                                <div class="ax-break"></div>
                                                <div>取值方法</div>
                                                <a href="###" class="ax-btn" id="getValueCkd">从checked项中取值</a>
                                                <a href="###" class="ax-btn" id="getValueStd">从selected项中取值</a>
                                                <a href="###" class="ax-btn" id="getValueCkdPath">从checked路径取值</a>
                                                <div class="ax-break"></div>
                                                <a href="###" class="ax-btn" id="getValueStdPath">从selected路径取值</a>
                                                <a href="###" class="ax-btn" id="getValueUlt">只取终极元素值</a>
                                                <a href="###" class="ax-btn" id="getValueParent">只取父元素值</a>
    
                                                <div class="ax-break"></div>
                                                <div>其他</div>
                                                <a href="###" class="ax-btn" id="reset">重置</a>
                                            </div>
                                        </div>
                        

                                            let methodIns = new axTree('#method', {
                                                expanded: [2, 8, 12, 17],
                                                checkShow: true,
                                                oneSelected: false,
                                                toolsShow: true,
                                                toolsAction: 'sticky',
                                                disabled: [5, 21],
                                                readonly: [2, 3],
                                                draggable: true,
                                                checkShow: true,
                                                content: 'ajax/treeComplex.json',
                                                async: 'json',
                                            });
                                            let checked = document.querySelector('#checked'),
                                                selected = document.querySelector('#selected'),
                                                expanded = document.querySelector('#expanded'),
                                                disabled = document.querySelector('#disabled'),
                                                flatData = document.querySelector('#flatData'),
                                                treeData = document.querySelector('#treeData'),
                                                searchs = document.querySelector('#searchs'),
                                                readonlys = document.querySelector('#readonlys'),
                                                addBrotherFront = document.querySelector('#addBrotherFront'),
                                                addBrotherBehind = document.querySelector('#addBrotherBehind'),
                                                addChildFront = document.querySelector('#addChildFront'),
                                                addChildBehind = document.querySelector('#addChildBehind'),
                                                remove = document.querySelector('#remove'),
                                                edit = document.querySelector('#edit'),
                                                getParents = document.querySelector('#getParents'),
                                                getChildren = document.querySelector('#getChildren'),
                                                search = document.querySelector('#search'),
                                                blank = document.querySelector('#blank'),
                                                check = document.querySelector('#check'),
                                                uncheck = document.querySelector('#uncheck'),
                                                able = document.querySelector('#able'),
                                                disable = document.querySelector('#disable'),
                                                readonly = document.querySelector('#readonly'),
                                                cando = document.querySelector('#cando'),
                                                expand = document.querySelector('#expand'),
                                                collapse = document.querySelector('#collapse'),
                                                expandAll = document.querySelector('#expandAll'),
                                                getValueCkd = document.querySelector('#getValueCkd'),
                                                getValueStd = document.querySelector('#getValueStd'),
                                                getValueCkdPath = document.querySelector('#getValueCkdPath'),
                                                getValueStdPath = document.querySelector('#getValueStdPath'),
                                                getValueUlt = document.querySelector('#getValueUlt'),
                                                getValueParent = document.querySelector('#getValueParent'),
                                                collapseAll = document.querySelector('#collapseAll'),
                                                reset = document.querySelector('#reset');
                                            checked.onclick = function () {
                                                console.log(methodIns.checkeds);
                                            }
                                            selected.onclick = function () {
                                                console.log(methodIns.selecteds);
                                            }
                                            expanded.onclick = function () {
                                                console.log(methodIns.expandeds);
                                            }
                                            disabled.onclick = function () {
                                                console.log(methodIns.disableds);
                                            }
                                            flatData.onclick = function () {
                                                console.log(methodIns.flatData)
                                            }
                                            treeData.onclick = function () {
                                                console.log(methodIns.treeData);
                                            }
                                            searchs.onclick = function () {
                                                console.log(methodIns.searchs);
                                            }
                                            readonlys.onclick = function () {
                                                console.log(methodIns.readonlys);
                                            }
                                            addBrotherFront.onclick = function () {
                                                methodIns.add('', 3, false, true);
                                            }
                                            addBrotherBehind.onclick = function () {
                                                methodIns.add('', 4, false, false);
                                            }
                                            addChildFront.onclick = function () {
                                                methodIns.add('', 1, true, true);
                                            }
                                            addChildBehind.onclick = function () {
                                                methodIns.add('', 1, true, false);
                                            }
                                            remove.onclick = function () {
                                                methodIns.remove(5);
                                            }
                                            edit.onclick = function () {
                                                methodIns.edit(6);
                                            }
                                            getParents.onclick = function () {
                                                console.log(methodIns.getParents([4, 2, 18, 13, 12]));
                                            }
                                            getChildren.onclick = function () {
                                                console.log(methodIns.getChildren(21));
                                            }
                                            search.onclick = function () {
                                                methodIns.search('区');
                                                console.log(methodIns.searchs)
                                            }
                                            blank.onclick = function () {
                                                methodIns.search('');
                                                console.log(methodIns.searchs)
                                            }
                                            check.onclick = function () {
                                                methodIns.check([8, 2]);
                                                console.log(methodIns.checkeds)
                                            }
                                            uncheck.onclick = function () {
                                                methodIns.check(8, false)
                                                console.log(methodIns.checkeds)
                                            }
                                            disable.onclick = function () {
                                                methodIns.disable([1, 6])
                                                console.log(methodIns.disableds)
                                            }
                                            able.onclick = function () {
                                                methodIns.disable([1, 6], false)
                                                console.log(methodIns.disableds)
                                            }
                                            readonly.onclick = function () {
                                                methodIns.readonly([7, 10])
                                                console.log(methodIns.readonlys)
                                            }
                                            cando.onclick = function () {
                                                methodIns.readonly([7, 10], false)
                                                console.log(methodIns.readonlys)
                                            }
                                            expand.onclick = function () {
                                                methodIns.expand(7);
                                            }
                                            collapse.onclick = function () {
                                                methodIns.collapse(7);
                                            }
                                            expandAll.onclick = function () {
                                                methodIns.expandAll();
                                            }
                                            collapseAll.onclick = function () {
                                                methodIns.collapseAll();
                                            }
                                            getValueCkd.onclick = function () {
                                                let data = methodIns.getValues({from:'checked'});
                                                console.log(data);
                                            }
                                            getValueStd.onclick = function () {
                                                let data = methodIns.getValues({from:'selected'});
                                                console.log(data);
                                            }
                                            getValueCkdPath.onclick = function () {
                                                let data = methodIns.getValues({type:'chain'});
                                                console.log(data);
                                            }
                                            getValueStdPath.onclick = function () {
                                                let data = methodIns.getValues({type:'chain',from:'selected'});
                                                console.log(data);
                                            }
                                            getValueUlt.onclick = function () {
                                                let data = methodIns.getValues({type:'ultimate'});
                                                console.log(data);
                                            }
                                            getValueParent.onclick = function () {
                                                let data = methodIns.getValues({type:'parent'});
                                                console.log(data);
                                            }
                                            reset.onclick = function () {
                                                methodIns.reset();
                                            }
                        

                                        [
                                            {
                                                "id": 1,
                                                "label": "北京市",
                                                "children": [
                                                    {
                                                        "id": 2,
                                                        "label": "朝阳区"
                                                    },
                                                    {
                                                        "id": 3,
                                                        "label": "丰台区"
                                                    },
                                                    {
                                                        "id": 4,
                                                        "label": "海淀区"
                                                    }
                                                ]
                                            },
                                            {
                                                "id": 5,
                                                "label": "上海市"
                                            },
                                            {
                                                "id": 6,
                                                "label": "重庆市"
                                            },
                                            {
                                                "id": 7,
                                                "label": "广东省",
                                                "children": [
                                                    {
                                                        "id": 8,
                                                        "label": "广州市",
                                                        "children": [
                                                            {
                                                                "id": 9,
                                                                "label": "花都区"
                                                            },
                                                            {
                                                                "id": 10,
                                                                "label": "番禺区"
                                                            },
                                                            {
                                                                "id": 11,
                                                                "label": "越秀区"
                                                            }
                                                        ]
                                                    },
                                                    {
                                                        "id": 12,
                                                        "label": "深圳市",
                                                        "children": [
                                                            {
                                                                "id": 13,
                                                                "label": "福田区"
                                                            },
                                                            {
                                                                "id": 14,
                                                                "label": "罗湖区",
                                                                "children": [
                                                                    {
                                                                        "id": 15,
                                                                        "label": "桂园街道"
                                                                    },
                                                                    {
                                                                        "id": 16,
                                                                        "label": "黄贝街道"
                                                                    },
                                                                    {
                                                                        "id": 17,
                                                                        "label": "东门街道"
                                                                    },
                                                                    {
                                                                        "id": 18,
                                                                        "label": "南湖街道"
                                                                    },
                                                                    {
                                                                        "id": 19,
                                                                        "label": "笋岗街道"
                                                                    }
                                                                ]
                                                            },
                                                            {
                                                                "id": 20,
                                                                "label": "龙岗区"
                                                            }
                                                        ]
                                                    }
                                                ]
                                            },
                                            {
                                                "id": 21,
                                                "label": "湖南省",
                                                "children": [
                                                    {
                                                        "id": 22,
                                                        "label": "长沙市"
                                                    },
                                                    {
                                                        "id": 23,
                                                        "label": "永州市"
                                                    },
                                                    {
                                                        "id": 24,
                                                        "label": "株洲市"
                                                    }
                                                ]
                                            },
                                            {
                                                "id": 25,
                                                "label": "湖北省",
                                                "children": [
                                                    {
                                                        "id": 26,
                                                        "label": "武汉市"
                                                    },
                                                    {
                                                        "id": 27,
                                                        "label": "襄阳市"
                                                    }
                                                ]
                                            }
                                        ]
                        

                                        <div class="ax-col ax-col-4">
                                            <ul class="ax-tree" id="keyIns">
                                            </ul>
                                        </div>
                                        <div class="ax-col ax-col-20">
                                            <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label">关键字：</div>
                                                    <div class="ax-form-con">
                                                        <div class="ax-form-con">
                                                            <div class="ax-form-input"><input name="key" placeholder="输入关键字" value="" type="text" id="keyInput"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close" clear id="keyClear"></a></span></div>
                                                            <div class="ax-valid">共有<i id="keyResult">0</i>条检索结果</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="ax-break-md"></div>

                                            <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                    <div class="ax-form-label"></div>
                                                    <div class="ax-flex-block">
                                                        <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full" id="keyButton">检索“区”</button></div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                        

                                            let keyIns = new axTree('#keyIns', {
                                                content: 'ajax/treeComplex.json',
                                                async: 'json',
                                            }),
                                            keyInput = document.querySelector('#keyInput'),
                                            keyResult = document.querySelector('#keyResult'),
                                            keyClear = document.querySelector('#keyClear'),
                                            keyButton = document.querySelector('#keyButton');
                                
                                            keyButton.onclick = function () {
                                                keyIns.search('区')
                                                keyInput.value = '区';
                                                keyResult.innerHTML = keyIns.searchs.length;
                                            }
                                            keyInput.oninput = axDebounce(function(){
                                                let _this = this;
                                                keyIns.search(_this.value);
                                                keyResult.innerHTML = keyIns.searchs.length;
                                            });
                                            keyClear.onclick =function(){
                                                keyIns.search('');
                                                keyResult.innerHTML = 0;
                                            }
                        

                                        [
                                            {
                                                "id": 1,
                                                "label": "北京市",
                                                "children": [
                                                    {
                                                        "id": 2,
                                                        "label": "朝阳区"
                                                    },
                                                    {
                                                        "id": 3,
                                                        "label": "丰台区"
                                                    },
                                                    {
                                                        "id": 4,
                                                        "label": "海淀区"
                                                    }
                                                ]
                                            },
                                            {
                                                "id": 5,
                                                "label": "上海市"
                                            },
                                            {
                                                "id": 6,
                                                "label": "重庆市"
                                            },
                                            {
                                                "id": 7,
                                                "label": "广东省",
                                                "children": [
                                                    {
                                                        "id": 8,
                                                        "label": "广州市",
                                                        "children": [
                                                            {
                                                                "id": 9,
                                                                "label": "花都区"
                                                            },
                                                            {
                                                                "id": 10,
                                                                "label": "番禺区"
                                                            },
                                                            {
                                                                "id": 11,
                                                                "label": "越秀区"
                                                            }
                                                        ]
                                                    },
                                                    {
                                                        "id": 12,
                                                        "label": "深圳市",
                                                        "children": [
                                                            {
                                                                "id": 13,
                                                                "label": "福田区"
                                                            },
                                                            {
                                                                "id": 14,
                                                                "label": "罗湖区",
                                                                "children": [
                                                                    {
                                                                        "id": 15,
                                                                        "label": "桂园街道"
                                                                    },
                                                                    {
                                                                        "id": 16,
                                                                        "label": "黄贝街道"
                                                                    },
                                                                    {
                                                                        "id": 17,
                                                                        "label": "东门街道"
                                                                    },
                                                                    {
                                                                        "id": 18,
                                                                        "label": "南湖街道"
                                                                    },
                                                                    {
                                                                        "id": 19,
                                                                        "label": "笋岗街道"
                                                                    }
                                                                ]
                                                            },
                                                            {
                                                                "id": 20,
                                                                "label": "龙岗区"
                                                            }
                                                        ]
                                                    }
                                                ]
                                            },
                                            {
                                                "id": 21,
                                                "label": "湖南省",
                                                "children": [
                                                    {
                                                        "id": 22,
                                                        "label": "长沙市"
                                                    },
                                                    {
                                                        "id": 23,
                                                        "label": "永州市"
                                                    },
                                                    {
                                                        "id": 24,
                                                        "label": "株洲市"
                                                    }
                                                ]
                                            },
                                            {
                                                "id": 25,
                                                "label": "湖北省",
                                                "children": [
                                                    {
                                                        "id": 26,
                                                        "label": "武汉市"
                                                    },
                                                    {
                                                        "id": 27,
                                                        "label": "襄阳市"
                                                    }
                                                ]
                                            }
                                        ]
                        

                                            <ul class="ax-tree" id="saveIns"></ul>
                                            <div class="ax-break"></div>
                                            <a href="###" class="ax-btn" id="saveAdd">增加“青海省”</a>
                                            <a href="###" class="ax-btn" id="saveRemove">删除“北京”</a>
                                            <a href="###" class="ax-btn" id="saveContent">修改“重庆市”</a>
                                            <a href="###" class="ax-btn" id="saveUpdate">更新参数</a>
                                            <a href="###" class="ax-btn" id="saveLocal">查看本地保存的数据</a>
                                            <a href="###" class="ax-btn" id="saveData">查看详细数据</a>
                                        

                                            let saveIns = new axTree('#saveIns', {
                                                storageName: 'MyTree01',
                                                content: [
                                                    {
                                                        id: 1, label: '北京市', children: [
                                                            { id: 2, label: '朝阳区' },
                                                            { id: 3, label: '丰台区' },
                                                            { id: 4, label: '海淀区' },
                                                        ]
                                                    },
                                                    {
                                                        id: 5, label: '广东省', children: [
                                                            { id: 6, label: '广州市' },
                                                            { id: 7, label: '深圳市' },
                                                        ]
                                                    },
                                                    { id: 8, label: '上海市', },
                                                    { id: 9, label: '重庆市' },
                                                ]
                                                ,
                                            }),
                                                saveAdd = document.querySelector('#saveAdd'),
                                                saveRemove = document.querySelector('#saveRemove'),
                                                saveContent = document.querySelector('#saveContent'),
                                                saveUpdate = document.querySelector('#saveUpdate'),
                                                saveLocal = document.querySelector('#saveLocal'),
                                                saveData = document.querySelector('#saveData');
                                            saveAdd.onclick = () => {
                                                saveIns.add('青海省');
                                            }
                                            saveRemove.onclick = () => {
                                                saveIns.remove(1);
                                            }
                                            saveContent.onclick = () => {
                                                saveIns.updateContent(9, '重庆市被修改了');
                                            }
                                            saveUpdate.onclick = () => {
                                                saveIns.update({
                                                    expanded: [5],
                                                });
                                            }
                                            saveLocal.onclick = () => {
                                                console.log(axLocalStorage.get('MyTree01'));
                                            }
                                            saveData.onclick = () => {
                                                console.log(saveIns.flatData);
                                                console.log(saveIns.treeData);
                                            }
                                        

                                            <div id="insDestroy"></div>
                                            <div class="ax-break"></div>
                                            <a href="###" class="ax-btn ax-primary" id="btnDestroy">立即销毁</a>
                                            <a href="###" class="ax-btn ax-primary" id="btnInit">再次启用</a>
                                        

                                            let insDestroy = new axTree('#insDestroy', {
                                                toolsShow: true,
                                                checkShow: true,
                                                draggable: true,
                                                content: 'ajax/treeComplex.json',
                                                async: 'json',
                                            }),
                                                btnDestroy = document.querySelector('#btnDestroy'),
                                                btnInit = document.querySelector('#btnInit');
                                            btnDestroy.onclick = function () {
                                                insDestroy.destroy(function () {
                                                    alert('销毁了实例！');
                                                });
                                            }
                                            btnInit.onclick = function () {
                                                insDestroy.init();
                                                alert('重新初始化了实例！');
                                                console.log('查看初始化数据：');
                                                console.log(insDestroy.flatData);
                                            }
                                        

                                        [
                                            {
                                                "id": 1,
                                                "label": "北京市",
                                                "children": [
                                                    {
                                                        "id": 2,
                                                        "label": "朝阳区"
                                                    },
                                                    {
                                                        "id": 3,
                                                        "label": "丰台区"
                                                    },
                                                    {
                                                        "id": 4,
                                                        "label": "海淀区"
                                                    }
                                                ]
                                            },
                                            {
                                                "id": 5,
                                                "label": "上海市"
                                            },
                                            {
                                                "id": 6,
                                                "label": "重庆市"
                                            },
                                            {
                                                "id": 7,
                                                "label": "广东省",
                                                "children": [
                                                    {
                                                        "id": 8,
                                                        "label": "广州市",
                                                        "children": [
                                                            {
                                                                "id": 9,
                                                                "label": "花都区"
                                                            },
                                                            {
                                                                "id": 10,
                                                                "label": "番禺区"
                                                            },
                                                            {
                                                                "id": 11,
                                                                "label": "越秀区"
                                                            }
                                                        ]
                                                    },
                                                    {
                                                        "id": 12,
                                                        "label": "深圳市",
                                                        "children": [
                                                            {
                                                                "id": 13,
                                                                "label": "福田区"
                                                            },
                                                            {
                                                                "id": 14,
                                                                "label": "罗湖区",
                                                                "children": [
                                                                    {
                                                                        "id": 15,
                                                                        "label": "桂园街道"
                                                                    },
                                                                    {
                                                                        "id": 16,
                                                                        "label": "黄贝街道"
                                                                    },
                                                                    {
                                                                        "id": 17,
                                                                        "label": "东门街道"
                                                                    },
                                                                    {
                                                                        "id": 18,
                                                                        "label": "南湖街道"
                                                                    },
                                                                    {
                                                                        "id": 19,
                                                                        "label": "笋岗街道"
                                                                    }
                                                                ]
                                                            },
                                                            {
                                                                "id": 20,
                                                                "label": "龙岗区"
                                                            }
                                                        ]
                                                    }
                                                ]
                                            },
                                            {
                                                "id": 21,
                                                "label": "湖南省",
                                                "children": [
                                                    {
                                                        "id": 22,
                                                        "label": "长沙市"
                                                    },
                                                    {
                                                        "id": 23,
                                                        "label": "永州市"
                                                    },
                                                    {
                                                        "id": 24,
                                                        "label": "株洲市"
                                                    }
                                                ]
                                            },
                                            {
                                                "id": 25,
                                                "label": "湖北省",
                                                "children": [
                                                    {
                                                        "id": 26,
                                                        "label": "武汉市"
                                                    },
                                                    {
                                                        "id": 27,
                                                        "label": "襄阳市"
                                                    }
                                                ]
                                            }
                                        ]
                        

                                            <ul class="ax-tree" id="on"></ul>
                                        

                                            let onIns = new axTree('#on', {
                                                toolsShow:true,
                                                checkShow:true,
                                                draggable:true,
                                                content: 'ajax/treeComplex.json',
                                                async: 'json',
                                            });
                                            onIns.on('init',function(){
                                                console.log('初始化完成！')
                                            });
                                            onIns.on('dropped',function(item,insert){
                                                console.log('拖拽完成！当前节点：'+item.label+'，拖入的节点：'+insert.label);
                                            });
                                            onIns.on('checked',function(item){
                                                console.log('勾选了节点！当前节点：'+item.label);
                                            });
                                            onIns.on('added',function(item,newItem){
                                                console.log('新增了节点！当前节点：'+item.label+'，新节点：'+newItem.label);
                                            });
                                            onIns.on('edited',function(item){
                                                console.log('编辑了节点！当前节点：'+item.label);
                                            });
                                            onIns.on('removed',function(item){
                                                console.log('删除了节点！当前节点：'+item.label);
                                            });
                                            onIns.on('expand',function(item){
                                                console.log('展开了节点！当前节点：'+item.label);
                                            });
                                            onIns.on('collapse',function(item){
                                                console.log('折叠了节点！当前节点：'+item.label);
                                            });
                                            onIns.on('selected',function(item){
                                                console.log('高亮了节点！当前节点：'+item.label);
                                            });
                                        

                                        [
                                            {
                                                "id": 1,
                                                "label": "北京市",
                                                "children": [
                                                    {
                                                        "id": 2,
                                                        "label": "朝阳区"
                                                    },
                                                    {
                                                        "id": 3,
                                                        "label": "丰台区"
                                                    },
                                                    {
                                                        "id": 4,
                                                        "label": "海淀区"
                                                    }
                                                ]
                                            },
                                            {
                                                "id": 5,
                                                "label": "上海市"
                                            },
                                            {
                                                "id": 6,
                                                "label": "重庆市"
                                            },
                                            {
                                                "id": 7,
                                                "label": "广东省",
                                                "children": [
                                                    {
                                                        "id": 8,
                                                        "label": "广州市",
                                                        "children": [
                                                            {
                                                                "id": 9,
                                                                "label": "花都区"
                                                            },
                                                            {
                                                                "id": 10,
                                                                "label": "番禺区"
                                                            },
                                                            {
                                                                "id": 11,
                                                                "label": "越秀区"
                                                            }
                                                        ]
                                                    },
                                                    {
                                                        "id": 12,
                                                        "label": "深圳市",
                                                        "children": [
                                                            {
                                                                "id": 13,
                                                                "label": "福田区"
                                                            },
                                                            {
                                                                "id": 14,
                                                                "label": "罗湖区",
                                                                "children": [
                                                                    {
                                                                        "id": 15,
                                                                        "label": "桂园街道"
                                                                    },
                                                                    {
                                                                        "id": 16,
                                                                        "label": "黄贝街道"
                                                                    },
                                                                    {
                                                                        "id": 17,
                                                                        "label": "东门街道"
                                                                    },
                                                                    {
                                                                        "id": 18,
                                                                        "label": "南湖街道"
                                                                    },
                                                                    {
                                                                        "id": 19,
                                                                        "label": "笋岗街道"
                                                                    }
                                                                ]
                                                            },
                                                            {
                                                                "id": 20,
                                                                "label": "龙岗区"
                                                            }
                                                        ]
                                                    }
                                                ]
                                            },
                                            {
                                                "id": 21,
                                                "label": "湖南省",
                                                "children": [
                                                    {
                                                        "id": 22,
                                                        "label": "长沙市"
                                                    },
                                                    {
                                                        "id": 23,
                                                        "label": "永州市"
                                                    },
                                                    {
                                                        "id": 24,
                                                        "label": "株洲市"
                                                    }
                                                ]
                                            },
                                            {
                                                "id": 25,
                                                "label": "湖北省",
                                                "children": [
                                                    {
                                                        "id": 26,
                                                        "label": "武汉市"
                                                    },
                                                    {
                                                        "id": 27,
                                                        "label": "襄阳市"
                                                    }
                                                ]
                                            }
                                        ]