在datagrid的表格体中合并单元格

jquery-easyui的datagrid具有创建复杂表头和合并表格体单元格的能力，下面介绍如何合并单元格。合并后的效果图如下：

 

 

合并单元格主要通过调用mergeCells方法实现，先看创建未合并单元格时的表格代码：

$('#tt').datagrid({
    title:'Merge Cells',
    iconCls:'icon-ok',
    width:600,
    height:300,
    singleSelect:true,
    rownumbers:true,
    idField:'itemid',
    url:'datagrid_data.json',
    pagination:true,
    frozenColumns:[[
        {field:'productid',title:'Product',width:100,
            formatter:function(value){
                for(var i=0; i<products.length; i++){
                    if (products[i].productid == value) return products[i].name;
                }
                return value;
            }
        },
        {field:'itemid',title:'Item ID',width:80}
    ]],
    columns:[[
        {title:'Price',colspan:2},
        {field:'attr1',title:'Attribute',width:150,rowspan:2},
        {field:'status',title:'Status',width:60,align:'center',rowspan:2}
    ],[
        {field:'listprice',title:'List Price',width:80,align:'right'},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'}
    ]]
});

合并单元格时调用以下代码：

var merges = [{
    index:2,
    rowspan:2
},{
    index:5,
    rowspan:2
},{
    index:7,
    rowspan:2
}];
for(var i=0; i<merges.length; i++)
    $('#tt').datagrid('mergeCells',{
        index:merges[i].index,
        field:'productid',
        rowspan:merges[i].rowspan
    });

 

原文及下载地址：http://jquery-easyui.wikidot.com/tutorial:datagrid13

评论

9 楼 big3333 2014-12-05  

表格是合并了，但是序号没有合并，有没有办法处理序号合并，翻页bug的问题呢？

8 楼 extdev 2010-07-14  

dhtmlxGrid不错。

7 楼 cevin 2010-07-14  

其实要是这么做。完全可以考虑用其他的产品代替。譬如：ExtJs。岂不是更美？

6 楼 lobbychmd 2010-07-12  

我发现 easyui 这东东bug 挺多。远没有 jquery ui 成熟。
打算放弃了。。 有空试试 jquery tools.

5 楼 extdev 2010-07-10  

这是表格头合并,非表格体合并.

4 楼 joehe 2010-07-10  

3 楼 joehe 2010-07-10  

extdev 写道

不错，项目中正需要可以合并的功能。EXTJS的表格不错，可惜没找到能合并单元格的解决方案。

那你真的好好找找了

2 楼 joyfun 2010-07-09  

这个功能很强大
但是一般如果要用到动态合并我宁愿跳转到另一个页面

1 楼 extdev 2010-07-09  

不错，项目中正需要可以合并的功能。EXTJS的表格不错，可惜没找到能合并单元格的解决方案。