jQuery EasyUI使用教程之在數據網格中建立列組

<jQuery EasyUI最新試用版免費下載>

該easyui的數據網格能夠建立列組合，以下所示：

查看jQuery EasyUI演示

在本實例中，咱們使用平面數據來填充數據網格的數據，並把listprice、unitcost、addr一、status列組合在一個單一的列下。

爲了建立列組合，您應該定義數據網格插件的columns數據。列的每一個元素是定義一組可以使用rowspan或colspan屬性來進行組合的單元格。

下面的代碼實現上面的例子：

< table id = "tt" title = "Column Group" class = "easyui-datagrid" style = "width:550px;height:250px" url = "data/datagrid_data.json" singleselect = "true" iconcls = "icon-save" rownumbers = "true" >

< thead >

< tr >

< th rowspan = "2" field = "itemid" width = "80" >Item ID</ th >

< th rowspan = "2" field = "productid" width = "80" >Product ID</ th >

< th colspan = "4" >Item Details</ th >

</ tr >

< tr >

< th field = "listprice" width = "80" align = "right" >List Price</ th >

< th field = "unitcost" width = "80" align = "right" >Unit Cost</ th >

< th field = "attr1" width = "100" >Attribute</ th >

< th field = "status" width = "60" align = "center" >Stauts</ th >

</ tr >

</ thead >

</ table >

下載該EasyUI示例：easyui-datagrid-demo.zip

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的文章！