easyui rowspan

第一种写法

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

效果图:

时间: 2024-11-13 09:58:29

easyui rowspan的相关文章

JQuery EasyUI IE浏览器出现‘Rowspan’ 为空或不是对象

环境: EasyUI 1.4.2. 现象: 在使用JQuery EasyUI 的datagrid控件时,使用动态指定columns的方式,相关代码如下: $("#topApList").datagrid({columns:[[ {field:'aaa',title: 'aaa',align: 'center',width: 130}, {field:'bbb',title: 'bbb',align: 'center',width: 100}, ]] }); 在IE8浏览器中打开该页面时

EasyUI合并行

扩展一下 EasyUI   下面湿扩展EasyUI 合并行的方法 $.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(function () { var target = $(this); if (!fields) { fields = target.datagrid("getColumnFields"); } var rows = target.datagri

jquery easyui datagrid 分页 详解

前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-datagrid分页 有一个附加的分页控件,只需后台获取分页控件自动提交的两个参数rows(每页显示的记录数)和page(当前第几页)然后读取相应页数的记录,和总记录数total一块返回即可. 1.界面 2.前端代码 <table id="dg" title="文章管理"

初识 easyui datagrid

首先应该下载好easyui datagrid所用的各种js 和css 这个可以到官网上去下载. 首先要引入datagrid所引入的js和css. <script src="js/jquery.min.js"></script><script src="js/jquery.easyui.min.js"></script><link rel="stylesheet" type="text

easyui datagrid行合并

easyui datagrid行合并 合并方法 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * 参数 colList 要合并的列,用逗号分隔(例如:"name,department,office"); */ function mergeCellsByField(tableID, colList) { var ColArray = colList.split(","); var tTable =

JQuery easyUI DataGrid 创建复杂列表头(译)

» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the following example shows: View Demo In this example, we use flat data to populate the DataGrid data, and group the listprice,unitcost,addr1,status columns unde

easyui datagrid属性和方法

本文可以当做api来使用 使用方法(Usage Example) 从现有的表单元素创建数据表格,定义在html中的行,列和数据. <table class="easyui-datagrid"> <thead> <tr> <th data-options="field:'code'">Code</th> <th data-options="field:'name'">Name&

easyui datagrid 合并单元格

整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获取计算ID var CountID = getUrlParam("CountID"); $.ajax({ type: "POST", url: "../Ashx/GetGasInventoryListInfo.ashx?type=getParamReport&

easyui 自动动态合并单元格

.......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 mergeCellsByField("grid","supply_fullname,in_supply,in_no,in_sales"); } } function mergeCellsByField(tableID, colList) { //alert(tableI