如何在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書寫)

/*****粗加工后臺數據(給單條數據增加了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);

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。