Javascript横向/纵向合并单元格TD

在报表系统中，涉及“HTML的TD单元格的合并”恐怕为数不少。

比如，从DB查得数据并经过后台的整理后，可能是这样的：

Table1

    JOB TOTAL SAL INDEX EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO
1 ANALYST 6000 1 7788 SCOTT ANALYST 7566 4/19/1987 3000.00   20
1 ANALYST 6000 2 7902 FORD ANALYST 7566 12/3/1981 3000.00   20
2 CLERK 4150 3 7934 MILLER CLERK 7782 1/23/1982 1300.00   10
2 CLERK 4150 4 7900 JAMES CLERK 7698 12/3/1981 950.00   30
2 CLERK 4150 5 7369 SMITH CLERK 7902 12/17/1980 800.00   20
2 CLERK 4150 6 7876 ADAMS CLERK 7788 5/23/1987 1100.00   20
3 MANAGER 8275 7 7698 BLAKE MANAGER 7839 5/1/1981 2850.00   30
3 MANAGER 8275 8 7566 JONES MANAGER 7839 4/2/1981 2975.00   20
3 MANAGER 8275 9 7782 CLARK MANAGER 7839 6/9/1981 2450.00   10
4 PRESIDENT 5000 10 7839 KING PRESIDENT   11/17/1981 5000.00   10
5 SALESMAN 5600 11 7844 TURNER SALESMAN 7698 9/8/1981 1500.00 0.00 30
5 SALESMAN 5600 12 7654 MARTIN SALESMAN 7698 9/28/1981 1250.00 1400.00 30
5 SALESMAN 5600 13 7521 WARD SALESMAN 7698 2/22/1981 1250.00 500.00 30
5 SALESMAN 5600 14 7499 ALLEN SALESMAN 7698 2/20/1981 1600.00 300.00 30

为了让用户更清晰地查看报表，结果可能需要是这样的（各职位的薪水总额及分布明细）：

Table2

    JOB TOTAL SAL INDEX EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO
1 ANALYST 6000 1 7788 SCOTT ANALYST 7566 4/19/1987 3000.00   20
2 7902 FORD ANALYST 7566 12/3/1981 3000.00   20
2 CLERK 4150 3 7934 MILLER CLERK 7782 1/23/1982 1300.00   10
4 7900 JAMES CLERK 7698 12/3/1981 950.00   30
5 7369 SMITH CLERK 7902 12/17/1980 800.00   20
6 7876 ADAMS CLERK 7788 5/23/1987 1100.00   20
3 MANAGER 8275 7 7698 BLAKE MANAGER 7839 5/1/1981 2850.00   30
8 7566 JONES MANAGER 7839 4/2/1981 2975.00   20
9 7782 CLARK MANAGER 7839 6/9/1981 2450.00   10
4 PRESIDENT 5000 10 7839 KING PRESIDENT   11/17/1981 5000.00   10
5 SALESMAN 5600 11 7844 TURNER SALESMAN 7698 9/8/1981 1500.00 0.00 30
12 7654 MARTIN SALESMAN 7698 9/28/1981 1250.00 1400.00 30
13 7521 WARD SALESMAN 7698 2/22/1981 1250.00 500.00 30
14 7499 ALLEN SALESMAN 7698 2/20/1981 1600.00 300.00 30

这就需要我们对单元格进行相应的合并。

一般来说，有两种处理方法，

  1. 在编写HTML时已设置单元格的合并；
  2. 在编写HTML时未作合并处理，后期由Javascript完成单元格合并工作。

本文讲的是第2种情况。

合并单元格的步骤

比如，我要把上表Table1中数值为ANALYST的两个单元格合并。

JOB
ANALYST
ANALYST
  • 我们首先需要将第二个ANALYST的单元格删除掉
  • 然后设置第一个ANALYST的单元格的rowSpan属性为2（表示“跨越2行”）

写得不好的公用方法

