Easyui 中 datagrid 合并单元格的打印问题

最近在做一个项目，项目中要求将Easyui中的datagrid打印，在网上搜了下有一篇《EasyUI的DataGrid 打印导出》，这里基本上实现了常规easyui datagrid的打印及导出问题。

大致原理就是读datagrid的row 然后一个单元格一个单元格写到html里，通过window.print打印。

而我们项目中的datagrid是有合并单元格的，而这个导出的打印格式却是一行一行的，所以不能满足我们的要求。我们之前通过NPOI的方式导出EXCEL的方式却可以导出带有合并单元格的文件，于是想借用这个方式来实现这个功能。这个功能也是写在js中：代码如下：

function TableToXmlDemo(tableID, tableType,tableName) {

    if (tableType == "0")  //0:easyuitDatagrid      1:htmlTable
    {
        var tabObj = $("#" + tableID);
        var mfirtcolom = tabObj.datagrid("getPanel");
        var mtable = mfirtcolom.find("TABLE.datagrid-htable");
        var mtable2 = mfirtcolom.find("TABLE.datagrid-btable");

        mtable2 = mtable2[0];
        //                               var innerHTML = mtable2.innerHTML;
        //                               $("#tb2").val(innerHTML);

        //                               document.getElementById("tb2").attributes["value"] = innerHTML;



        mtable = mtable[1];

        //   $("#tb1")[0].value = mtable.innerHTML;

        //tabObj.datagrid("getPanel").panel("setTitle", "1111");

        var dataGridTitle = tabObj.datagrid("options").title;

        // mfirtcolom.datagrid("settitle","oooo");
        //alert("dataGridTitle=" + dataGridTitle);

        var str = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>";
        str += "<root  title='" + dataGridTitle + "' >";

        //                               //  表头
        for (var i = 0; i < mtable.rows.length; i++) {

            str += "<row >";
            for (var j = 0; j < mtable.rows[i].cells.length; j++) {
                str += "<cloumn ";

                str += " colSpan='" + mtable.rows[i].cells[j].colSpan + "' rowSpan='" + mtable.rows[i].cells[j].rowSpan + "' ";

                str += " >" + "<![CDATA[" + mtable.rows[i].cells[j].innerText + "]]>" + "</cloumn> ";
                ;

            }
            str += "</row >";
        }

        //  正文表

        for (var i = 0; i < mtable2.rows.length; i++) {

            str += "<row >";
            for (var j = 0; j < mtable2.rows[i].cells.length; j++) {
                str += "<cloumn ";

                str += " colSpan='" + mtable2.rows[i].cells[j].colSpan + "' rowSpan='" + mtable2.rows[i].cells[j].rowSpan + "' ";

                str += " >" + "<![CDATA[" + mtable2.rows[i].cells[j].innerText + "]]>" + "</cloumn> ";
                ;

            }
            str += "</row >";
        }

        str += "</root>";
        str += "";
    }

    else if (tableType == "1") {   //一般的HTML表格

        var tabObj = $("#" + tableID);
        var mtable = tabObj[0];

        var dataGridTitle = tableName;

        var str = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>";
        str += "<root  title='" + dataGridTitle + "' >";
        var mcell;
        var mcellenth;
        var mchild;
        for (var i = 0; i < mtable.rows.length; i++) {

            str += "<row >";
            
            for (var j = 0; j < mtable.rows[i].cells.length; j++) {
                str += "<cloumn ";
                str += " colSpan='" + mtable.rows[i].cells[j].colSpan + "' rowSpan='" + mtable.rows[i].cells[j].rowSpan + "' ";
                str += " >";
       
                mcell = mtable.rows[i].cells[j];
                mcellenth = mcell.childNodes.length;
               
                 for (var k = 0; k < mcellenth; k++) {
                     mchild = mcell.childNodes[k];
                     if (mchild.nodeType == 3) {
                         var mstr = mchild.nodeValue.toString();
                         str += mstr.trim();
                     }
                     else {
                         if (mchild.nodeName.toUpperCase() == "input".toUpperCase()) {
                             if (mchild.value.toString() == "")
                                 str += "    ";
                              else
                             str=str+" "+ mchild.value+" ";
                          }
                         else
                             str += "<![CDATA[" + mchild.innerText + "]]>";

                     }
                }
                str += "</cloumn>";

            }
            str += "</row >";
        }

        str += "</root>";
        str += "";
    
    
    
    }

    return str;



}

这段代码并没有像我引用的那篇文章去读列之类的，只是简单的读每一行，然后在html中加<td rowspan="" colspan=""></td>即可。

本想着借助这个功能去完成datagrid打印的功能，可事后发来发现我们这个版本的导出，虽然能导出合并单元格，但是合并单元格之后的非合并单元格的每一行都会多一格。

这个是什么原因呢？

后来通过代码分析，原来每次导入datagrid的一个合并单元格时，它的rowspan=3，colspan=1，这些都没有问题。问题出在了已经被合并的后两个单元格它也解析为rowspan=1 colspan=1的单元格了。于是后面的每一行都多了一列。

那这个该怎么处理？

大致思路如下：datagrid可以正常显示合并单元格，那么肯定合并单元格是有一个属性存在的。我只要知道这个属性，再加上filed字段和单元格中的textContent（也有用innerText的，但是这个属性在firefox中是读不到的，所以用textConte