我要评论##这两天工作比较忙，不过还是要总结相关的坑，希望兄弟们要谨慎应用amazeui 里边自带的树形结构插件
##然后我简单说下我们公司前端应用：ui框架为amazeui(俗称妹子),交互框架为jq。
##如果你公司对于树形结构这边要求不要求有点击事件，只是纯显示那么你可以继续向下看，如果要求树形结构支持勾选，支持拖拽等等...我建议你直接点击退出，去用ztree吧
第一步：基本引入
<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);
##参考文章：
http://tech.yunyingxbs.com/article/detail/id/350.html
http://amazeui.github.io/tree/docs/demo.html
总结
到此这篇关于amazeui tree(树形结构) 应用总结的文章就介绍到这了,更多相关amazeui tree树形结构内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！
发表评论