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的教程！