最近在做二维报表,要求报表的表头自定义。在网上找了好久二维报表的插件,一直找不到合适的。后来就用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. Spring PecClinic宠物医院---安装

    1.下载源代码 如果本地安装了Git工具,可以直接使用命令 git clone https://github.com/spring-projects/spring-petclinic.git 如果没有 ...

  2. Windows 8.1 (64bit) 下搭建 MongoDB 2.4.9 环境

    一.下载MongoDB 2.4.9版 进入MongoDB官方网站的下载页面. 找到Windows 64-bit版的下载链接进行下载. 二.安装MongoDB 2.4.9版 将下载的文件解压到任意目录. ...

  3. 详解AngularJS中的filter过滤器用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...

  4. PHP定时执行任务/Cron Job

    对于PHP本身并没有一套解决方案来执行定时任务,不过是借助sleep函数完成的.这种方就是要提前做一些配置,如实现过程: ignore_user_abort();//关掉浏览器,PHP脚本也可以继续执 ...

  5. 就谈个py 的装饰器 decorator

    很早很早就知道有这么个 装饰器的东西,叫的非常神秘. 包括c#  和 java 中都有这个东西, c#中叫做attribut 特性,java中叫做Annotation 注解,在偷偷学习c#教程的时候, ...

  6. ios播放声音中断后台音乐的问题

      今天遇到一个ios播放声音中断后台音乐的问题,在我的app中如果调用AVAudioSession 播放完声音,后台的qq音乐偶尔不能恢复,而网易云音乐一次都不能恢复播放,研究了一下AVAudioS ...

  7. Unity3d + UGUI 的多分辨率适配

    原文地址:http://blog.csdn.net/dingkun520wy/article/details/49471789 1.Canvas的属性配置 2.Canvas Scaler的属性配置 3 ...

  8. 怎样修改Windows7环境变量

    在使用电脑的时候要运行某些特定的应用程序时需要修改系统的环境变量,例如安装JAVA时我们就需要配置系统的环境变量.那什么是环境变量呢?环境变量一般是指在操作系统中用来指定操作系统运行环境的一些参数,比 ...

  9. XCODE7新变化之-test

    Xcode 7新鲜出炉,一大早下载下来就安装上了,急急地体验一把.这几天公司给的任务是单元测试,那我们一起来用新版本做一次测试吧. 除了官方发布的下载链接地址,分享本人的xcode 7下载地址,大家不 ...

  10. 1059: [ZJOI2007]矩阵游戏 - BZOJ

    Description 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏——矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两 ...