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

蓝天白云666

##这两天工作比较忙，不过还是要总结相关的坑，希望兄弟们要谨慎应用AmazeUI 里边自带的树形结构插件
##然后我简单说下我们公司前端应用：UI框架为AmazeUI(俗称妹子),交互框架为JQ。
##如果你公司对于树形结构这边要求不要求有点击事件，只是纯显示那么你可以继续向下看，如果要求树形结构支持勾选，支持拖拽等等...我建议你直接点击退出，去用Ztree吧
第一步：基本引入

1. <link rel="stylesheet" href="assets/css/amazeui.tree.min.css">
   
2. 
   
3.   <ul class="am-tree" id="tree">
   
4.                    <!--以下第一个li标签如果设计没有子级结构，可以屏蔽-->
   
5.                     <li class="am-tree-branch am-hide" data-template="treebranch">
   
6.                         <div class="am-tree-branch-header">
   
7.                             <button class="am-tree-branch-name">
   
8.                                 <span class="am-tree-icon am-tree-icon-folder"></span>
   
9.                                 <span class="am-tree-label"></span>
   
10.                             </button>
    
11.                         </div>
    
12.                         <ul class="am-tree-branch-children"></ul>
    
13.                         <div class="am-tree-loader"><span class="am-icon-spin am-icon-spinner"></span></div>
    
14.                     </li>
    
15.                     <li class="am-tree-item am-hide" data-template="treeitem">
    
16.                         <button class="am-tree-item-name">
    
17.                             <span class="am-tree-icon am-tree-icon-item"></span>
    
18.                             <span class="am-tree-label"></span>
    
19.                         </button>
    
20.                     </li>
    
21.                 </ul>
    
22. <script src="assets/js/amazeui.tree.min.js"></script>

复制代码

第二步：逻辑书写(可新建JS书写)

1. /*****粗加工后台数据(给单条数据增加了id,和pid,type,title),如果后台数据返回的直接带有层级结构的数据直接跳过这个步骤)
   
2. *  for(i=0;i<odata.length;i++){
   
3.                     if(odata[i].level>=2){
   
4.                         //data[i].frameMenuStr
   
5.                         //截取倒数后两个"."后边的字符串/
   
6.                         let arr =["a","b","c","d","e","f","g","h","i"];
   
7.                         let str = odata[i].frameMenuStr;//当前数据ID
   
8.                         odata[i].id= arr[odata[i].level-1]+str.substring(str.lastIndexOf(".")+1);
   
9.                         let j =str.lastIndexOf(".");//当前数据父节点ID
   
10.                         odata[i].pid= arr[odata[i].level-2]+str.substring(str.lastIndexOf(".",j-1),str.lastIndexOf("."));
    
11.                         odata[i].title = odata[i].menuName;
    
12.                         odata[i].type = 'item';
    
13.                     }else{
    
14.                        odata[i].id = "a"+odata[i].frameMenuStr;
    
15.                        odata[i].title = odata[i].menuName;
    
16.                        odata[i].type = 'folder';
    
17.                        //odata[i].pid = "00000000";
    
18.                    }
    
19.                 }
    
20. * ********/
    
21. /*******
    
22. *
    
23. * data:灌入的数据(后台返回的值要为有id和pid)
    
24. * dom 所要绑定的区域id
    
25. * callbackfun:回调函数
    
26. * 范例：
    
27. function bindTree(data,dom,callbackfun){
    
28.     /************核心应用：数组操作******************/
    
29.     let tree = data;
    
30.     var treeMaps = {};
    
31.     tree.forEach(function (value, index) {
    
32.        treeMaps[value.id] = value;
    
33.     })
    
34.     var data = [];
    
35.     tree.forEach(function (value, index) {
    
36.         var parent = treeMaps[value.pid]
    
37.         if (parent !== undefined) {
    
38.             if (parent.products === undefined) {
    
39.             parent.products = []
    
40.             }
    
41.             parent.products.push(value)
    
42.         } else {
    
43.             data.push(value);
    
44.         }
    
45.     })
    
