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

1.合并方法

/**
* EasyUI DataGrid根据字段动态合并单元格
* 参数 tableID 要合并table的id
* 参数 colList 要合并的列,用逗号分隔(例如:"name,department,office");
*/
function mergeCellsByField(tableID, colList) {
    var ColArray = colList.split(",");
    var tTable = $("#" + tableID);
    var TableRowCnts = tTable.datagrid("getRows").length;
    var tmpA;
    var tmpB;
    var PerTxt = "";
    var CurTxt = "";
    var alertStr = "";
    for (j = ColArray.length - 1; j >= 0; j--) {
        PerTxt = "";
        tmpA = 1;
        tmpB = 0;

        for (i = 0; i <= TableRowCnts; i++) {
            if (i == TableRowCnts) {
                CurTxt = "";
            }
            else {
                CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];
            }
            if (PerTxt == CurTxt) {
                tmpA += 1;
            }
            else {
                tmpB += tmpA;
               
                tTable.datagrid("mergeCells", {
                    index: i - tmpA,
                    field: ColArray[j],  //合并字段
                    rowspan: tmpA,
                    colspan: null
                });
                tTable.datagrid("mergeCells", { //根据ColArray[j]进行合并
                    index: i - tmpA,
                    field: "Ideparture",
                    rowspan: tmpA,
                    colspan: null
                });
              
                tmpA = 1;
            }
            PerTxt = CurTxt;
        }
    }
}

2.调用合并方法

  //呈现列表数据
        $('#List').datagrid({ pagination: true,
            onLoadSuccess: function (data) {
                if (data.rows.length > 0) {
                    //调用mergeCellsByField()合并单元格
                    mergeCellsByField("tbList", "No");
                }
            }
        });

说明:

mergeCellsByField(tableID, colList) ;

参数 tableID 要合并table的id
参数 colList 要合并的列,用逗号分隔(例如:"name,department,office");

这种方法一般情况下都不会用,因为合并出来的不美观

假如:

1 1 1
1 5 1
1 5 1
1 5 2
1 1 2

如下

1 1 1
5 1
1
2
1 2

 

由于表格的限制,没法合并第三列了,3个“1”,2个“2”,合并掉,大家就明白怎么不美观了,不适合一般的查阅习惯

哈哈,根据我方法里面的红色部分,以一个为主列,其他根据他的行数合并,噢噢噢噢噢噢。成功啦

 

非常感谢

http://www.gogogogo.me/development/EasyUI-DataGrid-mergeCells.html

我弄了好多天没搞定,真心的祝你全家健康幸福!!!!

 

时间: 2024-09-16 17:21:43

EasyUI DataGrid根据字段动态合并单元格的相关文章

poi java excel-java poi 导出excel 把一样的数据动态合并单元格

问题描述 java poi 导出excel 把一样的数据动态合并单元格 急求,有一个list数据 导出成 这种格式 公司和年份两列是要有动态合并功能 并且年份合并的时候不能跨公司 有没有大神帮帮忙... HSSFWorkbook workbook = new HSSFWorkbook(); String[] columnNames = new String[]{"编号","公司", "年份","性质", "名称&qu

jquery 动态合并单元格的实现方法_jquery

如下所示: ////在table的第二行的位置添加一行: var tbl_elm = $("#dgList"); $('<tr><td colspan=\'2\'>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1)) ////table中指定行第N列合并单元格(合并后会多出一列,删除N+1单元格即可) var tds = $("#dgList .Tab

JSP中动态合并单元格的实例代码_JSP编程

废话不多说了,具体代码如下所示: <span style="font-size:14px;"> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <table width="100%" border="0" cellspacing="0" cellpadding="0&q

动态合并单元格

问题描述 数据查询出来之后,相同的列进行合并如何实现,效果如图所示 解决方案 解决方案二:你的数据首先必须是树状的才好这样排版,如果你的数据取出来就是一行一行的,那很难.如果你只有这一个表的数据的话,那建议你分三次查询,第一次查询片名,第二次查询排期,第三次才查询最终的场次.这样按照树状组织数据,你再布局就容易了.解决方案三:你可以select的时候orderbycolumn1,column2.这样出来的数据就是一组的在一起了,然后遍历时做一个算法,遇到不一样的才单起一行.或者先在内存里把取出的

C++ datagridview动态合并单元格代码

效果如下图第一列"国家",相同的数据可以合并为一个单元格显示. 我的datagridview数据源是通过图形化界面拖放dataset与数据库教程绑定的 /// <summary> /// 合并GridView中某列相同信息的行(单元格) /// </summary> /// <param name="GridView1">GridView</param> /// <param name="cellNum

javascript-easyui中datagrid合并单元格后,再编辑。单元格错位怎么解决?

问题描述 easyui中datagrid合并单元格后,再编辑.单元格错位怎么解决? easyui中datagrid合并单元格后,当开启其他列某一个单元格进入编辑状态时,合并行会出现错位,该怎么解决啊??? 解决方案 EasyUI DataGrid可编辑单元格easyUI合并DataGrid单元格jquery easyUI 中datagrid单元格的合并 解决方案二: easyui中datagrid合并单元格后,再编辑

求解datagridview 如何实现动态纵向合并单元格??

问题描述 1.datagridview如何实现动态纵向合并单元格??我的datagridview是通过图形化绑定了数据源来显示数据,我的数据库有一张订单表,两个主键字段:主单号字段为和序列号字段:一个主单号可以对应任意多条序列号记录.datagridview中如何实现主单号一列,比如有4条相同的主单号,则这4条主单号只显示在该列下的一个合并了的单元格中,它的右边按正常的方式对应列出各个序列号的记录.求解,谢谢.[img=C:DocumentsandSettingsAdministrator桌面3

jquery easyui datagrid 只有部分列的单元格调用单击单元格事件

问题描述 jquery easyui datagrid 只有部分列的单元格调用单击单元格事件 jquery easyui datagrid 只有部分列的单元格调用单击单元格事件. 比如有姓名,年龄,性别3列.我要点击姓名下的单元格执行一些方法,但点击年龄和性别下的单元格则不执行方法 解决方案 http://www.cnblogs.com/youring2/archive/2013/03/01/2938661.html 解决方案二: EasyUI Datagrid 自定义列.Foolter及单元格

Flex DataGrid 伪合并单元格实现思路_Flex

<?xml version="1.0" encoding="utf-8"?> <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" widt