jsp中display:table根据某列合并其他列

发布时间 2023-04-23 13:22:11作者: 胜者为王东恺

业务需求是这样的:根据前面的列合并后面的列

 代码:

<body onload="fixRowspan()">
    <display:table name="dataList" id="tableList" cellspacing="0" cellpadding="0" requestURI="/x/xx_xxx.action"  >
    <display:column media="html" title="<input type='checkbox' class='chk' name='selChkbox' >" style="width:40px"/>
    <display:column property="invoiceNo"  title="比较的列" style="color:red"/>
    <display:column property="weight"  title="不重要的列1"/>
    <display:column property="makeHours"  title="不重要的列2"/>
    <display:column property="factMoney" title="合并列1"/>    
    <
display:column media="html" title="合并列2" style="width:6%">       <s:if test='%{#attr.bid != ""}'>         <s:a ><s:property value="#i18n_print"/></s:a>       </s:if>     </display:column> </display:table> </body>

js代码:

<script>
  function fixRowspan() {
    var tb = document.getElementById("tableList");
    var contrastIndex = 1;//对比的列序号
    var mergeIndexs = [4,5];//需要合并的列序号,注意:序号必须按从小到大放置       @1
    var row_span_num = 1;
    var first_row_title = "";
    var first_row_obj_list = [];
    for ( var i = 1; i < tb.rows.length; i++) {
      var first_new_row_title = tb.rows[i].cells[contrastIndex].innerHTML;
      if (first_row_title != "" && first_row_title == first_new_row_title) {
        for(var j = 0; j < mergeIndexs.length; j++){
          tb.rows[i].deleteCell(mergeIndexs[j] - j);//删除              @2
        }
        row_span_num++;
      } else {
        if (first_row_title != "") {
          for(var j = 0; j < mergeIndexs.length; j++){
            first_row_obj_list[j].setAttribute("rowSpan", row_span_num);
          }
          row_span_num = 1;
        }
        for(var j = 0; j < mergeIndexs.length; j++){
          first_row_obj_list[j] = tb.rows[i].cells[mergeIndexs[j]];
        }
        first_row_title = first_new_row_title;
      }
    }
  }
</script>

要注意的点:

在删除多余的cell时,因为row中的cell是按照下标来的,如果删除一个cell,那么后面的cell的下标就会向前移,所以在@2时需要实时把下标 - j ,而@1处则必须按顺序放,这样才不会出现错乱的情况;

当然,我们也可以按从大到小排,这样在@2处就不需要 - j 了