任务背景及需求
按页面上的现成表格，用js生成新的统计表格如下：
实现思路
１，把表格数据抽取出来生成json数组
２，计算表格总数并创建空表格
３，历遍json数组把数据动态插入所有的表格，设值/append Row
４，最后配置好所有表格的属性如thead,rowspan等
详细代码
/**
* @create: nelson
* @initBPDTable 初始化表格内容
* @调用方式
$("#main_content").initBPDTable(list);
*/
$.fn.extend({
//获取listView的数据转化为json数组
getJsonArrFromListView: function (linkCol) {
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) {
if (n != linkCol) {
jsonObj[keyArr[n]] = $(this).text().trim();
}
else
jsonObj[keyArr[n]] = $(this).find("a").attr("href");
});
jsonArr.push(jsonObj);
});
return jsonArr;
},
initBPDTable: function (list) {
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 = ''
;
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['Project 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['Project Type'
],
cy = entry['CY'
],
link = entry['Project Link'
],
name = entry['Project 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.html('
' + name + ''
);
needAppend =
false;
return false;
}
});
if (needAppend) {
var oddTpl = '
| {0} | {1} | {2} | {3} | {4} |
'
,
evenTpl = '
| {0} | {1} | {2} | {3} | {4} |
'
,
reg =
new RegExp("{\\d{1}}", "g"
);
if (isOddRow) {
This.find(".itm_table:eq(" + j + ")").find("tbody").append(evenTpl.replace('{' + i + '}', '
' + name + '').replace(reg, ""
));
}
else {
This.find(".itm_table:eq(" + j + ")").find("tbody").append(oddTpl.replace('{' + i + '}', '
' + name + '').replace(reg, ""
));
}
}
}
}
}
}
});
//初始化年份显示
This.find(".itm_table:eq(0)").find("thead").html('
'
+ ' | '
+ ' CY2014 | '
+ ' CY2015 | '
+ ' CY2016 | '
+ ' CY2017 | '
+ ' CY2018 | '
+ '
'
);
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);
});
})(jsonArr, startYear);
}
});