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

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

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

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

查看jQuery EasyUI演示

创建数据网格

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

< 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回调函数中放置下面的代码。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$( '#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的教程！