CocoRoboDesktop/js/Controls/Complex/Table.js

Namespace.register("U.MD.UI.table");

/*
    表格控件的基础函数
    param1 datasource 数据源是一个object类型数组。
    param2 titles 标题是一个json类型数据
    param3 css 样式是一个json类型数据
    param4 parent 父元素 
*/
U.MD.UI.table = function (datasource, titles, css, parent) {
    U.MD.UI.table.thead(datasource, titles, css, parent);
    //创建表格
}
/*
    表格控件的头部函数
    param1 {json} datasource 数据源是一个object类型数组。
    param2 {json} titles 标题是一个json类型数据
    param3 {json} css 宽度是一个json类型数据
    param4 {element} parent 父元素
    param5 {number} index 默认页面
    param6 {number} prows 页面
*/
U.MD.UI.table.thead = function (datasource, titles, css, parent, index, prows) {
    if (!index) {
        //index默认为一
        index = 1;
        //prwos默认为数据源的长度
        prows = datasource.length;
    }
    var _table, _thead, _tr, _tbody;
    //申明变量
    _table = $$("table", { style: {
        "text-align":"center",
        "position": "relative",
        "width": " 100%",
        "border-collapse": " collapse",
        "border-width": " 1px",
        "border-style": " solid",
        "border-color": " rgb(213, 213, 213)",
        "border-image": " initial", 
        "display": "table"} }, parent);
    //创建table标签
    _thead = $$("thead", {}, _table);
    //创建thead标签
    _tr = $$("tr", {}, _thead);
    //创建tr标签
    for (var num in titles) {
        //遍历titles
        if (typeof titles[num] === "object") {
        //判断是否有绑定事件
            $$("th", { innerHTML: titles[num].name, style: { 
                "cssText": css[num],
                "padding": "10px 0",
                "font-weight": "normal",
                "border": "1px solid #d5d5d5"
             }, id: "th" }, _tr);
            //生成th
        } else {
            $$("th", { innerHTML: titles[num], style: {
                "cssText": css[num],
                "padding": "10px 0",
                "font-weight": "normal",
                "border": "1px solid #d5d5d5"
            }, id: "th" }, _tr);
            //生成th 
        }
    }

    _tbody = $$("tbody", { style: { cssText: "width:100%;" }, id: "tbody" }, _table);
    //生成tbody
    U.MD.UI.table.tbody(_tbody, datasource, titles, css, index, prows);
    //运行tbody函数
    return _tbody;
    //返回tbody
}
/*
    表格控件的身体函数
    param1 {element} parent 父元素,表格生成的地方
    param2 {json} datasource 数据源是一个object类型数组。
    param3 {json} titles 标题是一个json类型数据
    param4 {json} css 宽度是一个json类型数据
    param5 {number} index 默认页面
    param6 {number} prows 页面行数
*/
U.MD.UI.table.tbody = function (parent, datasource, titles, css, index, prows) {
    var _tr, _td, _div, _neirong;
    //申明变量
    for (var num = (index - 1) * prows; num < index * prows && num < datasource.length; num++) {
        //建立一个循环，以(index - 1) * prows为初始值，index * prows为终点进行循环
        if (num % 2 != 0) {
            //判断table列表的行数是否是单数
            _tr = $$("tr", { style: { cssText: "background-color: #FFF;" }, id: "tr" }, parent);
            //行数是单的背景颜色是白色
        } else {
            _tr = $$("tr", { style: { cssText: "background-color: #dde4ee;" }, id: "tr" }, parent);
            //行数是双的背景颜色是#dde4ee
        }
        for (var name in titles) {
            //遍历titles 
            _td = $$("td", { id: "td" }, _tr);
            //生成td
            if (titles[name].content) {
                for (var k = 0; k < titles[name].content.length; k++) {
                    //遍历添加的元素
                    _div = U.MD.UI.table.printDiv(_td, titles[name].content[k]);
                    //生成div
                    if (titles[name].content[k].onclick) {
                        U.MD.UI.table.onclick(_div, datasource[num], titles[name].content[k].onclick);
                    }
                    //添加点击事件
                }
            } else {
                _div = $$("div", { innerHTML: datasource[num][name], style: { "overflow": "hidden", "cssText": css[name]} }, _td);
                if (titles[name].id) {//判断是否需要给td添加id
                    _div.id = datasource[num][titles[name].id];
                }
            }
        }
    }
}
/*
    表格控件的分页表格函数
    param1 {json} datasource   数据源 json
    param2 {json} titles 标题是一个json类型数据
    param3 {json} css 宽度是一个json类型数据
    param4 {number} prows  页面行数 int
    param5 {number} index  默认页面  int
    param6 {element} parent 父元素 
*/
U.MD.UI.table.pageTable = function (datasource, titles, css, prows, index, parent) {

    var _div =  $$("div", { "style": {
        "left": "0px",
        "right": "0px",
        "width": "100%",
        "margin": "0 auto", 
        "top": "200px" }
    }, parent);
    //生成一个大div放表格和分页
    var _tdiv = $$("div", {}, _div);
    //生成一个div 放表格
    var _tbody = U.MD.UI.table.thead(datasource, titles, css, _tdiv, index, prows);
    //生成表格，放_tdiv里
    var _pdiv = $$("div", { "style": {"width": "650px", "margin": "20px auto 0 auto"}}, _div); //生成一个div 放分页按钮
    new U.UF.P.page(_pdiv, datasource.length, prows, index, function (page) {
    //生成分页控件,当点击其他页面是触发匿名波函数
        U.MD.UI.table.delChild(_tbody);
        //当点击下一页时，首先删除tbody 下全部子元
        U.MD.UI.table.tbody(_tbody, datasource, titles, css, page, prows);
        //生成tbody
    });
}
/*
    删除子元素函数 
    param {element}obj 删除子元素的函数
*/
U.MD.UI.table.delChild = function (obj) {
    for (var num = obj.children.length - 1; num >= 0; num--) {
        //得到元素底下的全部子元素
        obj.removeChild(obj.children[num])
        //删除子元素
    }
}
/*
    点击事件函数
    param1 {element} obj 点击事件的触发对象
    param2 {json} datasource 展示的数据

*/
U.MD.UI.table.onclick = function (obj, datasource, fun) {
    obj.onclick = function () {
        //绑定事件
        fun(datasource);
    }
}
/*
    打印div
    param2 {sting || element} content  生成内容（字符串或者元素）
    param1 {element} parent 生成的父元素
*/
U.MD.UI.table.printDiv = function (parent, content) {
    var _div;
    //判断content类型是否是字符串
    if (typeof content.name == "string") {
        //是字符串的生成div，打印内容  
        _div = $$("div", { "innerHTML": content.name }, parent);
    }
    //如果content类型是object类型
    if (typeof content.name == "object") {
        //就克隆Contet
        var _dd = content.name.cloneNode(true);
        parent.appendChild(_dd);
        _div = _dd;
    }
    return _div;
}