jQuery EasyUI使用教程之将一个HTML表格转换为数据网格

<jQuery EasyUI最新版下载>

本教程将为大家演示如何将一个表格转换为数据网格。

该数据网格的列被定义在< thead>标记中，而数据则被定义在< tbody>标记中。确保为每一个数据列设置字段名称，请看下面的示例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

< 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 >

当然你还可以定义一个复杂的表头，例如：

1 2 3 4 5 6 7 8 9 10 11 12 13

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