IT俱乐部 HTML5 AmazeUi Tree(树形结构) 应用小结

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

##这两天工作比较忙,不过还是要总结相关的坑,希望兄弟们要谨慎应用AmazeUI 里边自带的树形结构插件

##然后我简单说下我们公司前端应用:UI框架为AmazeUI(俗称妹子),交互框架为JQ。

##如果你公司对于树形结构这边要求不要求有点击事件,只是纯显示那么你可以继续向下看,如果要求树形结构支持勾选,支持拖拽等等…我建议你直接点击退出,去用Ztree吧

第一步:基本引入


    第二步:逻辑书写(可新建JS书写)

    /*****粗加工后台数据(给单条数据增加了id,和pid,type,title),如果后台数据返回的直接带有层级结构的数据直接跳过这个步骤)
     *  for(i=0;i=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+='
  • '; // str+='
    '; // str+=''; // str+='
    '; // str+='
      '; // str+='
      '; // str+='
    • '; // str+='
    • '; // str+=''; // str+='
    • '; // dom.append(str);

      ##参考文章:

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

      总结

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

      本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/html5/13883.html
      上一篇
      下一篇
      联系我们

      联系我们

      在线咨询: QQ交谈

      邮箱: 1120393934@qq.com

      工作时间:周一至周五,9:00-17:30,节假日休息

      关注微信
      微信扫一扫关注我们

      微信扫一扫关注我们

      返回顶部