之前写了一个公用Javascript方法，用以合并相邻间文本相同的单元格。

这个方法写得不好，有明显的Bug。对已做过合并的Table，这个方法有可能导致合并单元格错误。

主要的原因在于，对于合并过单元格的表格，那么被合并的行就会相应的少一个TD，而此方法依旧按未合并过单元格的情况来获取TD对象。

比如，获取第二列的所有单元格，此程序用“获取全部TR中的第二个TD”来实现，这在未合并过单元格的Table是正确的，但对于合并过单元格的Table，则未必，因为被合并的行相应地少一个单元格。

此处将代码贴出，希望大家引以为鉴。

function mergeCell(tableObj, col) {
        var $tab = $(tableObj);
        var $trs = $tab.find("tr");

        var oldval;
        var firstTD;
        var counter = 0;
        $trs.each(function(index) {

            if (!oldval && !firstTD) {
                oldval = $(this).find("td:eq(" + col + ")").text();
                firstTD = $(this).find("td:eq(" + col + ")").get(0);
                counter = 0;
                counter++;
            } else {
                if ($(this).find("td:eq(" + col + ")").text() == oldval) {
                    $(this).find("td:eq(" + col + ")").remove();
                    counter++;
                } else {
                    $(firstTD).attr("rowSpan", counter);
                    oldval = $(this).find("td:eq(" + col + ")").text();
                    firstTD = $(this).find("td:eq(" + col + ")").get(0);
                    counter = 0;
                    counter++;
                }
            }

            if (index >= $trs.length - 1) {
                $(firstTD).attr("rowSpan", counter);
            }

        });
    }

mergeCell

页面DEMO如下（HTML代码，较长）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/tdmerger.js"></script>
<script type="text/javascript">
    $().ready(function() {

        mergeCell($("#list_table").get(0), 1);
        mergeCell($("#list_table").get(0), 2);

    });

    function mergeCell(tableObj, col) {
        var $tab = $(tableObj);
        var $trs = $tab.find("tr");

        var oldval;
        var firstTD;
        var counter = 0;
        $trs.each(function(index) {

            if (!oldval && !firstTD) {
                oldval = $(this).find("td:eq(" + col + ")").text();
                firstTD = $(this).find("td:eq(" + col + ")").get(0);
                counter = 0;
                counter++;
            } else {
                if ($(this).find("td:eq(" + col + ")").text() == oldval) {
                    $(this).find("td:eq(" + col + ")").remove();
                    counter++;
                } else {
                    $(firstTD).attr("rowSpan", counter);
                    oldval = $(this).find("td:eq(" + col + ")").text();
                    firstTD = $(this).find("td:eq(" + col + ")").get(0);
                    counter = 0;
                    counter++;
                }
            }

            if (index >= $trs.length - 1) {
                $(firstTD).attr("rowSpan", counter);
            }

        });
    }

</script>

