這篇文章主要介紹了AmazeUi Tree(樹(shù)形結構) 應用總結,形結本文給大家(′?_?`)介紹的非常詳細，對大家的形結學(xué)習或工作具有一定的參考借鑒價(jià)值，需要的形結朋友(????)可以參考??下
##這兩天工作比較忙，不過(guò)還是形結要總結相關(guān)的(de)坑，希望兄弟們要??謹慎應用AmazeUI 里邊自帶的形結樹(shù)形結構插件
##然后我簡(jiǎn)單說(shuō)下我們公司前端應用：UI(╬?益?)框架為AmazeUI(俗稱(chēng)妹子),交互框架為JQ。
##如(ru)果你公司對于樹(shù)形結構這邊要求不要求有點(diǎn)擊事件，形結只是形結純顯示那么你可以繼續向下看，如果要求樹(shù)形結構支持??勾選，形結支持拖拽等等...我建議你直接點(diǎn)擊(/ω＼)退出，形結去??用Ztree吧
第一步：基本引入
<link rel='style??sheet' href='assets?/css/amazeui.tree.m??in.css'>
<ul class='am-tree' id="tree">
<!--以下第一個(gè)li標簽如果設計沒(méi)有子級結構，形結可以屏蔽-->
<li class='am-tree-branch am-hide' data-template='treebranch'>
<div class="┐(′д｀)┌am-tree-branch-header">
<bヾ(′ω｀)?utton class='am-treヽ(′?｀)ノe-branch-name'>
<span class="am-tree-icon am-tree-icon-folder"></span>
<span cla??ss='am-tree-label'></span>
</button>
</div??>
<ul class='am-tree-bヽ(′?｀)ノra??nch-children'></ul>
<div class='am-t(//ω//)ree-loader'><span class="am-icon-spin am-icon-spin??ner"></ヾ(?■_■)ノ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-la??bel'&┐(′?｀)┌gt;</span>
</button>
</li>
</ul>
<script src="assets/js/??amazeui.tree.min.js"></s??cript>
第二步：邏輯書(shū)寫(xiě)(可新建JS書(shū)寫(xiě))
/*****粗加工后臺數據(給單條數據增加了id,形結和pid,ty(╬ ò﹏ó)pe,title),如果后臺數據返回的直接帶有層級結構的數據直接(′?_?`)跳過(guò)這個(gè)步驟)
* for(i=0;i<odata.length;i++){
if(odata[i].level>=2){
//data[i].frameMenuStr
//截取倒數后兩個(gè)"."后邊的字符串/
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(".");//當前數據父節點(diǎn)ID
odata[i].pid= arr[odata[i].level-2]+st(′_ゝ`)r.substring(str.las(/ω＼)tIndexOf(".",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";
}
}
