统计报表中嵌入<a>标签，点击实现弹出清单功能

前两天帮着做了下统计报表的清单功能，功能很简单，统计报表的数据都是后台通过对多表联查等产生的，页面上就是一个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);
        }
    },