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'}
- ]]
- });
$('#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
- });