jquery: json树组数据输出到表格Dom树的处理方法

项目背景

项目中需要把表格重排显示

处理方法

思路主要是用历遍Json数组把json数据一个个append到5个表格里，还要给每个单元格绑定个单击弹出自定义对话框，表格分了单双行，第一行最后还要改rowspan，程序还没优化运行正常先给客户展示先

1,表格数据->json数组

2,json树组数据输出到表格Dom树

2015/3/25日已优化并重构程序

/**
 * @create: nelson
 * @initITMTableV2	初始化表格内容
 * @调用方式
   $("#main_content").initITMTableV2(list,popup);
 */
$.fn.extend({
    bindTdClink: function (Target, jsonObj) {
        var This = $(this);
        var $Target = $(Target);
        $Target.find(".popup_more").attr("href", "/item=" + jsonObj['ID']).attr("target", "_blank");
        $Target.find(".p_title").text(jsonObj['Product Name']);
        //$Target.find(".popup_c td").each(function (n) {
        $Target.find(".p_even_r td").each(function (n) {
            var That = $(this);
            switch (jsonObj[n + 1]) {
                case "Complete":
                    That.html('<img src="/images/circle_green.png" />');
                    break;
                case "On-going":
                    That.html('<img src="/images/circle_yellow.png" />');
                    break;
                case "Not applicable":
                    That.html('<img src="/images/circle_red.png" />');
                    break;
                default:
                    That.html('');
                    break;
            }
        });
        $Target.show();
        $Target.prev().show();
    },
    //获取listView的数据转化为json数组
    getJsonArrFromListView: function () {
        var This = $(this);
        var keyArr = new Array(),
        jsonArr = new Array();
        This.find("thead th").each(function () {
            keyArr.push($(this).text().trim());
        });
        This.find("tbody tr").each(function () {
            var jsonObj = {};
            $(this).find("td").each(function (n) {
                jsonObj[keyArr[n]] = $(this).text().trim();
            });
            jsonArr.push(jsonObj);
        });
        return jsonArr;
    },
    initITMTableV2: function (list, popup) {
        var This = $(this),
            $list = $(list);
        var keyArr = new Array(),
            jsonArr = new Array(),
            yearArr = new Array();

        jsonArr = $list.getJsonArrFromListView(3);
        //计算起始年份
        var startYear = (function (jsonArr) {
            var result = 2000;
            $.each(jsonArr, function (entryIndex, entry) {
                var temp = Number(entry['CY']);
                if (temp > result) {
                    result = temp;
                }
            });
            return result - 4;
        })(jsonArr);
        //构建表格
        (function (jsonArr, startYear) {
            var tableTpl = '<table class="itm_table"><thead><tr><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead><tbody><tr class="odd"><td rowspan="1">{tableTitle}</td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>';
            var configs = {
                titleArr: new Array(),
                col: 5,
                strHtml: "",
                targetJsonArr: new Array(),
                tLength: function () { return this.titleArr.length; }
            };
            $.each(jsonArr, function (entryIndex, entry) {
                for (var i = 0; i < 5; i++) {
                    if (entry['CY'] == startYear + i) {
                        configs.targetJsonArr.push(entry);
                        var title = entry['Product Type'];
                        if (configs.titleArr.length == 0) {
                            configs.titleArr.push(title);
                        }
                        else {
                            var newTitleFlag = true;
                            for (var j = 0; j < configs.titleArr.length; j++) {
                                if (configs.titleArr[j] == title) {
                                    newTitleFlag = false;
                                    break;
                                }
                            }
                            if (newTitleFlag) {
                                configs.titleArr.push(title);
                            }
                        }
                    }
                }
            });
            //生成空表格
            for (var i = 0; i < configs.tLength() ; i++) {
                configs.strHtml += tableTpl.replace("{tableTitle}", configs.titleArr[i]);
            }
            This.html(configs.strHtml);
            //插入数据
            var jArr = configs.targetJsonArr;
            $.each(jArr, function (entryIndex, entry) {
                var title = entry['Product Type'],
                    cy = entry['CY'],
                    name = entry['Product Name'];
                for (var i = 0; i < 5; i++) {
                    if (cy == startYear + i) {
                        for (var j = 0; j < configs.tLength() ; j++) {
                            if (title == configs.titleArr[j]) {
                                var needAppend = true,
                                    isOddRow;
                                This.find(".itm_table:eq(" + j + ")").find("tbody>tr").each(function (n) {
                                    var obj = $(this),
                                        self = (n == 0) ? obj.find("td:eq(" + (i + 1) + ")") : obj.find("td:eq(" + i + ")");
                                    isOddRow = (obj.attr("class") == "odd");
                                    if (self.html() == "") {
                                        self.text(name);
                                        self.click(function () { $(this).bindTdClink(popup, entry); }).css("cursor", "pointer");
                                        needAppend = false;
                                        return false;
                                    }
                                });
                                if (needAppend) {
                                    var oddTpl = '<tr class="odd"><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td></tr>',
                                        evenTpl = '<tr class="even"><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td></tr>',
                                        reg = new RegExp("{\\d{1}}", "g");
                                    if (isOddRow) {
                                        This.find(".itm_table:eq(" + j + ")")
                                            .find("tbody")
                                            .append(evenTpl.replace('{' + i + '}', name).replace(reg, ""))
                                            .find(">tr:last")
                                            .find("td:eq(" + i + ")")
                                            .click(function () { $(this).bindTdClink(popup, entry); })
                                            .css("cursor", "pointer");
                                    }
                                    else {
                                        This.find(".itm_table:eq(" + j + ")")
                                            .find("tbody").append(oddTpl.replace('{' + i + '}', name).replace(reg, ""))
                                            .find(">tr:last")
                                            .find("td:eq(" + i + ")")
                                            .click(function () { $(this).bindTdClink(popup, entry); })
                                            .css("cursor", "pointer");
                                    }
                                }
                            }
                        }
                    }
                }
            });
            //初始化年份显示
            This.find(".itm_table:eq(0)").find("thead").html('<tr>'
                + '<th></th>'
                + '<th><img src="/images/arrow_red.png" /><span class="cy">CY2014</span></th>'
                + '<th><img src="/images/arrow_green.png" /><span class="cy">CY2015</span></th>'
                + '<th><img src="/images/arrow_purple.png" /><span class="cy">CY2016</span></th>'
                + '<th><img src="/images/arrow_blue.png" /><span class="cy">CY2017</span></th>'
                + '<th><img src="/images/arrow_orange.png" /><span class="cy">CY2018</span></th>'
                + '</tr>');
            This.find(".itm_table:eq(0)").find(".cy").each(function (n) {
                yearArr.push((startYear + n).toString());
                $(this).text("CY" + yearArr[n]);
            });
            //初始化行的rowspan
            This.find(".itm_table").each(function () {
                var self = $(this);
                var len = self.find("tbody>tr").length;
                self.find("tbody>tr:first").find("td:eq(0)").attr("rowspan", len).css("font-weight", "bold");
            });
            var $popup = $(popup);
            $popup.find(".popup_x").click(function () {
                $popup.hide();
                $popup.prev().hide();
            });

        })(jsonArr, startYear);

    }
});