AmazeUi Tree(树形结构) 应用小结

##这两天工作比较忙，不过还是要总结相关的坑，希望兄弟们要谨慎应用AmazeUI 里边自带的树形结构插件

##然后我简单说下我们公司前端应用：UI框架为AmazeUI(俗称妹子),交互框架为JQ。

##如果你公司对于树形结构这边要求不要求有点击事件，只是纯显示那么你可以继续向下看，如果要求树形结构支持勾选，支持拖拽等等...我建议你直接点击退出，去用Ztree吧

第一步：基本引入

<link rel="stylesheet" href="assets/css/amazeui.tree.min.css">   <ul class="am-tree" id="tree">                   <!--以下第一个li标签如果设计没有子级结构，可以屏蔽-->                    <li class="am-tree-branch am-hide" data-template="treebranch">                        <div class="am-tree-branch-header">                            <button class="am-tree-branch-name">                                <span class="am-tree-icon am-tree-icon-folder"></span>                                <span class="am-tree-label"></span>                            </button>                        </div>                        <ul class="am-tree-branch-children"></ul>                        <div class="am-tree-loader"><span class="am-icon-spin am-icon-spinner"></span></div>                    </li>                    <li class="am-tree-item am-hide" data-template="treeitem">                        <button class="am-tree-item-name">                            <span class="am-tree-icon am-tree-icon-item"></span>                            <span class="am-tree-label"></span>                        </button>                    </li>                </ul><script src="assets/js/amazeui.tree.min.js"></script>

第二步：逻辑书写(可新建JS书写)

/*****粗加工后台数据(给单条数据增加了id,和pid,type,title),如果后台数据返回的直接带有层级结构的数据直接跳过这个步骤) *  for(i=0;i<odata.length;i++){                    if(odata[i].level>=2){                        //data[i].frameMenuStr                        //截取倒数后两个"."后边的字符串/                        let arr =["a","b","c","d","e","f","g","h","i"];                        let str = odata[i].frameMenuStr;//当前数据ID                        odata[i].id= arr[odata[i].level-1]+str.substring(str.lastIndexOf(".")+1);                        let j =str.lastIndexOf(".");//当前数据父节点ID                        odata[i].pid= arr[odata[i].level-2]+str.substring(str.lastIndexOf(".",j-1),str.lastIndexOf("."));                        odata[i].title = odata[i].menuName;                        odata[i].type = item;                    }else{                       odata[i].id = "a"+odata[i].frameMenuStr;                       odata[i].title = odata[i].menuName;                       odata[i].type = folder;                       //odata[i].pid = "00000000";                    }                } * ********/ /******* *  * data:灌入的数据(后台返回的值要为有id和pid) * dom 所要绑定的区域id * callbackfun:回调函数 * 范例：function bindTree(data,dom,callbackfun){    /************核心应用：数组操作******************/    let tree = data;    var treeMaps = {};    tree.forEach(function (value, index) {       treeMaps[value.id] = value;    })    var data = [];    tree.forEach(function (value, index) {        var parent = treeMaps[value.pid]        if (parent !== undefined) {            if (parent.products === undefined) {            parent.products = []            }            parent.products.push(value)        } else {            data.push(value);        }    })    /***************以上这段代码是二次加工数据为的让之前没有层级结构的数据，加工成有层级结构的数据结构********************/    dom.tree({        dataSource:function(options, callback) {            // 模拟异步加载            let num = 0;//通过num值操作区分(这是个坑一定要用这种方法，不能用data||options.products)            if(num==0){                setTimeout(function() {                  callback({data: data});//初始显示最高级别数据                   num++;                }, 400);                           }else{                setTimeout(function() {                  callback({data: options.products});//点击节点显示的数据                }, 400);            }          },        multiSelect: false,        cacheItems: true,        folderSelect: false,    });    dom.on(selected.tree.amui, function (event, data) {        // do something with data: { selected: [array], target: [object] }        //  console.log(data);        // console.log(event);         uuid = data.target.menuId;         resData = data.target;         if(callbackfun || typeof callbackfun != undefined || callbackfun != undefined){            return callbackfun(uuid);          }    });    dom.tree("discloseAll");//这个函数暂时不起作用。 }  /**直接调用函数*/ bindTree(odata,$("#tree"),function(){console.log("-------")});  备注：     //dom.tree("destroy");//数据更新我调用这个函数。但是一旦调用，直接所有dom结构都没有了，所以你要向之前绑定数据的地方重新灌入dom结构。     /***********插件结构重新绘制***************/    //  let str = "";    //  str+=<li class="am-tree-branch am-hide" data-template="treebranch">;    //     str+=<div class="am-tree-branch-header">;    //         str+=<button class="am-tree-branch-name">;    //         str+=<span class="am-tree-icon am-tree-icon-folder"></span>;    //         str+=<span class="am-tree-label"></span>;    //         str+=</button>;    //     str+=</div>;    //     str+=<ul class="am-tree-branch-children"></ul>;    //     str+=<div class="am-tree-loader"><span class="am-icon-spin am-icon-spinner"></span></div>;    //  str+=</li>;    //  str+=<li class="am-tree-item am-hide" data-template="treeitem">;    //     str+=<button class="am-tree-item-name">;    //     str+=<span class="am-tree-icon am-tree-icon-item"></span>;    //     str+=<span class="am-tree-label"></span>;    //     str+=</button>;    //  str+=</li>;    //  dom.append(str);

##参考文章：