46.     /***************以上这段代码是二次加工数据为的让之前没有层级结构的数据，加工成有层级结构的数据结构********************/
    
47.     dom.tree({
    
48.         dataSource:function(options, callback) {
    
49.             // 模拟异步加载
    
50.             let num = 0;//通过num值操作区分(这是个坑一定要用这种方法，不能用data||options.products)
    
51.             if(num==0){
    
52.                 setTimeout(function() {
    
53.                   callback({data: data});//初始显示最高级别数据
    
54.                    num++;
    
55.                 }, 400);
    
56.                
    
57.             }else{
    
58.                 setTimeout(function() {
    
59.                   callback({data: options.products});//点击节点显示的数据
    
60.                 }, 400);
    
61.             }
    
62.           },
    
63.         multiSelect: false,
    
64.         cacheItems: true,
    
65.         folderSelect: false,
    
66.     });
    
67.     dom.on('selected.tree.amui', function (event, data) {
    
68.         // do something with data: { selected: [array], target: [object] }
    
69.         //  console.log(data);
    
70.         // console.log(event);
    
71.          uuid = data.target.menuId;
    
72.          resData = data.target;
    
73.          if(callbackfun || typeof callbackfun != 'undefined' || callbackfun != undefined){
    
74.             return callbackfun(uuid);
    
75.           }
    
76.     });
    
77.     dom.tree("discloseAll");//这个函数暂时不起作用。
    
78. }
    
79. 
    
80. /**直接调用函数*/
    
81. bindTree(odata,$("#tree"),function(){console.log("-------")});
    
82. 
    
83. 备注：
    
84. 
    
85.     //dom.tree("destroy");//数据更新我调用这个函数。但是一旦调用，直接所有dom结构都没有了，所以你要向之前绑定数据的地方重新灌入dom结构。
    
86.      /***********插件结构重新绘制***************/
    
87.     //  let str = "";
    
88.     //  str+='<li class="am-tree-branch am-hide" data-template="treebranch">';
    
89.     //     str+='<div class="am-tree-branch-header">';
    
90.     //         str+='<button class="am-tree-branch-name">';
    
91.     //         str+='<span class="am-tree-icon am-tree-icon-folder"></span>';
    
92.     //         str+='<span class="am-tree-label"></span>';
    
93.     //         str+='</button>';
    
94.     //     str+='</div>';
    
95.     //     str+='<ul class="am-tree-branch-children"></ul>';
    
96.     //     str+='<div class="am-tree-loader"><span class="am-icon-spin am-icon-spinner"></span></div>';
    
97.     //  str+='</li>';
    
98.     //  str+='<li class="am-tree-item am-hide" data-template="treeitem">';
    
99.     //     str+='<button class="am-tree-item-name">';
    
100.     //     str+='<span class="am-tree-icon am-tree-icon-item"></span>';
     
101.     //     str+='<span class="am-tree-label"></span>';
     
102.     //     str+='</button>';
     
103.     //  str+='</li>';
     
104.     //  dom.append(str);

复制代码

##参考文章：

1. <a target="_blank" href="http://tech.yunyingxbs.com/article/detail/id/350.html">http://tech.yunyingxbs.com/article/detail/id/350.html</a>
   
2. <a target="_blank" href="http://amazeui.github.io/tree/docs/demo.html">http://amazeui.github.io/tree/docs/demo.html</a>

复制代码

总结
到此这篇关于AmazeUi Tree(树形结构) 应用总结的文章就介绍到这了,更多相关AmazeUi Tree树形结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

隨緣......飄

我想了解更多

Ming荒

我们一起努力，共同解决问题吧。

Mr.O

嘎嘎嘎嘎嘎嘎嘎

Ming荒

我们一起努力，共同解决问题吧。

仙人指路-3

666666666666666666

坑比中的大神

顶一个，观点非常中肯！

陈同学👀👀

保持尊重和礼貌对待其他成员是必要的。

快乐的小熊猫888

谢谢你的提醒，我会注意的。

6631241564

确实牛逼