<body>

    <TABLE id="list_table" BORDER="1">
        <TR>

            <TH>&nbsp;&nbsp;&nbsp;</TH>
            <TH>JOB</TH>
            <TH>TOTAL SAL</TH>

            <TH>INDEX</TH>
            <TH>EMPNO</TH>
            <TH>ENAME</TH>
            <TH>JOB</TH>
            <TH>MGR</TH>
            <TH>HIREDATE</TH>
            <TH>SAL</TH>
            <TH>COMM</TH>
            <TH>DEPTNO</TH>
        </TR>
        <TR>
            <TD>1</TD>
            <TD>ANALYST</TD>
            <TD>6000</TD>
            <TD>1</TD>
            <TD>7788</TD>
            <TD>SCOTT</TD>
            <TD>ANALYST</TD>
            <TD>7566</TD>
            <TD>4/19/1987</TD>
            <TD>3000.00</TD>
            <TD>&nbsp;</TD>
            <TD>20</TD>
        </TR>
        <TR>
            <TD>1</TD>
            <TD>ANALYST</TD>
            <TD>6000</TD>
            <TD>2</TD>
            <TD>7902</TD>
            <TD>FORD</TD>
            <TD>ANALYST</TD>
            <TD>7566</TD>
            <TD>12/3/1981</TD>
            <TD>3000.00</TD>
            <TD>&nbsp;</TD>
            <TD>20</TD>
        </TR>
        <TR>
            <TD>2</TD>
            <TD>CLERK</TD>
            <TD>4150</TD>
            <TD>3</TD>
            <TD>7934</TD>
            <TD>MILLER</TD>
            <TD>CLERK</TD>
            <TD>7782</TD>
            <TD>1/23/1982</TD>
            <TD>1300.00</TD>
            <TD>&nbsp;</TD>
            <TD>10</TD>
        </TR>
        <TR>
            <TD>2</TD>
            <TD>CLERK</TD>
            <TD>4150</TD>
            <TD>4</TD>
            <TD>7900</TD>
            <TD>JAMES</TD>
            <TD>CLERK</TD>
            <TD>7698</TD>
            <TD>12/3/1981</TD>
            <TD>950.00</TD>
            <TD>&nbsp;</TD>
            <TD>30</TD>
        </TR>
        <TR>
            <TD>2</TD>
            <TD>CLERK</TD>
            <TD>4150</TD>
            <TD>5</TD>
            <TD>7369</TD>
            <TD>SMITH</TD>
            <TD>CLERK</TD>
            <TD>7902</TD>
            <TD>12/17/1980</TD>
            <TD>800.00</TD>
            <TD>&nbsp;</TD>
            <TD>20</TD>
        </TR>
        <TR>
            <TD>2</TD>
            <TD>CLERK</TD>
            <TD>4150</TD>
            <TD>6</TD>
            <TD>7876</TD>
            <TD>ADAMS</TD>
            <TD>CLERK</TD>
            <TD>7788</TD>
            <TD>5/23/1987</TD>
            <TD>1100.00</TD>
            <TD>&nbsp;</TD>
            <TD>20</TD>
        </TR>
        <TR>
            <TD>3</TD>
            <TD>MANAGER</TD>
            <TD>8275</TD>
            <TD>7</TD>
            <TD>7698</TD>
            <TD>BLAKE</TD>
            <TD>MANAGER</TD>
            <TD>7839</TD>
            <TD>5/1/1981</TD>
            <TD>2850.00</TD>
            <TD>&nbsp;</TD>
            <TD>30</TD>
        </TR>
        <TR>
            <TD>3</TD>
            <TD>MANAGER</TD>
            <TD>8275</TD>
            <TD>8</TD>
            <TD>7566</TD>
            <TD>JONES</TD>
            <TD>MANAGER</TD>
            <TD>7839</TD>
            <TD>4/2/1981</TD>
            <TD>2975.00</TD>
            <TD>&nbsp;</TD>
            <TD>20</TD>
        </TR>
        <TR>
            <TD>3</TD>
            <TD>MANAGER</TD>
            <TD>8275</TD>
            <TD>9</TD>
            <TD>7782</TD>
            <TD>CLARK</TD>
            <TD>MANAGER</TD>
            <TD>7839</TD>
            <TD>6/9/1981</TD>
            <TD>2450.00</TD>
            <TD>&nbsp;</TD>
            <TD>10</TD>
        </TR>
        <TR>
            <TD>4</TD>
            <TD>PRESIDENT</TD>
            <TD>5000</TD>
            <TD>10</TD>
            <TD>7839</TD>
            <TD>KING</TD>
            <TD>PRESIDENT</TD>
            <TD>&nbsp;</TD>
            <TD>11/17/1981</TD>
            <TD>5000.00</TD>
            <TD>&nbsp;</TD>
            <TD>10</TD>
        </TR>
        <TR>
            <TD>4</TD>
            <TD>SUPER PRESIDENT</TD>
            <TD>5000</TD>
            <TD>10</TD>
            <TD>7839</TD>
            <TD>KING</TD>
            <TD>PRESIDENT</TD>
            <TD>&nbsp;</TD>
            <TD>11/17/1981</TD>
            <TD>5000.00</TD>
            <TD>&nbsp;</TD>
            <TD>10</TD>
        </TR>
        <TR>
            <TD>5</TD>
            <TD>SALESMAN</TD>
            <TD>5600</TD>
            <TD>11</TD>
            <TD>7844</TD>
            <TD>TURNER</TD>
            <TD>SALESMAN</TD>
            <TD>7698</TD>
            <TD>9/8/1981</TD>
            <TD>1500.00</TD>
            <TD>0.00</TD>
            <TD>30</TD>
        </TR>
        <TR>
            <TD>5</TD>
            <TD>SALESMAN</TD>
            <TD>5600</TD>
            <TD>12</TD>
            <TD>7654</TD>
            <TD>MARTIN</TD>
            <TD>SALESMAN</TD>
            <TD>7698</TD>
            <TD>9/28/1981</TD>
            <TD>1250.00</TD>
            <TD>1400.00</TD>
            <TD>30</TD>
        </TR>
        <TR>
            <TD>5</TD>
            <TD>SALESMAN</TD>
            <TD>5600</TD>
            <TD>13</TD>
            <TD>7521</TD>
            <TD>WARD</TD>
            <TD>SALESMAN</TD>
            <TD>7698</TD>
            <TD>2/22/1981</TD>
            <TD>1250.00</TD>
            <TD>500.00</TD>
            <TD>30</TD>
        </TR>
        <TR>
            <TD>5</TD>
            <TD>SALESMAN</TD>
            <TD>5600</TD>
            <TD>14</TD>
            <TD>7499</TD>
            <TD>ALLEN</TD>
            <TD>SALESMAN</TD>
            <TD>7698</TD>
            <TD>2/20/1981</TD>
            <TD>1600.00</TD>
            <TD>300.00</TD>
            <TD>30</TD>
        </TR>
    </TABLE>

