##这两天工作比较忙，不外还是要总结相关的坑，希望兄弟们要审慎应用AmazeUI 里边自带的树形结构插件 ##然后我简单说下我们公司前端应用：UI框架为AmazeUI(俗称妹子),交互框架为JQ。 ##假如你公司对于树形结构这边要求不要求有点击事件，只是纯体现那么你可以继续向下看，假如要求树形结构支持勾选，支持拖拽等等...我发起你直接点击退出，去用Ztree吧 第一步：根本引入 [code] <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>[/code]第二步：逻辑誊写(可新建JS誊写) [code] /*****粗加工后台数据(给单条数据增加了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);[/code]##参考文章： [code]http://tech.yunyingxbs.com/article/detail/id/350.html http://amazeui.github.io/tree/docs/demo.html[/code]总结 到此这篇关于AmazeUi Tree(树形结构) 应用总结的文章就先容到这了,更多相关AmazeUi Tree树形结构内容请搜索脚本之家从前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！ 来源：https://www.jb51.net/html5/740976.html 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 03:34 , Processed in 0.029028 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
