如何在AmazeUi 中使用树形结构

如何在AmazeUi 中使用树形结构？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

基本引入

<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书写)

     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);

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网精选频道，感谢您对编程网的支持。