</body>
</html>

WrongMergeTD.html

 卷土重来

于是，重新写了两个公用方法来合并单元格。

一个是合并相邻值相同的单元格；

另外一个是合并指定序号的单元格，比如2-5,6-8，是“合并第2个至第5个单元格、第6个和至第8个单元格”。

这俩方法将“获取需要合并的TD元素”的动作交由方法调用者，只负责对入参单元格作对应的合并。

JS

/**
 * Meger cells with same text
 * @param $tds TDs jquery object
 * @param type row/col
 */
function mergeCell4SameText($tds, type) {

    var oldval;
    var firstTD;
    var counter = 0;
    $tds.each(function(index) {

        if (index == 0) {
            oldval = $(this).text();
            firstTD = $(this).get(0);
            counter = 0;
            counter++;
        } else {
            if ($(this).text() == oldval) {
                $(this).remove();
                counter++;
            } else {
                if (type == ‘col‘) {
                    $(firstTD).attr("rowSpan", counter);
                } else if (type == ‘row‘) {
                    $(firstTD).attr("colSpan", counter);
                }

                oldval = $(this).text();
                firstTD = $(this).get(0);
                counter = 0;
                counter++;
            }
        }

        if (index >= $tds.length - 1) {

            if (type == ‘col‘) {
                $(firstTD).attr("rowSpan", counter);
            } else if (type == ‘row‘) {
                $(firstTD).attr("colSpan", counter);
            }

        }

    });
}

/**
 * Meger cells by the parameters "index"
 * @param $tds TDs jquery object
 * @param type row/col
 * @param index for example, 0-1,2-5,6-8,10-13
 */
