Namespace.register("U.MD.UI.BTree"); //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"}] //}] //var json = [{ 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"}] //},{ id: "6", name: "文件夹", deep: 0, img_url: 'http://api.1473.cn/Uform/Image/tree/folder.png', child: [{ id: "8", name: "文件夹", deep: 6, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png", // child: [{ id: "9", name: "文件夹", deep: 8, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png"}] // }, // { id: "10", name: "文件夹", deep: 6, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png" }, //{ id: "11", name: "文件夹", deep: 6, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png"}]},{ id: "7", name: "文件夹", deep: 0, img_url: 'http://api.1473.cn/Uform/Image/tree/folder.png',}]; /* 开始方法一,用来生成树和后台管理页面 arr {arr} 要解析的json arr对象 bookfun {function} 点击事件 dateDeleteFun {function} date的删除方法 dateUpdateFun {function} date的修改方法 dateInsertFun {function} date的添加方法 tree {object} 右侧要插入后台li的地方 directory {object} 要插入后台li的地方 list {object} 左侧放添加标签的的地方 listimg {String} 后台页面的img deteimg {String} 是否启用删除标签的图片 upimg {String} 是否启用修改标签的图片 */ U.MD.UI.BTree = function (arr, bookfun, dateDeleteFun, dateUpdateFun, dateInsertFun, tree, directory, list, listimg, deteimg, upimg) { U.MD.UI.BTree.jsonStartLeft(arr, tree[0], bookfun); //调用方法,生成树状图 U.MD.UI.BTree.jsonStartRight(tree[1], bookfun, dateDeleteFun, dateUpdateFun, dateInsertFun, directory, list, listimg, deteimg, upimg); //调用方法,生成管理页面 } /* 将二维数组转化为列表的方法 json {arr} 数据源json里面需要包含id,name,deep(依赖),img_url(显示图片源),child(附属目录),外部是数组 tree {object} 要插入列表的地方 bookfun {function} 没一行的点击事件 */ U.MD.UI.BTree.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.BTree.treeCreate(json[_i].child, _ul, onclickfun); //重新调用函数,参数为child的对象数组,ul对象,20的边距值,隐藏,改变的book对象 } } } /* 在json中查找指定id下的child json {arr} 要查找的arr对象 parentID {String} 要查找的id */ U.MD.UI.BTree.JsonSelect = function (json, parentID) { var _json = []; //创建一个变量_json,来接收筛选后的json for (var _i = 0; _i < json.length; _i++) {//创建循环,循环对象为json if (parentID == 0) { //判断parentID是否为0,如果是 return json; //返回json } //如果不是 if (json[_i].id == parentID) {//判断json中各个对象的id是否与parentID相等,如果是 _json = json[_i].child; //变量_json等于json中对应对象的child值 return _json; //返回变量_json } //如果不是 if (json[_i].child) { //判断json中对象是否有child值,如果有 var _return = U.MD.UI.BTree.JsonSelect(json[_i].child, parentID); //定义变量_return 值为调用方法本身的返回值 } } return _return; //返回_return } /* 创建查询管理目录的方法 json {arr} 要解析的json arr对象 tree {object} 左侧要插入后台li的地方 list {object} 左侧放添加标签的的地方 jsonpid {String} 添加标签的深度 jsondelete {function} json的删除方法 jsonupdate {function} json的修改方法 jsonadd {function} json的添加方法 deteurl {String} 是否启用删除标签的图片 upurl {String} 是否启用修改标签的图片 i {String} tree的对象值,控制下一级 j {String} tree的对象值,控制上一级 */ U.MD.UI.BTree.DirectoryCreate = function (json, tree, list, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i, j) { if (i == 0) { //判断是否载入第一层,如果是 list[1].style.display = "none"; //隐藏二级目录 list[2].style.display = "none"; //隐藏三级目录 } else { //如果不是载入第一层目录 list[2].style.display = "none"; //将三级目录隐藏 list[i].style.display = "block"; //显示对应级目录 } var _buttonText = "修改"; //定义变量_buttonText,代表修改按钮的默认值 var _button1Text = "删除"; //定义变量_button1Text,代表删除按钮的默认值 if (deteurl && upurl) { //进行判断,是否提供默认按钮,如果不是 _buttonText = ""; //消除_buttonText _button1Text = ""; //消除_button1Text } tree[i].innerHTML = ""; //将tree中的内容清空 list[i].parentID = jsonpid; //给list定义一个变量 list[i].deep = i + 1; //给list定义深度变量 if (j) { //判断是否有输入上一级 tree[j].innerHTML = ""; //如果有,清空上一级 } if (json) { //如果json存在 for (var _i = 0; _i < json.length; _i++) { //创建循环,循环对象为json var _ul = $$("ul", { className: "U_MD_UI_Tree_styleul", parentid: json[_i].parentID, deep: json[_i].deep }, tree[i]); //创建在tree中创建ul var _li = $$("li", { className: "U_MD_UI_Tree_styleli", innerHTML: json[_i].name, parentid: json[_i].id }, _ul); //创建li在tree的下一级中,css为styleli var _button = $$("input", { type: "button", pid: json[_i].id, parentid: json[_i].parentID, innerHTML: _buttonText, className: "U_MD_UI_Tree_button" }, _ul); //创建修改button在在li中,css为stylebutton var _button1 = $$("input", { type: "button", pid: json[_i].id, parentid: json[_i].parentID, innerHTML: _button1Text, className: "U_MD_UI_Tree_button1" }, _ul); //创建删除button在在li中,css为stylebutton //创建删除button在在li中,css为stylebutton _button.onclick = function () { //给修改按钮定义onclick事件 jsonupdate(this, tree, list, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i); //事件为调用jsonupdate方法,输入this为变量 } _button1.onclick = function () { //给删除按钮定义oncick事件 jsondelete(this, tree, list, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i); //事件为调用jsondelete方法,输入this为变量 } _li.onclick = function () { //给li定义onclick事件 if (j) { //判断j是否存在,如果存在 U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, this.parentid), tree, list, this.parentid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, j); //调用方法,创建下一级的下一级目录 } else { //如果不存在 if (i == 2) { //判断是否到三级目录 } else { //如果还没到 U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, this.parentid), tree, list, this.parentid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 1, 2); //调用方法,创建下一级的下一级目录 } } } } } var add = U.selectEl(".U_MD_UI_Tree_add"); if (add[i]) { //进行判断,当添加标签已存在时 list[i].removeChild(add[i]); //销毁添加标签 } var _div = $$("div", { className: "U_MD_UI_Tree_add", innerHTML: "添加新分类" }, list[i]); //创建添加标签 _div.onclick = function () { //设置添加标签的点击事件 jsonadd(this, tree, list, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i); //调用添加方法,进行添加 } } /* 在json中插入json的方法 json {arr} 要被插入的json对象 addjson {json} 要查入的json对象 */ U.MD.UI.BTree.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.BTree.jsonAdd(json[_i].child, addjson); //定义函数,调用自己,变量为json的child,要插入的json json[_i].child = _return; //json的child等于返回的json } } return json; //返回json对象 } /* 开始方法二,生成后台管理页面 arr {arr} 要解析的json arr对象 bookfun {function} 点击事件 jsonDeleteFun {function} json的删除方法 jsonUpdateFun {function} json的修改方法 jsonInsertFun {function} json的添加方法 tree {object} 右侧要插入后台li的地方 directory {object} 要插入后台li的地方 mulu {object} 左侧放添加标签的的地方 muluimg {String} 后台页面的img deteimg {String} 是否启用删除标签的图片 upimg {String} 是否启用修改标签的图片 */ U.MD.UI.BTree.jsonStartA = function (arr, bookfun, jsonDeleteFun, jsonUpdateFun, jsonInsertFun, tree, directory, mulu, muluimg, deteimg, upimg) { json = []; //将外变量josn清空 var _json = arr; //定义局部变量_json,值为r for (var _i = 0; _i < _json.length; _i++) { //定义循环,循环对象为 U.MD.UI.BTree.jsonAdd(json, _json[_i]); //运行函数,生成json } tree.innerHTML = ""; //清空tree的内容 U.MD.UI.BTree.jsonStartRight(tree, bookfun, jsonDeleteFun, jsonUpdateFun, jsonInsertFun, directory, mulu, muluimg, deteimg, upimg); //调用方法,生成管理页面 } /* 生成后台管理页面及管理页面li tree {object} 右侧要插入后台li的地方 bookfun {function} 点击事件 jsonDeleteFun {function} json的删除方法 jsonUpdateFun {function} json的修改方法 jsonInsertFun {function} json的添加方法 directory {object} 要插入后台li的地方 mulu {object} 左侧放添加标签的的地方 muluimg {String} 后台页面的img deteimg {String} 是否启用删除标签的图片 upimg {String} 是否启用修改标签的图片 */ U.MD.UI.BTree.jsonStartRight = function (tree, bookfun, jsonDeleteFun, jsonUpdateFun, jsonInsertFun, directory, mulu, muluimg, deteimg, upimg) { var _ul = $$("ul", { className: "U_MD_UI_Tree_a " }, tree); //创建对象,在tree中创建ul var _li = $$("li", { className: "U_MD_UI_Tree_listyle", yid: "1" }, _ul); //创建对象,在ul中创建li,id为a+jsonid var _img = $$("img", { "onerror": U.MD.C.imgError, src: muluimg, className: "U_MD_UI_Tree_imgstyle" }, _li); //创建对象,在li中创建img var _span = $$("span", { innerHTML: "目录管理", className: "U_MD_UI_Tree_spanstyle" }, _li); //创建对象 在li中创建span _li.onclick = function () { //设置li的点击事件 bookfun(this); //先执行点击事件 U.MD.UI.BTree.DirectoryCreate(json, directory, mulu, 0, //运行方法,生成后台页面 function (objects, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i) { var _ret = jsonDeleteFun(objects.pid); //运行删除方法 if (_ret) {//如果返回了方法 json = U.MD.UI.BTree.jsonDelete(json, objects.pid); //运行方法,修改json var _id = U.selectEl("#" + objects.pid)[0]; //获取修改对象 if (_id) { _id.parentNode.remove(); } //如果有对象,修删除 if (i == 1) { U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, objects.parentid), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 1, 2); } //刷新二级页面 if (i == 2) { U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, objects.parentid), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 2); } //刷新三级页面 if (i == 0) { U.MD.UI.BTree.DirectoryCreate(json, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 0); } //修改一级页面 } }, function (objects, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i) { var _ret = jsonUpdateFun(U.MD.UI.BTree.jsonSelectA(json, objects.pid)); //运行修改方法 json = U.MD.UI.BTree.jsonUpdate(json, _ret); //运行方法,修改json var _id = U.selectEl("#" + objects.pid)[0]; //获取修改对象 if (_id) { _id.childNodes[0].src = _ret.img_url; //修改对象 _id.childNodes[1].innerHTML = _ret.name; //修改对象 } if (i == 1) { U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, objects.parentid), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 1, 2); } //刷新二级页面 if (i == 2) { U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, objects.parentid), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 2); } //刷新三级页面 if (i == 0) { U.MD.UI.BTree.DirectoryCreate(json, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 0); } //修改一级页面 }, function (objects, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i) { var _json = {}; //定义变量 _json.parentID = objects.parentNode.parentID; //获取添加的parentid _json.deep = objects.parentNode.deep; //获取添加的deep var _ret = jsonInsertFun(_json); //运行添加方法 var _post; //定义局部对象 if (_ret) {//如果有返回值 _post = U.selectEl(".U_MD_UI_Tree_a")[1]; if (_post) {//判断前台树是否存在 if (_ret.parentID == 0) {//如果要插入的是一级目录 _post = U.selectEl(".U_MD_UI_Tree_a")[0].parentNode; //获取一级对象 } else { _post = U.selectEl("#" + _ret.parentID)[0].parentNode; //获取对应对象 } _js = []; //定义局部对象 _js[0] = _ret; //给对象定值 U.MD.UI.BTree.treeCreate(_js, _post, bookfun); //创建li } json = U.MD.UI.BTree.jsonAdd(json, _ret); //刷新json if (i == 1) { U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, _json.parentID), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 1, 2); } //刷新二级页面 if (i == 2) { U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, _json.parentID), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 2); } //刷新三级页面 if (i == 0) { U.MD.UI.BTree.DirectoryCreate(json, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 0); } //修改一级页面 } }, deteimg, upimg, 0); //调用方法,生成一级目录 } } /* 生成左边树状图的方法 arr {arr} 要处理的arrjson对象 tree {object} 要插入树状图的地方 bookfun {function} 点击事件 */ U.MD.UI.BTree.jsonStartLeft = function (arr, tree, bookfun) { json = []; //将外变量josn清空 var _json = arr; //定义局部变量_json,值为r for (var _i = 0; _i < _json.length; _i++) { //定义循环,循环对象为 U.MD.UI.BTree.jsonAdd(json, _json[_i]); //运行函数,生成json } tree.innerHTML = ""; //清空tree的内容 U.MD.UI.BTree.treeCreate(json, tree, bookfun); //运行方法,在tree中生成树状图 } /* json的删除方法 json {arr} 要处理的arrjson对象 pid {String} 要删除的id */ U.MD.UI.BTree.jsonDelete = function (json, pid) { for (var _i = 0; _i < json.length; _i++) {//定义循环,循环对象为json if (json[_i].id == pid) {//进行判断,判断json[_i]是否为目标pid json.splice(_i, 1); //删除 return json; //返回json } else { if (json[_i].child) {//如果有child json[_i].child = U.MD.UI.BTree.jsonDelete(json[_i].child, pid); //重复调用方法 } } } return json; //返回json } /* json的搜索方法 json {arr} 要处理的arrjson对象 id {String} 要删除的id */ U.MD.UI.BTree.jsonSelectA = function (json, id) { for (var _i = 0; _i < json.length; _i++) {//定义循环,循环对象为json if (json[_i].id == id) {//进行判断,判断json[_i]是否为目标pid return json[_i]; //返回目标 } if (json[_i].child) {//如果有child var _return = U.MD.UI.BTree.jsonSelectA(json[_i].child, id); //重复调用方法 if (_return) {//当返回有值 return _return; //返回结果 } } } return false; } /* json的修改方法 json {arr} 要处理的arrjson对象 upjson {json}要插入的json */ U.MD.UI.BTree.jsonUpdate = function (json, upjson) { for (var _i = 0; _i < json.length; _i++) {//定义循环,循环对象为json if (json[_i].id == upjson.id) {//进行判断,判断json[_i]是否为目标pid json[_i] = upjson; //进行替换 return json; //返回json } if (json[_i].child) {//如果有child var _return = U.MD.UI.BTree.jsonUpdate(json[_i].child, upjson); //重复调用方法 if (_return) {//当返回有值 json[_i].child = _return; return json; //返回结果 } } } return false; } /* 搜索arr中最高的id方法 arr {arr} 要搜索的arr对象 */ U.MD.UI.BTree.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; //返回变量 }