JQuery EasyUI DataGrid动态合并单元格
/**
* EasyUI DataGrid根据字段动态合并单元格
* @param fldList 要合并table的id
* @param fldList 要合并的列,用逗号分隔(例如:"name,department,office");
*/
function MergeCells(tableID, fldList) {
var Arr = fldList.split(",");
var dg = $('#' + tableID);
var fldName;
var RowCount = dg.datagrid("getRows").length;
var span;
var PerValue = "";
var CurValue = "";
var length = Arr.length - 1;
for (i = length; i >= 0; i--) {
fldName = Arr[i];
PerValue = "";
span = 1;
for (row = 0; row <= RowCount; row++) {
if (row == RowCount) {
CurValue = "";
}
else {
CurValue = dg.datagrid("getRows")[row][fldName];
}
if (PerValue == CurValue) {
span += 1;
}
else {
var index = row - span;
dg.datagrid('mergeCells', {
index: index,
field: fldName,
rowspan: span,
colspan: null
});
span = 1;
PerValue = CurValue;
}
}
}
}
<table id="DataGrid" class="easyui-datagrid" fit="true" border="false" toolbar="#TBar" pagination="true" data-options="autoRowHeight:false,pageSize:50,pageList: [10, 20, 30, 40, 50,100,5000],idField:'zhbid',sortName:'zhbbh', queryParams: { 'action': 'query'} ,onLoadSuccess:function(data){ MergeCells('DataGrid','mkmch,zhbmch');},onDblClickRow: onClickRow" rownumbers="true" singleSelect="true" url="../Source/Data/zhbdata.ashx?mxbs=MON"> <thead> <tr> <th field="zhbid" hidden="true" sortable="true" width="100" rowspan="2">指标ID</th> <th field="zhbbs" hidden="true" sortable="true" width="100" rowspan="2">指标ID</th> <th field="mxid" hidden="true" sortable="true" width="100" rowspan="2">模块ID</th> <th field="dwid" hidden="true" sortable="true" width="100" rowspan="2">单位ID</th> <th field="rq" hidden="true" sortable="true" width="100" rowspan="2">日期</th>
<th field="mkmch" sortable="true" width="80" data-options="headalign:'center',align:'center'" rowspan="2">板 块</th> <th field="zhbmch" sortable="true" width="150" data-options="headalign:'center'" rowspan="2">指标名称</th> <th field="dw" sortable="true" width="80" data-options="headalign:'center'" rowspan="2">指标单位</th> <th field="shn_ljzh" sortable="true" width="80" data-options="headalign:'center',editor:{type:'numberbox',options:{precision:3}}" rowspan="2">上一年度<br />同期累计<br />完成值</th> <th field="bn_jh" sortable="true" width="80" data-options="headalign:'center'" rowspan="2">已下达年<br />计划</th> <th colspan="4">指标完成情况</th> <th field="mxmch" sortable="true" width="250" data-options="headalign:'center'" rowspan="2">基础数据</th> <th field="mxzh" sortable="true" width="80" data-options="headalign:'center',editor:{type:'numberbox',options:{precision:3}}" rowspan="2">基础数据<br />(本期)</th> <th field="beizhu" sortable="true" width="350" data-options="headalign:'center'" rowspan="2">备 注</th> </tr> <tr> <th field="bq_zh" sortable="true" width="90" data-options="headalign:'center'">本期完成值</th> <th field="bn_ljzh" sortable="true" width="90" data-options="headalign:'center'">累计完成值</th> <th field="bn_ljtb" sortable="true" width="80" data-options="headalign:'center'">同 比</th> <th field="bn_tb" sortable="true" width="80" data-options="headalign:'center'">与计划比</th> </tr> </thead> </table>
JQuery EasyUI DataGrid动态合并单元格的更多相关文章
- 雷林鹏分享:jQuery EasyUI 数据网格 - 合并单元格
jQuery EasyUI 数据网格 - 合并单元格 数据网格(datagrid)经常需要合并一些单元格.本教程将向您展示如何在数据网格(datagrid)中合并单元格. 为了合并数据网格(datag ...
- JQuery EasyUI DataGrid动态合并(标题)单元) 一
JS: /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如:&q ...
- easyui 自动动态合并单元格
.......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 ...
- EasyUI-DataGrid动态合并单元格
js /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如:&qu ...
- react antd Table动态合并单元格
示例数据 原始数组 const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park' ...
- easyui DataGrid表体单元格跨列rowspan
最近做项目用到了jquery easyui,其中一组DataGrid做的报表是给客户大领导看的,客户要求报表样式跟他们原有系统的一模一样(如下图1). DataGrid样式好调,只是城市名称单元格跨行 ...
- EasyUI——DataGrid的自定义单元格点击事件
1.当点击的单元格需要传递参数,并且传递的是row的值时,需要进行转义 function initCompareTable(){ $("#deviceCompareTable"). ...
- 转载 -- jquery easyui datagrid 动态表头 + 嵌套对象属性展示
代码功能: 1.datagrid 的表头由后台生成,可以配置在数据库 2.datagrid 的列绑定数据 支撑嵌套对象 $(function() { var columns = new Array() ...
- jquery easyui datagrid 动态 加载列
实现方式: 首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid.从而实现类似or ...
随机推荐
- [NOI2010][bzoj2005] 能量采集 [欧拉函数+分块前缀和优化]
题面: 传送门 思路: 稍微转化一下,可以发现,每个植物到原点连线上植物的数量,等于gcd(x,y)-1,其中xy是植物的横纵坐标 那么我们实际上就是要求2*sigma(gcd(x,y))-n*m了 ...
- python网络
try: import urllib.request as urllib2 except ImportError: import urllib2 response = urllib2.urlopen( ...
- css 两列自适应布局的4种思路
前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...
- 关于在生命周期当中进行setState操作的问题
当需要监听组件的属性改变的时候有两个生命周期componentWillReceiveProps和componentWillUpdate 当使用componentWillUpdate的时候可以获取到将要 ...
- 远程映射错误 “发生系统错误 1312 指定的登录会话不存在。可能已被终止 IIS 访问 远程共享目录”
最近和其他公司做接口,需要将数据上传给对方. 我们发送程序部署在前置机上,文件在内网数据中.需要映射到文件服务器后上传数据.本机vs开发是可以映射成功,但是部署到远程的IIS中,就不能成功. 报错: ...
- live-server 快速搭建静态服务
作为切图仔呢,平时都是在修改页面样式.展示后台返回的数据.调试js效果,这时候呢就需要搭一个服务器以便我们调试.平时我一般用的都是wamp,在www目录下新建项目然后开始撸代码,不过有时候呢不太方便, ...
- SPOJ HIGH Highways
In some countries building highways takes a lot of time... Maybe that's because there are many possi ...
- TCP/IP和HTTP协议与Socket的区别联系
参考资料: http://www.cnblogs.com/goodcandle/archive/2005/12/10/socket.html http://www.2cto.com/net/20121 ...
- (4)ASP.NET内置对象1
一.Response 把数据从服务端发送到客户端 Response.Write() 在页面上输出数据 Response.WriteFile(@"F:\WriteFile.txt") ...
- Vue中this.$router.push参数获取
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来 ...