easyUI----纵向合并单元格
使用Easyui-DataGrid过程用。做统计/报表等时经常会使用到合并单元格,原生态Easyui-DataGrid没有合并单元格的属性或方法。
解决方案: 代码一 onLoadSuccess: function (data) { //data是默认的表格加载数据,包括rows和Total if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 mergeCellsByField("mygrid", "opt,buyprojectCode,buyprojectName,projectIndustryType,tenderName,agencyName,informationServiceFee,informationServiceState,fieldFee,fieldState"); } }
代码二 /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id * 参数 colList 要合并的列,用逗号分隔(例如:"name,department,office");
function mergeCellsByField(tableID, colList) {
var ColArray = colList.split(",");
var tTable = $("#" + tableID);
var TableRowCnts = tTable.datagrid("getRows").length;
var tmpA;
var tmpB;
var PerTxt = "";
var CurTxt = "";
var buyprocode = "";
var newbuyprocode = "";
var alertStr = "";
for (j = ColArray.length - 1; j >= 0; j--) {
PerTxt = "";
buyprocode = "";
tmpA = 1;
tmpB = 0; for (i = 0; i <= TableRowCnts; i++) {
if (i == TableRowCnts) {
CurTxt = "";
newbuyprocode = "";
}
else {
CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];
newbuyprocode = tTable.datagrid("getRows")[i]["buyprojectCode"];
}
if (PerTxt == CurTxt && buyprocode == newbuyprocode) {
tmpA += 1;
}
else {
tmpB += tmpA; tTable.datagrid("mergeCells", {
index: i - tmpA,
field: ColArray[j], //合并字段
rowspan: tmpA,
colspan: null
});
tTable.datagrid("mergeCells", { //根据ColArray[j]进行合并
index: i - tmpA,
field: "Ideparture",
rowspan: tmpA,
colspan: null
}); tmpA = 1;
}
PerTxt = CurTxt;
buyprocode = newbuyprocode;
}
}
}
在jQuery("#mygrid").datagrid的onLoadSuccess中调用mergeCellsByField 添加mergeCellsByField方法 注:如果不需要按照某个字段合并,由系统自动合并请移除代码二中buyprocode、newbuyprocode相关代码即可
转自 https://blog.csdn.net/qq_33578833/article/details/78812035
easyUI----纵向合并单元格的更多相关文章
- dev GridControl直接打印 纵向合并单元格
GridControl纵向合并单元格 只需设置 gridView->OptionView->AllowCellMerge=true; 效果 提示: 精确到列 前提是gridview1已经允 ...
- RDLC报表纵向合并单元格。
在做RDLC报表时发现居然没有纵向合并单元格,震惊! 网上查了一些资料,有些方法很可爱,采用去除边框法,但是用这种方法如果要求文本属性居中的话那则达不到美观效果,还有些复杂一点的方法,我都没耐心看,然 ...
- JS实现EasyUI ,Datagrid,合并单元格功能
为了实现datagrid的合并单元格效果,datagrid的数据加载方式肯定是要写在JS文件内部的. 一:在JS内部添加Datagrid数据加载方法如下: $("#id").dat ...
- easyui datagrid 合并单元格
整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获 ...
- 【Javascript】Javascript横向/纵向合并单元格TD
> 需求是这样滴(>_<) 在报表系统中,涉及“HTML的TD单元格的合并”恐怕为数不少. 比如,从DB查得数据并经过后台的整理后,可能是这样的: Table1 JOB TO ...
- dev gridcontrol纵向合并单元格设置
1.要设置gridcontrol中指定列(columns中选中指定列)的AllowMerge属性为true; 2.要设置gridview中AllowCellMerge的属性为true; 3.如果只合并 ...
- easyui表格,单元格合并
easyui的合并单元格比较麻烦,官网提供一下方法 $('#tt').datagrid({ onLoadSuccess:function(){ var merges = [{ index:2, row ...
- 让我头疼一下午的Excel合并单元格
Excel导出常见问题 excel导出其实不算什么难事 在网上copy下模板代码,填充自己的业务数据,提供一个http接口基本就可以得到你要导出的数据了. 但是,凡事都有例外,截止今天,excel导出 ...
- easyui 自动动态合并单元格
.......onLoadSuccess : function(data) { if (data.rows.length > 0) { //调用mergeCellsByField()合并单元格 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 合并单元格
jQuery EasyUI 数据网格 - 合并单元格 数据网格(datagrid)经常需要合并一些单元格.本教程将向您展示如何在数据网格(datagrid)中合并单元格. 为了合并数据网格(datag ...
随机推荐
- page next page prev
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- T4模板调用反射
<#@ template debug="false" hostspecific="true" language="C#" #> ...
- MongoDB YAML格式的配置文件
根据官网的提示内容,默认的配置文件内容为 systemLog: verbosity: 0 quiet: false # traceAllExceptions: <boolean> sysl ...
- Javascript事件触发顺序
html标签是有子和父的,这个时候就出现了事件触发顺序的问题,比如: <!DOCTYPE html> <html> <head> <style> .fi ...
- java 调用javascript
首先我们在D盘的根目录下有一个js文件 名叫 common.js 假设里面有一个这样的方法 /** * @param int * _number 你想要的最大值 * @param ...
- centos7 守护进程
ASP.NET Core应用程序发布linux在shell中运行是正常的.可一但shell关闭网站也就关闭了,所以要配置守护进程, 用的是Supervisor,本文主要记录配置的过程和过程遇到的问题 ...
- 用FileZilla服务器端和客户端实现本机与虚拟机之间文件上传和下载
1. FileZilla简介 2.准备工作3.安装 FileZilla Server和配置3.1.问题及解决方法3.2.添加目录3.3.测试FIP4.安装FileZilla Client5.连接服务器 ...
- Django 标签过滤器
django内置标签 autoescape 控制当前的自动转义行为.这个标记可以作为参数打开或关闭,它决定自动转义是否在块内有效.块使用endautoescape结束标记关闭. 当自动转义生效时,所有 ...
- 一文解锁BILIBILI、ACFUN等弹幕网站是如何审核视频
欢迎访问网易云社区,了解更多网易技术产品运营经验. 人工审核对于A站和B站都是很重要的. AcFun稿件审核通行标准(V1.1) 表明,要审核的东西非常多,除了内容本身的合规性.调性,还有画质音质.撞 ...
- 【Apache系列】linux下Apache的常用操作
1. 启动/停止 1.1假设你的apahce安装目录为/usr/local/apache2,这些方法适合任何情况 apahce启动命令: /usr/local/apache2/bin/apachect ...