DataGrid for jQuery基本用法--定义表头

DataGrid for jQuery现在是easyui项目的组成部分，基本用法（一）中讲了怎样转换现有的HTML表格。

 

DataGrid for jQuery单个项目的地址：http://www.etmvc.cn/project/show/67

easyui项目的地址：http://code.google.com/p/jquery-easyui/

 

现在介绍怎样定义表头。

最容易最直观的定义表头方法是在MARKUP中定义，如下所示：

<table id="tt">
	<thead>
		<tr>
			<th field="code" width="80">产品编号</th>
			<th field="name" width="150">名称</th>
			<th field="unit" width="80">单位</th>
			<th field="place" width="100">产地</th>
			<th field="cost1" width="80" align="right">毛利</th>
			<th field="cost2" width="80" align="right">纯利</th>
		</tr>
	</thead>
</table>

 

注意到在<thead>中所定义的<th>即成为DataGrid的列，其中field属性即是数据集的字段名称，表示这是一个数据列。

数据集格式的定义如下所示：

{
	rows:[
	{code:'001',name:'电视1',unit:'台',place:'南京',cost1:'2001',cost2:'1501'}
	]
}

现在执行下面代码：

			$('#tt').datagrid({
				width:620,
				height:300,
				url:'data.json'
			});

我们能够看到一个表格已经建立：

现在来对表头改进一下，表中的毛利和纯利二列想做为一个组使用，我们可以这样重新定义表头：

<table id="tt">
	<thead>
		<tr>
			<th field="code" rowspan="2" width="80">产品编号</th>
			<th field="name" rowspan="2" width="150">名称</th>
			<th field="unit" rowspan="2" width="80">单位</th>
			<th field="place" rowspan="2" width="100">产地</th>
			<th colspan="2">利润</th>
		</tr>
		<tr>
			<th field="cost1" width="80" align="right">毛利</th>
			<th field="cost2" width="80" align="right">纯利</th>
		</tr>
	</thead>
</table>

注意到对rowspan, colspan属性的运用。现在刷新一下页面，可以看到如下表格：

 

评论

5 楼 qiaozi 2010-06-01  

google 浏览器数据出不来。。

4 楼 janrn 2010-05-31  

而且这样做组合表头，处理方式似乎并不太友好，不管是对开发员，还是对网页本身：

<table id="tt">
<thead>
<tr>
<th field="code" rowspan="2" width="80">产品编号</th>
<th field="name" rowspan="2" width="150">名称</th>
<th field="unit" rowspan="2" width="80">单位</th>
<th field="place" rowspan="2" width="100">产地</th>
<th colspan="2">利润</th>
</tr>
<tr>
<th field="cost1" width="80" align="right">毛利</th>
<th field="cost2" width="80" align="right">纯利</th>
</tr>
</thead>
</table>


我认为，应该用以下方式更好：

<table id="tt">
<thead>
<tr>
<th field="code" rowspan="2" width="80">产品编号</th>
<th field="name" rowspan="2" width="150">名称</th>
<th field="unit" rowspan="2" width="80">单位</th>
<th field="place" rowspan="2" width="100">产地</th>
<th colspan="2">利润
                            <子列 field="cost1" width="80" align="right">毛利</子列>
                            <子列 field="cost2" width="80" align="right">纯利</子列>
                        </th>
</tr>
</thead>
</table>
我认为这样做，第一，就算是在没有样式，以及低版本的IE上，以及W3C上，都比较好。
    第二，对HTML的表格来说，原来的HTML似乎并不符合某些规范。对于开发员来说，也似乎不好理解。如果前面有两列要合并，后面有两列要合并，是不是很不好控制和理解呢，如果多处有合并列，那又如何呢。

3 楼 janrn 2010-05-31  

感觉点击表头进行排序时，反应速度很慢

2 楼 ustcfxx 2009-12-17  

介绍得稍微简单了一些，希望有一个整体的介绍。

1 楼 andybrier3 2009-12-17  

不错 写的很清楚，期待下面的文档