这篇文章主要介绍了亚马逊树（树形结构)应用总结，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
##这两天工作比较忙，不过还是要总结相关的坑，希望兄弟们要谨慎应用阿马泽伊里边自带的树形结构插件
##然后我简单说下我们公司前端应用：用户界面框架为阿马泽伊（俗称妹子),交互框架为JQ。
##如果你公司对于树形结构这边要求不要求有点击事件，只是纯显示那么你可以继续向下看，如果要求树形结构支持勾选，支持拖拽等等.我建议你直接点击退出，去用实现版吧
第一步：基本引入
link rel=’样式表’ href=’ assets/CSS/amaze ui。树。量滴’ CSS ‘
ul class=’am-tree’ id=’树’
！-以下第一个里标签如果设计没有子级结构，可以屏蔽-
‘ am-tree-branch am-hide ‘ data-template=’ tree branch ‘
div class=’ am-tree-branch-header ‘
按钮am-tree-branch-name
span class=’ am-tree-icon am-tree-icon-folder ‘/span
span class=’am-tree-label’/span
/按钮
/div
ul class=’ am-tree-branch-children ‘/ul
am-tree-loader ‘ span class=’ am-icon-spin am-icon-spinner ‘/span/div
/李
Li class=’ am-tree-item am-hide ‘ data-template=’树项目’
button class=’am-tree-item-name ‘
span class=’ am-tree-icon am-tree-icon-item ‘/span
span class=’am-tree-label’/span
/按钮
/李
/ul
脚本src=’ assets/js/amaze ui。树。量滴js ‘/脚本
第二步：逻辑书写（可新建射流研究…书写)
/*****粗加工后台数据（给单条数据增加了id，和pid，类型，标题),如果后台数据返回的直接带有层级结构的数据直接跳过这个步骤)
* for(I=0；iodata.lengthi ){
if(odata[i].level=2){
//data[i].frameMenuStr
//截取倒数后两个’.’后边的字符串/
设arr=[‘a ‘，’ b ‘，’ c ‘，’ d ‘，’ e ‘，’ f ‘，’ g ‘，’ h ‘，’ I ‘]；
设str=odata[i].frameMenuStr//当前数据身份
odata[i].id=arr[odata[i].一级]字符串。子字符串。lastindexof(‘ . ‘)) 1);
设j=str.lastIndexOf(‘ . ‘);//当前数据父节点身份
odata[i].pid=arr[odata[i].二级]字符串。子字符串。lastindexof(‘ . ‘)，j-1)，str.lastIndexOf(‘ . ‘));
odata[i].title=odata[i].菜单名
odata[i].type=’ item
}否则{
odata[i].id=’a’ odata[i].frameMenuStr
odata[i].title=odata[i].菜单名
odata[i].type=” folder
//odata[i].pid=’ 00000000
}
}
* ********/
/*******
*
*数据：灌入的数据（后台返回的值要为有编号和pid)
* dom所要绑定的区域编号
*回呼乐趣：回调函数
* 范例：
函数绑定树(数据，dom，callbackfun){
/************核心应用：数组操作******************/
设树=数据；
var treeMaps={ }；
tree.forEach(function (value，index) {
treeMaps[值。id]=值；
})
定义变量数据=[];
tree.forEach(function (value，index) {
var parent=treeMaps[value.pid]
如果（家长！==未定义){
如果(父母。产品===未定义){
parent.products=[]
}
父项.产品.推送(值)
}否则{
数据推送(值);
}
})
/***************以上这段代码是二次加工数据为的让之前没有层级结构的数据，加工成有层级结构的数据结构********************/
dom.tree({
数据源：函数（选项，回调){
//模拟异步加载
设num=0；//通过数字值操作区分（这是个坑一定要用这种方法，不能用数据| |选项。产品)
if(num==0){
setTimeout(function() {
回调({ data:data })；//初始显示最高级别数据
数字
}, 400);
}否则{
setTimeout(function() {
回调({ data:options。产品})；//点击节点显示的数据
}, 400);
}
},
多选：假，
cacheItems: true，
folderSelect: false，
});
dom.on(‘selected.tree.amui ‘，function (event，data) {
//对数据做一些事情：{选定：[数组]，目标：[对象] }
//console.log(数据);
//console.log(事件);
uuid=数据。目标。menuid
resData=data.target
if(回调乐趣| |回调乐趣类型！=’undefined’ || callbackfun！=未定义){
返回回拨乐趣(uuid)；
}
});
多姆。树(‘全部公开’)；//这个函数暂时不起作用。
}
/**直接调用函数*/
bindTree(odata，$(‘#tree ‘)，function(){ console。log(‘-‘)})；
备注：
//DOM。树(‘ destroy ‘)；//数据更新我调用这个函数。但是一旦调用，直接所有数字正射影像图结构都没有了，所以你要向之前绑定数据的地方重新灌入数字正射影像图结构。
/***********插件结构重新绘制***************/
//让str=
//str=’ Li class=’ am-tree-branch am-hide ‘ data-template=’ tree branch ‘；
//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=’ tree item ‘；
//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(字符串)；
##参考文章：
http://tech.yunyingxbs.com/article/detail/id/350.html
http://amazeui.github.io/tree/docs/demo.html
总结
到此这篇关于亚马逊树（树形结构)应用总结的文章就介绍到这了，更多相关亚马逊树树形结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
来源：脚本之家
链接：https://www。jb51。net/html 5/740976。超文本标记语言
