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


Posted in HTML / CSS onAugust 17, 2020

##这两天工作比较忙,不过还是要总结相关的坑,希望兄弟们要谨慎应用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">
                        <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>

第二步:逻辑书写(可新建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+='<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);

##参考文章:

http://tech.yunyingxbs.com/article/detail/id/350.html
http://amazeui.github.io/tree/docs/demo.html

总结

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

HTML / CSS 相关文章推荐
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 #HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 #HTML / CSS
AmazeUI 面板的实现示例
Aug 17 #HTML / CSS
AmazeUI 列表的实现示例
Aug 17 #HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 #HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 #HTML / CSS
AmazeUI导航的示例代码
Aug 14 #HTML / CSS
You might like
基于PHP array数组的教程详解
2013/06/05 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
img标签中onerror用法
2009/08/13 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
工业自动化毕业生自荐信范文
2014/01/04 职场文书
岗位聘任书范文
2014/03/29 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技