這今天小編在經(jīng)過一番功夫之后終于對于大家的小請求終于可以實(shí)現(xiàn)了，今天小編來和大家說說有關(guān)于“前端AmazeUi Tree應(yīng)用小結(jié)詳解！”這方面的相關(guān)內(nèi)容吧！
第一步：基本引入
<link rel="stylesheet" href="assets/css/amazeui.tree.min.css">
<ul class="am-tree" id="tree">
<!--以下第一個(gè)li標(biāo)簽如果設(shè)計(jì)沒有子級結(jié)構(gòu)，可以屏蔽-->
<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書寫)：
/*****粗加工后臺數(shù)據(jù)(給單條數(shù)據(jù)增加了id,和pid,type,title),如果后臺數(shù)據(jù)返回的直接帶有層級結(jié)構(gòu)的數(shù)據(jù)直接跳過這個(gè)步驟)
* for(i=0;i<odata.length;i++){
if(odata[i].level>=2){
//data[i].frameMenuStr
//截取倒數(shù)后兩個(gè)"."后邊的字符串/
let arr =["a","b","c","d","e","f","g","h","i"];
let str = odata[i].frameMenuStr;//當(dāng)前數(shù)據(jù)ID
odata[i].id= arr[odata[i].level-1]+str.substring(str.lastIndexOf(".")+1);
let j =str.lastIndexOf(".");//當(dāng)前數(shù)據(jù)父節(jié)點(diǎn)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:灌入的數(shù)據(jù)(后臺返回的值要為有id和pid)
* dom 所要綁定的區(qū)域id
* callbackfun:回調(diào)函數(shù)
* 范例：
function bindTree(data,dom,callbackfun){
/************核心應(yīng)用：數(shù)組操作******************/
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);
}
})
/***************以上這段代碼是二次加工數(shù)據(jù)為的讓之前沒有層級結(jié)構(gòu)的數(shù)據(jù)，加工成有層級結(jié)構(gòu)的數(shù)據(jù)結(jié)構(gòu)********************/
dom.tree({
dataSource:function(options, callback) {
// 模擬異步加載
let num = 0;//通過num值操作區(qū)分(這是個(gè)坑一定要用這種方法，不能用data||options.products)
if(num==0){
setTimeout(function() {
callback({data: data});//初始顯示最高級別數(shù)據(jù)
num++;
}, 400);
}else{
setTimeout(function() {
callback({data: options.products});//點(diǎn)擊節(jié)點(diǎn)顯示的數(shù)據(jù)
}, 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");//這個(gè)函數(shù)暫時(shí)不起作用。
}
/**直接調(diào)用函數(shù)*/
bindTree(odata,$("#tree"),function(){console.log("-------")});
備注：
//dom.tree("destroy");//數(shù)據(jù)更新我調(diào)用這個(gè)函數(shù)。但是一旦調(diào)用，直接所有dom結(jié)構(gòu)都沒有了，所以你要向之前綁定數(shù)據(jù)的地方重新灌入dom結(jié)構(gòu)。
/***********插件結(jié)構(gòu)重新繪制***************/
// 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);##參考文章：
http://tech.yunyingxbs.com/article/detail/id/350.html
http://amazeui.github.io/tree/docs/demo.html
總結(jié)
那么到這邊有關(guān)于“前端AmazeUi Tree應(yīng)用小結(jié)詳解！”這方面的相關(guān)內(nèi)容分享就到這里了，更多有關(guān)于這方面的相關(guān)內(nèi)容都可以在 W3Cschool進(jìn)行學(xué)習(xí)和了解。
