CocoRoboDesktop/js/Controls/Complex/BTree.js

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; //返回变量
}