CocoRoboDesktop/js/Controls/Complex/Tree.js

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