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属性的运用。现在刷新一下页面，可以看到如下表格：