前兩天幫着做了下統計報表的清單功能，功能很簡單，統計報表的數據都是後臺通過對多表聯查等產生的，頁面上就是一個Table，長的還蠻像回事的。
由於報表這塊的前期設計並不全面，沒有考慮到後期清單的功能，所以我在做清單的時候，寫了一些噁心人的代碼。最後還是比較巧妙的解決了不同統計表單如何給不同業務要求的統計字段增加功能。
後臺返回的整個Table結構是由column部分（報表擡頭/列表頭）和data部分（每行每列的cell數據）組成的。而在頁面渲染報表的時候有專門的js來重新組合數據結構，把頁面上的Table結構拼出來。所以要增加清單的入口需要先判斷哪些字段是業務上要有清單的，還有就是要在合適的字段上增加<a>標籤（並正常觸發事件，彈窗等方式來加載清單中的數據）。
如：紙質文件受控清單需要將受控處室作爲清單查詢參數。![]()
如：月度損壞檔案情況清單需要將登記類型和統計月份作爲清單查詢參數。
1.判斷業務字段，我是通過分析後端返回的數據結構以及前臺js解析數據生成table的邏輯想到這個解決辦法的。因爲js的解析過程會把每個cell字段數據放到相對應的每行每列上去，而我們table上每一行的數據都是要和列表頭id相互對應的，那麼就可以通過hardcode這樣一個filedMap用來滿足所有業務統計報表中的需求。
根據不同業務要求嵌入<a>標籤：
_linked : function(/*當前cell值*/value,/*當前filed*/id,/*用來限制總計列*/data,filedIndex){
var _link = value;
var reportType = this.reportType;
//按照各報表業務要求，把需要增加詳情的filed添加到filedMap中。
var filedMap = {/*紙質文件受控*/"fileNumber":true ,
/*損壞、修復檔案 */"yearMonth1":true,"yearMonth2":true,"yearMonth3":true,"yearMonth4":true,"yearMonth5":true,"yearMonth6":true,
"yearMonth7":true,"yearMonth8":true,"yearMonth9":true,"yearMonth10":true,"yearMonth11":true,"yearMonth12":true,
/*新增檔案*/"archivesNumber":true,"pieceNumber":true};
if(reportType == "bUPaperDocumentControlStatusStatistic" || reportType == "newArchiveStatistic" ||
reportType == "monthLossRepairArchiveStatusStatistic"){
if(filedMap[id] &&
data.materialType != "總計" &&
(data.archivesType2 != "合計" && data.archivesType2 != "總計")){
//DM1.2 各業務單位紙質文件受控情況統計表
_link = "<a name=" + filedIndex +" class=\"statementReport\" href='javascript:void(0)'>" +value+ "</a>";
}
}
return _link;
},
2.在網上查了一些資料，發現在js中寫好的<a>，其onclick事件是無法正確相應的。後來我通過後期事件綁定搞定了這個問題。
對<a>標籤追加onclick事件：
//對已經render好的頁面，給所有class爲.statementReport的dom（a標籤）對象增加onclick事件
var list = dojo.query(".statementReport");
for ( var i = 0; i < list.length; i++) {
this.connect(list[i],"onclick","showStatementDialog");
}
3.因爲清單頁面的需要，所以要通過操作js對頁面table進行處理，來得到清單查詢所需要的基本參數數據。
showStatementDialog : function(event){
//下面這幾個變量，是通過在對頁面上table的解析來獲取具體數據的，適用性不強
var currentCell = event.currentTarget;
var currentRow = currentCell.parentElement.parentElement;
var currentThead = currentRow.parentElement.parentElement.childNodes[0].childNodes[0].childNodes;
var tabContainer = this.getParent().getParent();
var reportType = this.reportType;
var reportMap = {"bUPaperDocumentControlStatusStatistic":"紙質文件受控清單","newArchiveStatistic":"檔案新增情況清單",
"monthLossRepairArchiveStatusStatistic" : "月度損壞/丟失/修復檔案情況清單"
};
var tab = ecmwdgt.getBean("StatementSearchWidget",{
title: reportMap[reportType],
closable:true
});
tabContainer.addChild(tab);
tabContainer.selectChild(tab);
if(reportType == "bUPaperDocumentControlStatusStatistic" ){
//DM1.2 各業務單位紙質文件受控情況統計表
var params = {
listType : reportType,
controlDept : currentRow.childNodes[0].innerHTML
};
tab.init(params);
}else if(reportType == "monthLossRepairArchiveStatusStatistic"){
//DM1.3 月度損壞/丟失/修復檔案情況統計表
var params = {
listType : reportType,
month : currentThead[currentCell.name].innerHTML,
type : currentRow.childNodes[0].innerHTML
};
tab.init(params);
}else if(reportType == "newArchiveStatistic" ){
//DM1.4 檔案新增情況統計表
var archivesType = currentRow.childNodes[1].innerHTML;
var numberFlag = currentThead[Number(currentCell.name)-1].innerHTML;
var _numberFlag = "";
if(numberFlag.indexOf("按卷統計")){
_numberFlag = "nuclearfolder";
}else if(numberFlag.indexOf("按件統計")){
_numberFlag = "piece";
}
var params = {
listType : reportType,
archivesType : archivesType,
numberFlag : _numberFlag
};
tab.init(params);
}
},
