Namespace.register("U.MD.UI.Tree"); //json要求: //里面需要包含id,name,deep(依赖),img_url(显示图片源),child(附属目录),为一个数值,每一个值为一个json,child的格式也是一样 //案例 // [{ id: "1", name: "文件夹", deep: 0, img_url: 'http://api.1473.cn/Uform/Image/tree/folder.png', //child: [{ id: "2", name: "文件夹", deep: 1, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png", // child: [{ id: "5", name: "文件夹", deep: 2, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png"}] // }, //{ id: "3", name: "文件夹", deep: 1, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png" }, //{ id: "4", name: "文件夹", deep: 1, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png"}] //}] /* 将二维数组转化为列表的方法 arr {arr} 数据源json里面需要包含id,name,deep(依赖),img_url(显示图片源),child(附属目录),外部是数组 tree {object} 要插入列表的地方 bookfun {function} 每一行目录的点击事件 leftfun {function} 右键事件 */ U.MD.UI.Tree = function (arr, treeaction, bookfun, leftfun) { json = []; //将外变量josn清空 var _json = arr; //定义局部变量_json,值为r for (var _i = 0; _i < _json.length; _i++) { //定义循环,循环对象为 U.MD.UI.Tree.jsonAdd(json, _json[_i]); //运行函数,生成json } treeaction.innerHTML = ""; //清空tree的内容 U.MD.UI.Tree.treeCreate(json, treeaction, bookfun); //运行方法,在tree中生成树状图 treeaction.oncontextmenu = function (e) { e.preventDefault(); //去掉默认的contextmenu事件,否则会和右键事件同时出现。 }; treeaction.onmousedown = function (e) { //设置树状图的右键点击事件 if (e.button == 2) { leftfun(e, bookfun); //运行右键事件 } } } /* 将二维数组转化为列表的方法 json {arr} 数据源json里面需要包含id,name,deep(依赖),img_url(显示图片源),child(附属目录),外部是数组 tree {object} 要插入列表的地方 bookfun {function} 没一行的点击事件 */ U.MD.UI.Tree.treeCreate = function (json, tree, onclickfun) { for (var _i = 0; _i < json.length; _i++) { //创建循环,解析json数组,得到每一个json var _ul = $$("ul", { className: "U_MD_UI_Tree_a " + json[_i].parentID }, tree); //创建var对象,在tree中创建ul var _li = $$("li", { id: json[_i].id, parentid: json[_i].parentid, className: "U_MD_UI_Tree_listyle", parentid: json[_i].id, deep: json[_i].deep }, _ul); //创建var对象,在ul中创建li,id为a+jsonid var _img = $$("img", { "onerror": U.MD.C.imgError, src: json[_i].img_url, className: "U_MD_UI_Tree_imgstyle" }, _li); //创建var对象,在li中创建img var _span = $$("span", { innerHTML: json[_i].name, className: "spanstyle" }, _li); //创建var对象,在li中创建span,内容为json的name _ul.style.display = "none"; if (json[_i].deep == "1") { _ul.style.display = "block" } //进行判断,判断是否为一级目录,不是的先隐藏 _img.aa = false; //定义img的一个变量,用来控制列表的展开和关闭 var _liobj = document.getElementsByClassName("U_MD_UI_Tree_a " + json[_i].parentID)[0]; //定义一个let对象为获取到的对应的li对象 _ul.style.display = _liobj.style.display; //如果是展开状态,显示ul _li.onclick = function () {//定义li的点击事件 onclickfun(this); //执行bookconlick函数,改变book对象的内容 _liobj = document.getElementsByClassName("U_MD_UI_Tree_a " + this.parentid); if (_img.aa === true) { //如果img.aa等于true _img.aa = false; //修改img.aa对象为false for (var _ii = 0; _ii < _liobj.length; _ii++) { //定义循环,循环对象为获取到的li对象集合 _liobj[_ii].style.display = "none"; //将集合隐藏 } } else { //如果img.aa等于false _img.aa = true; //修改img.aa等于true for (var _ii = 0; _ii < _liobj.length; _ii++) { //定义循环,循环对象为获取到的li对象集合 _liobj[_ii].style.display = "block"; //将集合显示 } } } if (json[_i].child) { U.MD.UI.Tree.treeCreate(json[_i].child, _ul, onclickfun); //重新调用函数,参数为child的对象数组,ul对象,20的边距值,隐藏,改变的book对象 } } } /* 在json中插入json的方法 json {arr} 要被插入的json对象 addjson {json} 要查入的json对象 */ U.MD.UI.Tree.jsonAdd = function (json, addjson) { var _addid = addjson.parentID; //定义要目的地id,等于插入json的parentID值 if (_addid == "0") { //进行判断,判断目的地id是否在第一层(0) json[json.length] = addjson; //如果在,直接在json的第一层中加入要插入的json return json; //结束方法,返回json对象 } for (var _i = 0; _i < json.length; _i++) { //创建循环,解析json数组,得到每一个json if (json[_i].id == _addid) { //进行判断,判断json的id是否等于获取到的目的地id,如果是 if (json[_i].child) { //进行判断,判断json的child有没有值 json[_i].child[json[_i].child.length] = addjson; //如果有,就在其中添加插入对象 return json; //结束方法,返回json对象 } else {//如果json中没有child json[_i].child = []; json[_i].child[json[_i].child.length] = addjson; //将json的child等于插入的对象 return json; //结束方法,返回json对象 } } if (json[_i].child) { //如果json的id不与目的地id相等且json中存在child var _return = U.MD.UI.Tree.jsonAdd(json[_i].child, addjson); //定义函数,调用自己,变量为json的child,要插入的json json[_i].child = _return; //json的child等于返回的json } } return json; //返回json对象 } /* rightButton {object} 要插入li的右键对象 e {json} 点击事件的信息 */ U.MD.UI.Tree.rightOnclick = function (rightButton, e) { var _li = $$("li", { className: "U_MD_UI_Tree_rightli", innerHTML: "新建文件夹", parentid: e.path[1].parentid, deep: parseInt(e.path[1].deep) + 1 }, rightButton); //在右键菜单中添加li var _li1 = $$("li", { className: "U_MD_UI_Tree_rightli", innerHTML: "重命名", parentid: e.path[1].parentid, deep: parseInt(e.path[1].deep) + 1 }, rightButton); //在右键菜单中添加li var _li2 = $$("li", { className: "U_MD_UI_Tree_rightli", innerHTML: "删除", parentid: e.path[1].parentid, deep: parseInt(e.path[1].deep + 1) }, rightButton); //在右键菜单中添加li var _return = []; _return[0] = _li; _return[1] = _li1; _return[2] = _li2; return _return; } /* 搜索arr中最高的id方法 arr {arr} 要搜索的arr对象 */ U.MD.UI.Tree.createID = function (arr) { var _return = 0; //定义变量 for (var _i = 0; _i < arr.length; _i++) {//定义循环,循环对象为arr if (parseInt(arr[_i].id) > _return) {//进行判断,如果arr的id比_return大 _return = parseInt(arr[_i].id); //修改_return的值 } } return _return; //返回变量 }