easyui rowspan

最新推荐文章于 2023-12-01 08:36:26 发布

转载最新推荐文章于 2023-12-01 08:36:26 发布 · 337 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lacey/p/7488830.html

文章标签：

#javascript #ViewUI

本文介绍了两种不同的表格布局方法，一种是使用JSON配置的方式定义表格结构，另一种是通过HTML标签实现多级表头的设计。这两种方法均适用于展示日期、部门、业务等数据，并支持数据的环比显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种写法

columns: [
[
{ field: 'depName', title: '部门', rowspan: 2, width: '100px', align: 'center' },
{ field: 'busName', title: '业务', rowspan: 2, width: '100px', align: 'center' },
{ field: 'vendorname', title: '运营商', rowspan: 2, width: '100px', align: 'center' },
{ field: '1', title: '<%=NowToday%>日当天发送量', colspan: 3, width: '100px', align: 'center' },
{ field: '1', title: '截止<%=NowToday%>日当天发送量', colspan: 3, width: '100px', align: 'center' }
],
[
{ field: 'LastTodaySend', title: '<%=LastMonth%>月', width: '100px', align: 'center' },
{ field: 'NowTodaySend', title: '<%=NowMonth%>月', width: '100px', align: 'center' },
{ field: 'ratio1', title: '环比', width: '100px', align: 'center', formatter: percentFoemat },
{ field: 'LastEndSend', title: '<%=LastMonth%>月', width: '100px', align: 'center' },
{ field: 'NowEndSend', title: '<%=NowMonth%>月', width: '100px', align: 'center' },
{ field: 'ratio2', title: '环比', width: '100px', align: 'center',formatter:percentFoemat}
]
]
});

第2种写法：

<%-- <table id="dg" class="easyui-datagrid" style="width:100%;height:auto;float:left" title="">
<thead>
<tr>
<th rowspan="2" field="depName" width="100px;" data-options="align:'center'">部门</th>
<th rowspan="2" field="busName" width="100px;" data-options="align:'center'">业务</th>
<th rowspan="2" field="vendorname" width="100px;" data-options="align:'center'">运营商</th>
<th colspan="3" field="1" data-options="align:'center'"><%=NowToday%>日当天发送量</th>
<th colspan="3" field="1" data-options="align:'center'">截止<%=NowToday%>日当天发送量</th>
</tr>
<tr>
<th field="LastTodaySend" width="100px;" data-options="align:'right'"><%=LastMonth%>月</th>
<th field="NowTodaySend" width="100px;" data-options="align:'right'"><%=NowMonth%>月</th>
<th field="ratio1" width="100px;" data-options="align:'right'" formatter="percentFoemat">环比</th>
<th field="LastEndSend" width="100px;" data-options="align:'right'"><%=LastMonth%>月</th>
<th field="NowEndSend" width="100px;" data-options="align:'right'"><%=NowMonth%>月</th>
<th field="ratio2" width="100px;" data-options="align:'right'" formatter="percentFoemat">环比</th>
</tr>
</thead>
</table>--%>