AmazeUi Tree(树形结构) 应用小结

2021-02-22 0 4,347 百度已收录

这篇文章主要介绍了AmazeUi Tree(树形结构) 应用总结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

##这两天工作比较忙,不过还是要总结相关的坑,希望兄弟们要谨慎应用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树形结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

来源:脚本之家

链接:https://www.jb51.net/html5/740976.html

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

所有文章为演示数据,不提供下载地址,版权归原作者所有,仅提供演示效果!

源码超市网 编程技术 AmazeUi Tree(树形结构) 应用小结 https://www.89992.com/seo/bcjs/2660.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
AmazeUi Tree(树形结构) 应用小结-海报

分享本文封面