function mergeCellByIndex($tds, type, index) {

    var indexArrs = index.split(‘,‘);

    var fromTo;
    var from;
    var to;

    for (var i in indexArrs) {
        fromTo = indexArrs[i];

        from = new Number(fromTo.split(‘-‘)[0]);
        to = new Number(fromTo.split(‘-‘)[1]);

        for (var j = 1 + from; j <= to; j++) {
            $($tds.get(j)).remove();
        }

        if (type == ‘col‘) {
            $($tds.get(from)).attr("rowSpan", to - from + 1);
        } else if (type == ‘row‘) {
            $($tds.get(from)).attr("colSpan", to - from + 1);
        }

    }

}

tdmerger

调用的页面（HTML代码，较长）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/tdmerger.js"></script>
<script type="text/javascript">
    $().ready(function() {

        $col1tds = $("table tr td:nth-child(1)");
        $col2tds = $("table tr td:nth-child(2)");
        $col3tds = $("table tr td:nth-child(3)");

        mergeCellByIndex($col1tds, ‘col‘, ‘0-1,2-5,6-8,10-13‘);
        mergeCellByIndex($col2tds, ‘col‘, ‘0-1,2-5,6-8,10-13‘);
        mergeCellByIndex($col3tds, ‘col‘, ‘0-1,2-5,6-8,10-13‘);

        /*
        $row2tds = $("table tr:eq(2) td");
        mergeCellByIndex($row2tds, ‘row‘, ‘6-11‘);
        */

    });

</script>

