AmazeUi Tree(树型构造) 运用总◎结

2021-01-20 23:49 jianzhan

##这几天工作中较为忙,但是還是要小结有关的坑,期待弟兄们要慎重运用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
                        //提取倒数后2个"."后面的标识符串/
                        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树型构造內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!