在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