<body>

    <TABLE BORDER="1">
        <TR>

            <TH>&nbsp;&nbsp;&nbsp;</TH>
            <TH>JOB</TH>
            <TH>TOTAL SAL</TH>

            <TH>INDEX</TH>
            <TH>EMPNO</TH>
            <TH>ENAME</TH>
            <TH>JOB</TH>
            <TH>MGR</TH>
            <TH>HIREDATE</TH>
            <TH>SAL</TH>
            <TH>COMM</TH>
            <TH>DEPTNO</TH>
        </TR>
        <TR>
            <TD>1</TD>
            <TD>ANALYST</TD>
            <TD>6000</TD>
            <TD>1</TD>
            <TD>7788</TD>
            <TD>SCOTT</TD>
            <TD>ANALYST</TD>
            <TD>7566</TD>
            <TD>4/19/1987</TD>
            <TD>3000.00</TD>
            <TD>&nbsp;</TD>
            <TD>20</TD>
        </TR>
        <TR>
            <TD>1</TD>
            <TD>ANALYST</TD>
            <TD>6000</TD>
            <TD>2</TD>
            <TD>7902</TD>
            <TD>FORD</TD>
            <TD>ANALYST</TD>
            <TD>7566</TD>
            <TD>12/3/1981</TD>
            <TD>3000.00</TD>
            <TD>&nbsp;</TD>
            <TD>20</TD>
        </TR>
        <TR>
            <TD>2</TD>
            <TD>CLERK</TD>
            <TD>4150</TD>
            <TD>3</TD>
            <TD>7934</TD>
            <TD>MILLER</TD>
            <TD>CLERK</TD>
            <TD>7782</TD>
            <TD>1/23/1982</TD>
            <TD>1300.00</TD>
            <TD>&nbsp;</TD>
            <TD>10</TD>
        </TR>
        <TR>
            <TD>2</TD>
            <TD>CLERK</TD>
            <TD>4150</TD>
            <TD>4</TD>
            <TD>7900</TD>
            <TD>JAMES</TD>
            <TD>CLERK</TD>
            <TD>7698</TD>
            <TD>12/3/1981</TD>
            <TD>950.00</TD>
            <TD>&nbsp;</TD>
            <TD>30</TD>
        </TR>
        <TR>
            <TD>2</TD>
            <TD>CLERK</TD>
            <TD>4150</TD>
            <TD>5</TD>
            <TD>7369</TD>
            <TD>SMITH</TD>
            <TD>CLERK</TD>
            <TD>7902</TD>
            <TD>12/17/1980</TD>
            <TD>800.00</TD>
            <TD>&nbsp;</TD>
            <TD>20</TD>
        </TR>
        <TR>
            <TD>2</TD>
            <TD>CLERK</TD>
            <TD>4150</TD>
            <TD>6</TD>
            <TD>7876</TD>
            <TD>ADAMS</TD>
            <TD>CLERK</TD>
            <TD>7788</TD>
            <TD>5/23/1987</TD>
            <TD>1100.00</TD>
            <TD>&nbsp;</TD>
            <TD>20</TD>
        </TR>
        <TR>
            <TD>3</TD>
            <TD>MANAGER</TD>
            <TD>8275</TD>
            <TD>7</TD>
            <TD>7698</TD>
            <TD>BLAKE</TD>
            <TD>MANAGER</TD>
            <TD>7839</TD>
            <TD>5/1/1981</TD>
            <TD>2850.00</TD>
            <TD>&nbsp;</TD>
            <TD>30</TD>
        </TR>
        <TR>
            <TD>3</TD>
            <TD>MANAGER</TD>
            <TD>8275</TD>
            <TD>8</TD>
            <TD>7566</TD>
            <TD>JONES</TD>
            <TD>MANAGER</TD>
            <TD>7839</TD>
            <TD>4/2/1981</TD>
            <TD>2975.00</TD>
            <TD>&nbsp;</TD>
            <TD>20</TD>
        </TR>
        <TR>
            <TD>3</TD>
            <TD>MANAGER</TD>
            <TD>8275</TD>
            <TD>9</TD>
            <TD>7782</TD>
            <TD>CLARK</TD>
            <TD>MANAGER</TD>
            <TD>7839</TD>
            <TD>6/9/1981</TD>
            <TD>2450.00</TD>
            <TD>&nbsp;</TD>
            <TD>10</TD>
        </TR>
        <TR>
            <TD>4</TD>
            <TD>PRESIDENT</TD>
            <TD>5000</TD>
            <TD>10</TD>
            <TD>7839</TD>
            <TD>KING</TD>
            <TD>PRESIDENT</TD>
            <TD>&nbsp;</TD>
            <TD>11/17/1981</TD>
            <TD>5000.00</TD>
            <TD>&nbsp;</TD>
            <TD>10</TD>
        </TR>
        <TR>
            <TD>5</TD>
            <TD>SALESMAN</TD>
            <TD>5600</TD>
            <TD>11</TD>
            <TD>7844</TD>
            <TD>TURNER</TD>
            <TD>SALESMAN</TD>
            <TD>7698</TD>
            <TD>9/8/1981</TD>
            <TD>1500.00</TD>
            <TD>0.00</TD>
            <TD>30</TD>
        </TR>
        <TR>
            <TD>5</TD>
            <TD>SALESMAN</TD>
            <TD>5600</TD>
            <TD>12</TD>
            <TD>7654</TD>
            <TD>MARTIN</TD>
            <TD>SALESMAN</TD>
            <TD>7698</TD>
            <TD>9/28/1981</TD>
            <TD>1250.00</TD>
            <TD>1400.00</TD>
            <TD>30</TD>
        </TR>
        <TR>
            <TD>5</TD>
            <TD>SALESMAN</TD>
            <TD>5600</TD>
            <TD>13</TD>
            <TD>7521</TD>
            <TD>WARD</TD>
            <TD>SALESMAN</TD>
            <TD>7698</TD>
            <TD>2/22/1981</TD>
            <TD>1250.00</TD>
            <TD>500.00</TD>
            <TD>30</TD>
        </TR>
        <TR>
            <TD>5</TD>
            <TD>SALESMAN</TD>
            <TD>5600</TD>
            <TD>14</TD>
            <TD>7499</TD>
            <TD>ALLEN</TD>
            <TD>SALESMAN</TD>
            <TD>7698</TD>
            <TD>2/20/1981</TD>
            <TD>1600.00</TD>
            <TD>300.00</TD>
            <TD>30</TD>
        </TR>
    </TABLE>

