设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 76|回复: 11

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

[复制链接]

3

主题

54

回帖

176

积分

注册会员

积分
176
发表于 2024-4-20 10:28:47 | 显示全部楼层 |阅读模式
##这两天工作比较忙,不过还是要总结相关的坑,希望兄弟们要谨慎应用AmazeUI 里边自带的树形结构插件
##然后我简单说下我们公司前端应用:UI框架为AmazeUI(俗称妹子),交互框架为JQ。
##如果你公司对于树形结构这边要求不要求有点击事件,只是纯显示那么你可以继续向下看,如果要求树形结构支持勾选,支持拖拽等等...我建议你直接点击退出,去用Ztree吧
第一步:基本引入
  1. <link rel="stylesheet" href="assets/css/amazeui.tree.min.css">

  2.   <ul class="am-tree" id="tree">
  3.                    <!--以下第一个li标签如果设计没有子级结构,可以屏蔽-->
  4.                     <li class="am-tree-branch am-hide" data-template="treebranch">
  5.                         <div class="am-tree-branch-header">
  6.                             <button class="am-tree-branch-name">
  7.                                 <span class="am-tree-icon am-tree-icon-folder"></span>
  8.                                 <span class="am-tree-label"></span>
  9.                             </button>
  10.                         </div>
  11.                         <ul class="am-tree-branch-children"></ul>
  12.                         <div class="am-tree-loader"><span class="am-icon-spin am-icon-spinner"></span></div>
  13.                     </li>
  14.                     <li class="am-tree-item am-hide" data-template="treeitem">
  15.                         <button class="am-tree-item-name">
  16.                             <span class="am-tree-icon am-tree-icon-item"></span>
  17.                             <span class="am-tree-label"></span>
  18.                         </button>
  19.                     </li>
  20.                 </ul>
  21. <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. bindTree(odata,$("#tree"),function(){console.log("-------")});

  81. 备注:

  82.     //dom.tree("destroy");//数据更新我调用这个函数。但是一旦调用,直接所有dom结构都没有了,所以你要向之前绑定数据的地方重新灌入dom结构。
  83.      /***********插件结构重新绘制***************/
  84.     //  let str = "";
  85.     //  str+='<li class="am-tree-branch am-hide" data-template="treebranch">';
  86.     //     str+='<div class="am-tree-branch-header">';
  87.     //         str+='<button class="am-tree-branch-name">';
  88.     //         str+='<span class="am-tree-icon am-tree-icon-folder"></span>';
  89.     //         str+='<span class="am-tree-label"></span>';
  90.     //         str+='</button>';
  91.     //     str+='</div>';
  92.     //     str+='<ul class="am-tree-branch-children"></ul>';
  93.     //     str+='<div class="am-tree-loader"><span class="am-icon-spin am-icon-spinner"></span></div>';
  94.     //  str+='</li>';
  95.     //  str+='<li class="am-tree-item am-hide" data-template="treeitem">';
  96.     //     str+='<button class="am-tree-item-name">';
  97.     //     str+='<span class="am-tree-icon am-tree-icon-item"></span>';
  98.     //     str+='<span class="am-tree-label"></span>';
  99.     //     str+='</button>';
  100.     //  str+='</li>';
  101.     //  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树形结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

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

0

主题

40

回帖

79

积分

注册会员

积分
79
发表于 2024-5-22 03:49:57 | 显示全部楼层
我想了解更多

1

主题

59

回帖

141

积分

注册会员

积分
141
发表于 2024-5-27 06:49:20 | 显示全部楼层
我们一起努力,共同解决问题吧。

0

主题

57

回帖

115

积分

注册会员

积分
115
发表于 2024-6-18 07:29:38 | 显示全部楼层
嘎嘎嘎嘎嘎嘎嘎

1

主题

59

回帖

141

积分

注册会员

积分
141
发表于 2024-8-5 08:03:44 | 显示全部楼层
我们一起努力,共同解决问题吧。

1

主题

60

回帖

141

积分

注册会员

积分
141
发表于 2024-8-6 17:05:22 | 显示全部楼层
666666666666666666
  • 打卡等级:无名新人
  • 打卡总天数:2
  • 打卡月天数:0
  • 打卡总奖励:37
  • 最近打卡:2024-08-26 11:29:38

2

主题

49

回帖

180

积分

注册会员

积分
180
发表于 2024-8-11 14:02:04 | 显示全部楼层
顶一个,观点非常中肯!

1

主题

47

回帖

117

积分

注册会员

积分
117
发表于 2024-8-21 08:57:18 | 显示全部楼层
保持尊重和礼貌对待其他成员是必要的。

0

主题

45

回帖

91

积分

注册会员

积分
91
发表于 2024-9-28 08:52:27 | 显示全部楼层
谢谢你的提醒,我会注意的。
发表于 2024-11-2 14:21:59 | 显示全部楼层
确实牛逼
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-15 05:20 , Processed in 0.086821 second(s), 27 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表