EasyUI中的datagrid控件十分强大,能生成各种复杂的报表,现在因为项目需要,需要生成一个表头两行的表,找了一些说明文档,以下用一个实例来说明一下:

第一种方法:

 1 $('#divData').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":2},
11          {"title":"成绩","colspan":3}],
12         [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 });

第二种方法:

 1 $("#divValueTable").datagrid({
 2             url: '@Url.Action("DataList", "Report")',
 3             queryParams: {
 4                 "targetID": '1234',
 5                 "OrgID": orgid,
 6                 "FactTime": Year,
 7
 8             }, //请求数据时发送的参数
 9             autowidth: true,// 自动宽度
10             iconCls: 'icon-save',
11             striped: true,
12             height: 600,
13             nowrap: false,
14             singleSelect: true,
15             fitColumns: true,
16             rownumbers: true, //是否加行号
17             pagination: false, //是否显式分页
18             pageSize: 10,   //页容量,必须和pageList对应起来,否则会报错
19             pageNumber: 1, //默认显示第几页
20             pageList: [10, 20, 30],//分页中下拉选项的数值
21             frozenColumns: [],
22             columns: [[
23                 {
24                     title: "操作",field:"Operate",width:100,align:"center",rowspan:2,resizeable:false,formatter:function(value,row) {
25                         try {27                                 return "<a  href=\"javascript:void(0)\" οnclick='Edit(\"" + row.FactID + "\")'>编辑</a>";
29                         }
30                         catch (e)
31                         { }
32                     }
33                 },
34             {
35                 title: "季度", order: 2,  width: 150, align: "center",colspan:3
36
37             },
38             {
39                 title: "上报机构", order: 3, field: "OrgID", width: 150, align: "center", rowspan: 2, resizeable: false42             },
43             {
44                 title: "备注",order:5,field:"Remark",width:80,align:"center",rowspan:2,resizeable:false,formatter:function(value) {
45                     return (value == null ? "" : value).overflow(10);
46                 }
47             }
48             ],
49             [
50                 {
51                     title: "1月", order: 6, field: "SubmitID", width: 50, align: "center", resizeable: false
52                 },
53                 {
54                     title: "2月", order: 6, field: "SubmitID", width:50, align: "center", resizeable: false
55                 }
56                 , {
57                     title: "3月", order: 6, field: "SubmitID", width: 50, align: "center", resizeable: false
58                 }
59             ]
60
61             ]
62         });

这样设置,表头也是两行显示.

frozenColumns: []里边写入要锁定的列,这些列将被冻结,就像Excel中的锁定表头一样,锁定后该内容将不会随着滚动条的移动而变动位置.
fitColumns: true 该属性是设置列的宽度(个人经验,非官方说法:设置为false后,datagrid的宽度将会随着你设置的每列的宽度自定累加,如果加起来的数达到2048px,在页面中会自动显示水平滚动条,如果该值为true,datagrid的宽度将会随着页面的宽度而设置,如页面的宽度设置的是1000px,那么datagrid也会显示成1000,即使你设置的每列的宽度加起来达到了2048,datagrid的宽度也不会显示成2048,而是显示成1000.)

第二种方法的显示效果:

 

转载于:https://www.cnblogs.com/kdkler/p/4497437.html

