最近在做二维报表,要求报表的表头自定义。在网上找了好久二维报表的插件,一直找不到合适的。后来就用easyui 中的datagrid替代了一下。

根据实际需求,统计的信息可能不是一个模块中的字段信息,所以需要把模块和模块下的字段都显示出来,这就用到了表格中的合并单元格,但是在datagrid中如何实现呢? 如下:

  1. $('#text').datagrid({
  2. border : 2,
  3. nowrap : false,
  4. fit : true,
  5. url: '<%=request.getContextPath()%>/report/showreport.action',
  6. frozenColumns: [[
  7. { title: '区域名称', field: 'regionname', width: 80, sortable: true}
  8. ]],
  9. columns: [
  10. [{"title":"人员管理","colspan":3},
  11. {"title":"资料管理","colspan":3}],
  12. [{"field":"uname0","title":"姓名类似于李","rowspan":1},
  13. {"field":"config_gender1","title":"性别等于女","rowspan":1},
  14. {"field":"config_gender2","title":"性别等于男","rowspan":1},
  15. {"field":"config_datatype0","title":"资料类别等于视频资料","rowspan":1},
  16. {"field":"config_datatype1","title":"资料类别等于图片资料","rowspan":1},
  17. {"field":"config_datatype2","title":"资料类别等于文件资料","rowspan":1}]],
  18. rownumbers: true
  19. });

结果如下图:

说明:从代码中可以看到,表单数组中有两个数组(一般的表格都是有一个数组), 第一个数组就是表头中第一行,该数组对象中没有field属性,第二个数组就是表头第二行。返回的数据格式中字段以第二个数组中的field属性的值为key。格式如下:

  1. [{"regionname":" 区域 1","uname0":278,"config_gender1":1516,"config_gender2":2522,"config_datatype0":19,"config_datatype1":538,"config_datatype2":525}]
  2. 原文出自:http://blog.csdn.net/lishuangzhe7047/article/details/42743895

easyui datagrid 多表头设置的更多相关文章

  1. EasyUI DataGrid 多级表头设置

    使用EasyUI做一个报表统计,需要合并表头为多级表头,核心代码如下: $('#dg').datagrid({ url:'datagrid_data.action', fit : true, fitC ...

  2. EasyUI datagrid 查询、设置、提交 三

    查询 $(“#grid”).datagrid(“load”,{  a: $('#id').val(),b :$('#text').val() });   {} 里面可以 是序列化参数 $(“#grid ...

  3. 转载 -- jquery easyui datagrid 动态表头 + 嵌套对象属性展示

    代码功能: 1.datagrid 的表头由后台生成,可以配置在数据库 2.datagrid 的列绑定数据 支撑嵌套对象 $(function() { var columns = new Array() ...

  4. Easyui datagrid 去掉表头的checkbox复选框

    $(".datagrid-header-check").html(""); 在onLoadSuccess中加入此行代码即可实现datagrid去除表头的chec ...

  5. JQuery EasyUI datagrid 复杂表头处理

    下面是我项目中和网上收集的EasyUI的表头处理的,合适的拿去用吧. 例子1: $('#day_health').datagrid({                 url: "sqb_b ...

  6. EasyUI datagrid 复杂表头处理

    1:表头固定(前台写) 参照官方:http://www.jeasyui.net/demo/334.html 效果图: 源代码如下: <!DOCTYPE html> <html> ...

  7. JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)

    1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRow ...

  8. easyui datagrid将表头的checkbox不显示(隐藏)

    <script type="text/javascript"> $(function(){ $("#dg").datagrid({ url:&quo ...

  9. easyui datagrid sort 表头 排序

    datagrid的点击列表头刷新,分为两种,一种是页面刷新,不涉及后台服务器数据,不会从新查询数据库,只会刷新当前页数据: 一种是服务器级刷新,会重新加载全部数据. 如果不需要自定义排序,可以直接使用 ...

随机推荐

  1. java concurrent包的学习(转)

    java concurrent包的学习(转) http://my.oschina.net/adwangxiao/blog/110188 我们都知道,在JDK1.5之前,Java中要进行业务并发时,通常 ...

  2. DTCMS清除&emsp;&amp;

    DTcms.Common\Utils.cs #region 清除HTML标记 public static string DropHTML(string Htmlstring) 中的 Htmlstrin ...

  3. DTCMS自定义标签:获取所有栏目以及不显示指定栏目

    DTcms.Web.UI\Label\category.cs中 添加下面代码 /// <summary> /// 返回所有类别 /// </summary> /// <r ...

  4. 关于yum与源码安装的LAMP或LNMP网页直接显示空白页的问题?

    学习LAMP.LNMP时,遇到很奇怪的问题就是:搭建完LAMP或LNMP环境后安装PHPweb程序时,Discuz和Wordpress打不开安装向导,直接显示空白页(PHPWind9.0除外),没有任 ...

  5. 2016 Multi-University Training Contest 1 GCD RMQ+二分(预处理)

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5726 题意:有N(N <= 100,000),之后有Q(Q <= 100,000)个区间查询[ ...

  6. (转)Qt Model/View 学习笔记 (四)——创建新的Models

    创建新的Models 介绍 model/view组件之间功能的分离,允许创建model利用现成的views.这也可以使用标准的功能 图形用户接口组件像QListView,QTableView和QTre ...

  7. 使用 PIVOT 和 UNPIVOT

    http://msdn.microsoft.com/zh-cn/library/ms177410%28v=SQL.90%29.aspx 可以使用 PIVOT 和 UNPIVOT 关系运算符将表值表达式 ...

  8. SAX EntityResolver 的作用

    1.1 何为 EntityResolver : 官方解释: 如果SAX应用程序叙事实现自定义处理外部实体,则必须实现此接口, 并使用setEntityResolver方法向SAX 驱动器注册一个实例. ...

  9. Maven 解决JAR包冲突

    在JAR 冲突的情况下, 利用Eclipse方式解决JAR包冲突时比较方便简洁的,步骤如下 1. 在Eclipse 中打开pom.xml , 选择  “Dependency  Hierarchy” 2 ...

  10. PAT-乙级-1038. 统计同成绩学生(20)

    1038. 统计同成绩学生(20) 时间限制 250 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 本题要求读入N名学生的成绩,将 ...