treeview怎么加载节点(AmazeUi Tree树形结构 应用小结)
类别:Web前端 浏览量:1205
时间:2021-10-19 06:15:25 treeview怎么加载节点
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"> <li 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> </li> <ul class="am-tree-branch-children"></ul> <li class="am-tree-loader"><span class="am-icon-spin am-icon-spinner"></span></li> </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+='<li 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+='</li>'; // str+='<ul class="am-tree-branch-children"></ul>'; // str+='<li class="am-tree-loader"><span class="am-icon-spin am-icon-spinner"></span></li>'; // 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树形结构内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- 织梦dede怎么获取当前文档的网址(比较详细全面的织梦DEDECMS目录结构说明)
- web前端项目的目录结构
- html5基本结构图解(html5简介及新增功能介绍)
- 使用canvas画个正方形(canvas绘制树形结构可视图形的实现)
- python基本数据结构(浅谈Python编程中3个常用的数据结构和算法)
- tomcat架构结构图(Tomcat核心组件及应用架构详解)
- mysql修改表结构的关键字(查看修改MySQL表结构命令)
- 结构、枚举和数组的区别
- mysql为啥使用b+树(MySQL用B+树作为索引结构有什么好处)
- sqlserver改表结构不允许(SQL Server阻止保存修改表结构的解决方法)
- dedecms操作手册(织梦DEDECMS结构化数据Meta申明标签)
- python中查看数据类型的内置函数(python学习——内置函数、数据结构、标准库的技巧推荐)
- html5基本结构图(HTML5中的网络存储实现方式)
- 织梦dedecms开启付费授权(织梦dedeCMS二次开发文档手册 程序目录详解以及数据表结构字段)
- laravel提取数据库的字段(Laravel创建数据库表结构的例子)
- 数组reduce方法的好处(JS使用reduce方法处理树形结构数据)
- 阴阳师孟婆御魂推荐 孟婆御魂搭配毕业套(阴阳师孟婆御魂推荐)
- 袁冰妍终于接到新剧,饰演反追男主,看到合作演员 眼光果然毒辣(袁冰妍终于接到新剧)
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
- 刚红就耍大牌,《琉璃》角色滤镜碎一地,心疼工作人员(琉璃角色滤镜碎一地)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
热门推荐
- docker的启动的绝对命令(在docker中开启sshd操作)
- h5本地存储对比(H5离线存储Manifest原理及使用)
- python的条件判断和循环(浅谈Python基础—判断和循环)
- CentOS 7下安装配置proftpd搭建ftp服务器的详细教程(CentOS 7下安装配置proftpd搭建ftp服务器的详细教程)
- css3各个动画效果(使用css3制作齿轮loading动画效果)
- js实现继承的五种(JavaScript继承的三种方法实例)
- asp.net lambda表达式
- html5可以做语音聊天吗(基于Html5实现的语音搜索功能)
- python 数据库实现学生管理系统(python+mysql实现教务管理系统)
- python3第三方库手册(使用python3构建文件传输的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9