jQuery EasyUI使用教程之合并数据网格的单元格

<jQuery EasyUI最新试用版免费下载>

数据网格经常需要合并多个单元格，本教程将教会您在数据网格中如何合并单元格。

合并数据网格的单元格，您只需要简单地调用'mergeCells'方法并传入合并信息参数，告诉数据网格如何合并单元格。在合并的单元格中，除了第一个单元格以外，其他的单元格在合并后会被隐藏。

查看jQuery EasyUI演示

创建数据网格

< table id = "tt" title = "Merge Cells" style = "width:550px;height:250px" url = "data/datagrid_data.json" singleselect = "true" iconcls = "icon-save" rownumbers = "true" idfield = "itemid" pagination = "true" >
< thead frozen = "true" >
< tr >
< th field = "productid" width = "80" formatter = "formatProduct" >Product ID</ th >
< th field = "itemid" width = "100" >Item ID</ th >
</ tr >
</ thead >
< thead >
< tr >
< th colspan = "2" >Price</ th >
< th rowspan = "2" field = "attr1" width = "150" >Attribute</ th >
< th rowspan = "2" field = "status" width = "60" align = "center" >Stauts</ th >
</ tr >
< tr >
< th field = "listprice" width = "80" align = "right" >List Price</ th >
< th field = "unitcost" width = "80" align = "right" >Unit Cost</ th >
</ tr >
</ thead >
</ table >

合并单元格

当数据加载时，我们在数据网格中合并单元格，因此在onLoadSuccess回调函数中放置下面的代码。

$( '#tt' ).datagrid({
onLoadSuccess: function (){
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
});
}
});

下载EasyUI示例：easyui-datagrid-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程！