easyui的datagrid2行表头合并
时间: 2023-09-14 19:02:55 浏览: 580
DataGrid表头合并和单元格内容合并-升级版
3星 · 编辑精心推荐
要在EasyUI的DataGrid中实现2行表头合并,需要使用到DataGrid的列属性。可以通过设置列的rowspan和colspan属性来实现。
下面是一个示例:
```
<table id="datagrid">
<thead>
<tr>
<th rowspan="2">编号</th>
<th colspan="2">姓名</th>
<th rowspan="2">年龄</th>
<th colspan="2">地址</th>
</tr>
<tr>
<th>姓</th>
<th>名</th>
<th>省份</th>
<th>城市</th>
</tr>
</thead>
</table>
<script>
$('#datagrid').datagrid({
url: 'data.json',
columns: [[
{field:'id',title:'编号',width:100,rowspan:2},
{field:'firstName',title:'姓',width:100},
{field:'lastName',title:'名',width:100},
{field:'age',title:'年龄',width:100,rowspan:2},
{field:'province',title:'省份',width:100},
{field:'city',title:'城市',width:100}
]]
});
</script>
```
在上面的示例中,我们在表头的第一行设置了两个单元格(姓名和地址)的colspan属性为2,表示它们要占用两列单元格。在第二行中,我们设置了第一个单元格(编号)的rowspan属性为2,表示它要占用两行单元格。
通过这样的设置,就能够实现2行表头合并的效果了。
阅读全文