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);
}
});
