使用EasyUI做一个报表统计,需要合并表头为多级表头,核心代码如下:

$('#dg').datagrid({
url:'datagrid_data.action',
fit : true,
fitColumns : false,
columns:
[
[
{"title":"网格员考核测评表","colspan":9}
],
[
{"field":"ORGNAME","title":"网格","rowspan":3,width:"80"},
{"field":"USERZH","title":"网格员","rowspan":3,width:"80"},
{"title":"工作纪律","rowspan":2},
{"title":"民主互评","rowspan":2},
{"title":"志愿者","rowspan":2},
{"title":"加分项","colspan":2},
{"title":"总分","rowspan":2},
{"title":"平均分","rowspan":2}
],
[
{"title":"信息上报","rowspan":1},
{"title":"简报采纳","rowspan":1}
],
[
{"field":"YW1","title":"5分","rowspan":1},
{"field":"YW2","title":"5分","rowspan":1},
{"field":"YW3","title":"6分","rowspan":1},
{"field":"YW4","title":"8分","rowspan":1},
{"field":"YW5","title":"5分","rowspan":1},
{"field":"TOTAL","title":"","rowspan":1},
{"field":"AVG","title":"","rowspan":1}
]
]
});

以上代码和图中可以看出表头共有4行9列, 画单元格就和HTML中一样,主要利用 rowspancolspan 属性

在将要显示内容的列上添加 field 属性

EasyUI DataGrid 多级表头设置的更多相关文章

  1. easyui datagrid 多表头设置

    最近在做二维报表,要求报表的表头自定义.在网上找了好久二维报表的插件,一直找不到合适的.后来就用easyui 中的datagrid替代了一下. 根据实际需求,统计的信息可能不是一个模块中的字段信息,所 ...

  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. 快速把web项目部署到weblogic上

    转自:http://weijie.blog.51cto.com/340746/90420/ weblogic简介         BEA WebLogic是用于开发.集成.部署和管理大型分布式Web应 ...

  2. 解决ARC的循环引用问题

    看看下面的程序有什么问题: BNRItem.h @interface BNRItem : NSObject @property (nonatomic, strong) BNRItem *contain ...

  3. [服务器安全]升级OpenSSH,OpenSSL,vsftp,关闭NTP服务

    公司的旧版直播服务器使用的是CentOS 6.7,很多软件包都是几年前的了.最近很多安全相关的新闻充斥着IT圈,先是Intel芯片有重大安全漏洞,后面MacOS爆安全漏洞.所以,对于安全问题还真不能小 ...

  4. ES6 for...of循环

    1.for of const arr = ['red', 'green', 'blue']; for(let v of arr) { console.log(v); // red green blue ...

  5. CXF 调用方式——动态创建客户端(调用稳定版本号为2.7.18)

    今天用动态创建客户端的方式调用webservice,报了这样一个错: 2017-01-05 20:51:46,029 DEBUG main org.apache.cxf.common.logging. ...

  6. Drupal的system_list()函数解析

    system_list()函数的目的是根据传入的资源类型,返回一个数组列表: function system_list($type) { ... ... } 参数$type支持下面三种类型: boot ...

  7. MongoDB 操作手冊CRUD 删除 remove

    删除记录 概述 在MongoDB中,db.collection.remove()方法用于删除集合中的记录.能够删除全部记录,删除全部符合条件的记录.或者是仅删除一条记录. 删除全部记录 删除一个集合中 ...

  8. kettle--组件(3)--行转列

    组件图如下: 以上操作可以这么理解: IF(DATA1=DATA4) THEN DATA2=DATA3 也就是关键字值的数值会与关键字段的数值匹配,匹配上了就显示数据value filedname所填 ...

  9. java基础讲解12-----Swing

    package com.swing; import java.awt.*; import javax.swing.*; public class Swing01  extends JFrame{ /* ...

  10. (转)ASP.NET MVC:Razor 引入命名空间

    页面中引用 c# @using MvcApplication83.Models @using MvcApplication83.Common 行尾不需要加分号,加上也无妨(不过得全加上). VB.Ne ...