前端AmazeUi Tree怎么应用

这篇"前端AmazeUi Tree怎么应用"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"前端AmazeUi Tree怎么应用"文章吧。

第一步：基本引入

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

/*****粗加工后台数据(给单条数据增加了id,和pid,type,title),如果后台数据返回的直接带有层级结构的数据直接跳过这个步骤) *  for(i=0;i=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+='
';    //     str+='
';    //         str+='';    //         str+='';    //         str+='';    //         str+='';    //     str+='
';    //     str+='
';    //     str+='
';    //  str+='
';    //  str+='
';    //     str+='';    //     str+='';    //     str+='';    //     str+='';    //  str+='
';    //  dom.append(str);

以上就是关于"前端AmazeUi Tree怎么应用"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。