jQuery EasyUI使用教程之將一個HTML表格轉換爲數據網格

<jQuery EasyUI最新版下載>

本教程將爲你們演示如何將一個表格轉換爲數據網格。

該數據網格的列被定義在< thead>標記中，而數據則被定義在< tbody>標記中。確保爲每個數據列設置字段名稱，請看下面的示例：

< table id = "tt" class = "easyui-datagrid" style = "width:400px;height:auto;" >

< thead >

< tr >

< th field = "name1" width = "50" >Col 1</ th >

< th field = "name2" width = "50" >Col 2</ th >

< th field = "name3" width = "50" >Col 3</ th >

< th field = "name4" width = "50" >Col 4</ th >

< th field = "name5" width = "50" >Col 5</ th >

< th field = "name6" width = "50" >Col 6</ th >

</ tr >

</ thead >

< tbody >

< tr >

< td >Data 1</ td >

< td >Data 2</ td >

< td >Data 3</ td >

< td >Data 4</ td >

< td >Data 5</ td >

< td >Data 6</ td >

</ tr >

< tr >

< td >Data 1</ td >

< td >Data 2</ td >

< td >Data 3</ td >

< td >Data 4</ td >

< td >Data 5</ td >

< td >Data 6</ td >

</ tr >

< tr >

< td >Data 1</ td >

< td >Data 2</ td >

< td >Data 3</ td >

< td >Data 4</ td >

< td >Data 5</ td >

< td >Data 6</ td >

</ tr >

< tr >

< td >Data 1</ td >

< td >Data 2</ td >

< td >Data 3</ td >

< td >Data 4</ td >

< td >Data 5</ td >

< td >Data 6</ td >

</ tr >

</ tbody >

</ table >

固然你還能夠定義一個複雜的表頭，例如：

<  thead >

<  tr >

<  th field = "name1" width = "50" rowspan = "2" >Col 1

<  th field = "name2" width = "50" rowspan = "2" >Col 2

<  th field = "name3" width = "50" rowspan = "2" >Col 3

<  th colspan = "3" >Details

< / tr >

<  tr >

<  th field = "name4" width = "50" >Col 4

<  th field = "name5" width = "50" >Col 5

<  th field = "name6" width = "50" >Col 6

< / tr >

< / thead >

如今你能夠看到，複雜的表頭已經建立好了。

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

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