最近在做二维报表,要求报表的表头自定义。在网上找了好久二维报表的插件,一直找不到合适的。后来就用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. WinForms 实现气泡提示窗口

    [实例说明] 气泡提示因为他的美观又好被大多数用户所接收,用户所喜爱的就是程序员要实现的. 本实例实现了任务栏气泡提示,运行本实例,效果图如下所示: 单击提示.气泡提示就会显示,单击“关闭”气泡又会消 ...

  2. Android学习1

    Activity学习(1) 只有一个Activity 进行Toast通知 Toast是一种短小的提醒,显示一段时间就会消失,试验学习,可以通过一个Button来实现. Button reg=(Butt ...

  3. php 批量替换html标签的实例代码

    php批量替换html标签的实例代码分享.   1.把html元素全部去掉,或者保留某几个html标签 <?php $text = '<p>Test paragraph.</p ...

  4. iphone开发第一个UI应用程序QQ

    #import <UIKit/UIKit.h> @interface HViewController : UIViewController @property (retain, nonat ...

  5. 关于Segmentation fault (core dumped)几个简单问题的整理

    有的程序可以通过编译,但在运行时会出现Segment fault(段错误).这通常都是指针错误引起的.但这不像编译错误一样会提示到文件一行,而是没有任何信息.一种办法是用gdb的step, 一步一步寻 ...

  6. 内核升级修复nfs

    Not starting NFS kernel daemon: no support in current kernel. sudo gedit /etc/init.d/nfs-kernel-serv ...

  7. AJAX 基础知识

    1.AJAX 是一种用于创建快速动态网页的技术.而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不 ...

  8. PHP微信开发代码

    1,SAE上申请服务器 2,绑定测试账号 3,Token验证 <?php /* http://www.cnblogs.com/xrhou12326/ CopyRight 2014 All Rig ...

  9. Mysql 备份恢复之 Mysqldump 工具

    目前正在学习中,看到mysqldump工具导出的数据都是文本形式的,如果是blob或text大对象类型导出的是什么格式的?这个需要后续研究.下面只先总结下简单的. 一.备份1.备份Mysql一个数据库 ...

  10. (转载)Unity3d摄像机Camera参数详解

    1. Clear Flags:清除标记.决定屏幕的哪部分将被清除.一般用户使用对台摄像机来描绘不同游戏对象的情况,有3中模式选择: Skybox:天空盒.默认模式.在屏幕中的空白部分将显示当前摄像机的 ...