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的文章！