EasyUI中datagrid控件的使用 设置多行表头(两行或多行)相关推荐

  1. WPF 中DataGrid控件显示和设置数据

    一.基础知识 1.DataGrid控件:用来显示数据的控件,从对象集合中获取信息并在具有行和单元格的网格中显示信息.每行和单独的对象相对应,并且每列和对象的某个属性相对应. 2.在DataGrid 中 ...

  2. WPF中DataGrid控件

    WPF中DataGrid控件的个别属性使用 //设置不可自动拉伸宽度dataGrid.CanUserResizeColumns = false;//第一列不可见dataGrid.HeadersVisi ...

  3. VB.net数据库编程中DataGrid控件的使用技巧

    VB.net数据库编程中DataGrid控件的使用技巧 如何用同一个DataGrid显示不同的数据表:如何用DataGrid显示主表/明细表的内容:如何用DataGrid分页显示或编辑数据表的记录.这 ...

  4. WPF中通过控件Margin属性设置控件位置

    WPF中通过控件Margin属性设置控件位置 一.Margin属性简介 二.Margin在cs文件中定义 三.Margin设置控件位置 四.参考文档 一.Margin属性简介 在使用WPF进行页面设计 ...

  5. C#中DataGrid控件的基本使用

    datagrid控件的作用简单点说就是将表格显示出来,用的多的是直接链接数据库文件,也可以自己见一个表格对象,链接到datagrid控件,下面是一个简单的例子 1 //xinjiabiao 2 Dat ...

  6. 有关WPF中DataGrid控件的基础应用总结

    基础说明 DataGrid是WPF提供的基础控件,它可以非常轻松的呈现出一张表格,本文章会按照从易到难的顺序依次将DataGrid的使用方法进行解说,除了MSDN上给出的最基本的例子之外,给出了三个比 ...

  7. easyui之datagrid控件分析

    /** * datagrid - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * * ...

  8. android的xml登录,Android----xml文件中的控件的id设置

    Android开放中要想得到布局文件中控件的引用,该控件必须设置id属性,这两有两种方式设置id:(1)@+id/xxxx;(2)@id/xxxx;下面做个简单的介绍.@+id/xxx:如果R文件中没 ...

  9. Silverlight 中datagrid控件-- 通过设置数据虚拟化加速显示

    定义依赖属性作为datagrid的数据源 protected static readonly DependencyProperty ViewLogsProperty = DependencyPrope ...

最新文章

  1. MySql中truncate,delete,drop的异同点
  2. Win11系统怎样设置更改密码
  3. Advanced techniques: creating sound, sequencing, timing, scheduling
  4. 阿里云落地全球最大云原生实践:双11核心系统全面云原生化
  5. 2021雪花飘新年倒计时源码
  6. ES测试数据,kibana命令
  7. [渝粤教育] 徐州工业职业技术学院 橡胶原材料 参考 资料
  8. 各个音阶的频率_c大调音阶各个音的频率(赫兹)是多少答得好给分
  9. php打印机,用PHP打印到打印机
  10. 移植vsftpd FTP服务器到ARM-Linux系统
  11. 新手程序员基础都掌握了,动手敲代码就一脸懵逼?教你解决办法!
  12. Mysql基础篇(10)—— MySQL8.0新特性概览
  13. 娃哈哈的困境,宗庆后的难题
  14. 心情感受(倍压抑 不想上课)
  15. 开酒馆前的注意事项 (下)
  16. java一个等号_java中等号的涵义
  17. 28335的启动步骤介绍
  18. bootstrap表单验证
  19. 全新iPhone发布会确定时间了!从Loog上可以看出有新配色
  20. MSA 2040 默认登录地址/用户名密码

热门文章

  1. 台式电脑蓝牙关了之后就开不了_有了这个小玩意儿,旧电脑也能用蓝牙
  2. 台式计算机的红外端口在哪,个人台式机里有蓝牙或者红外吗?
  3. 八代服务器芯片组,Intel八代酷睿全曝光:主板前所未有的混乱
  4. net12. 客户类——TcpClient
  5. [Rootkit] 驱动隐藏 - 断链
  6. 大数据应用之 --- clickhouse客户端连接 dbeaver和永洪对接
  7. 2018 最新注册码【激活码】、在线激活 pycharm 完整方法(亲测有效)
  8. 万人网络5218传媒美拍涨粉加粉丝直播平台粉丝增加
  9. Jetson Nano烧写程序后依然无法开机的问题解决
  10. MQTT libary之发布和订阅之开发秘籍