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">
                            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;
    iodata.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树形结构内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！