</body>
</html>

mergeTD

对于合并单元格，这两种方式都不太满意，可是，也想不到更好的方法对此操作作封装。

如果童靴有更好的方法，请指点！！

Javascript横向/纵向合并单元格TD

时间： 2024-10-13 17:39:15

Javascript横向/纵向合并单元格TD的相关文章

gridControl根据值合并单元格

在DevExpress中GridControl中纵向合并单元格只需要设置this.gridView1.OptionsView.AllowCellMerge = true;列默认是可合并的,若设置某列不可合并可设置该列为this.gridColumn1.OptionsColumn.AllowMerge = DevExpress.Utils.DefaultBoolean.False; private void grvDetail_CellMerge(object sender, CellMergeE

让我头疼一下午的Excel合并单元格

Excel导出常见问题 excel导出其实不算什么难事 在网上copy下模板代码,填充自己的业务数据,提供一个http接口基本就可以得到你要导出的数据了. 但是,凡事都有例外,截止今天,excel导出我遇到的主要是两大类问题 1.大数据量的excel数据,比如几十万条甚至更多的数据导出 2.因为excel中内容的问题,导致导出后的excel不能直接打开,报错"由于一些内容不可取,Excel无法打开xxx.xlsx.是否要打开并修复此工作簿?" 针对第一种大数据量问题,我遇到的主要问题是

datagridview 纵向 横向 合并单元格

datagridview 单元格合并:纵向以及横向合并参考了csdn上不知哪位的代码,具体哪位找不到连接了. 纵向合并: /// <summary> /// 纵向合并,即合并数据项的值 /// </summary> /// <param name="e"></param> private void DrawCellVer(DataGridViewCellPaintingEventArgs e) { if (e.CellStyle.Alig

实操记录之-----Ant Design of Vue 增强版动态合并单元格，自动根据数据进行合并，可自定义横纵向合并

前几天搞了个简易版的动态合并单元格 但是需求有变化,就只能稍微改改了~~ 欢迎路过的各位大佬指出我代码的问题~~~~ 另: 代码执行效率不是很高,如果需要大量渲染更多数据建议可以直接使用原生 <template> <page-view :title="title"> <h1>第一種數據結構,前端渲染</h1> <div class="snall-table-spacing"> <a-table :co

table合并单元格 colspan（跨列）和rowspan（跨行）

colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元格4 该例通过把colspan设为“3”, 令所在单元格横跨了三列.如果我们将colspan设为“2”,则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数. 该例在浏览器中将显示如下: 单元格1 单元格2 单元格3 单元

带复杂表头合并单元格的HtmlTable转换成DataTable并导出Excel(转)

步骤: 一.前台JS取HtmlTable数据,根据设定的分隔符把数据拼接起来 <!--导出Excel--> <script type="text/javascript"> //导出Excel function exportExcel() { var data = ""; $("#divRptTable").find("table").find("tr").each(function

DataGridView合并单元格（多行多列合并）

一.点击在拖入的显示控件(TreeList)右上方的箭头,在Treelist任务中选择数据源,添加项目数据源,依次选择数据库.数据集,新建连接,浏览选择数据库(*.mdb),依次点击 下一步,选择“表”,完成. 二.具体代码如下: #region"合并单元格(多行多列)" //需要(行.列)合并的所有列标题名 List<String> colsHeaderText_V = new List<String>(); List<String> colsHe

EasyUI DataGrid根据字段动态合并单元格

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fn" uri=&

DataGridView合并单元格(一列或一行)之一

#region"合并单元格的测试(一列或一行)" // int?是搜索一种类型(可空类型),普通的int不能为null,而用int?,其值可以为null //private int? nextrow = null; //private int? nextcol = null; //在CellPainting方法后调用 private void dataGridView1_CellFormatting(object sender, System.Windows.Forms.DataGri