EasyUI中datagrid控件的使用 设置多行表头(两行或多行)
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控件的使用 设置多行表头(两行或多行)相关推荐
- WPF 中DataGrid控件显示和设置数据
一.基础知识 1.DataGrid控件:用来显示数据的控件,从对象集合中获取信息并在具有行和单元格的网格中显示信息.每行和单独的对象相对应,并且每列和对象的某个属性相对应. 2.在DataGrid 中 ...
- WPF中DataGrid控件
WPF中DataGrid控件的个别属性使用 //设置不可自动拉伸宽度dataGrid.CanUserResizeColumns = false;//第一列不可见dataGrid.HeadersVisi ...
- VB.net数据库编程中DataGrid控件的使用技巧
VB.net数据库编程中DataGrid控件的使用技巧 如何用同一个DataGrid显示不同的数据表:如何用DataGrid显示主表/明细表的内容:如何用DataGrid分页显示或编辑数据表的记录.这 ...
- WPF中通过控件Margin属性设置控件位置
WPF中通过控件Margin属性设置控件位置 一.Margin属性简介 二.Margin在cs文件中定义 三.Margin设置控件位置 四.参考文档 一.Margin属性简介 在使用WPF进行页面设计 ...
- C#中DataGrid控件的基本使用
datagrid控件的作用简单点说就是将表格显示出来,用的多的是直接链接数据库文件,也可以自己见一个表格对象,链接到datagrid控件,下面是一个简单的例子 1 //xinjiabiao 2 Dat ...
- 有关WPF中DataGrid控件的基础应用总结
基础说明 DataGrid是WPF提供的基础控件,它可以非常轻松的呈现出一张表格,本文章会按照从易到难的顺序依次将DataGrid的使用方法进行解说,除了MSDN上给出的最基本的例子之外,给出了三个比 ...
- easyui之datagrid控件分析
/** * datagrid - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * * ...
- android的xml登录,Android----xml文件中的控件的id设置
Android开放中要想得到布局文件中控件的引用,该控件必须设置id属性,这两有两种方式设置id:(1)@+id/xxxx;(2)@id/xxxx;下面做个简单的介绍.@+id/xxx:如果R文件中没 ...
- Silverlight 中datagrid控件-- 通过设置数据虚拟化加速显示
定义依赖属性作为datagrid的数据源 protected static readonly DependencyProperty ViewLogsProperty = DependencyPrope ...
最新文章
- MySql中truncate,delete,drop的异同点
- Win11系统怎样设置更改密码
- Advanced techniques: creating sound, sequencing, timing, scheduling
- 阿里云落地全球最大云原生实践:双11核心系统全面云原生化
- 2021雪花飘新年倒计时源码
- ES测试数据,kibana命令
- [渝粤教育] 徐州工业职业技术学院 橡胶原材料 参考 资料
- 各个音阶的频率_c大调音阶各个音的频率(赫兹)是多少答得好给分
- php打印机,用PHP打印到打印机
- 移植vsftpd FTP服务器到ARM-Linux系统
- 新手程序员基础都掌握了,动手敲代码就一脸懵逼?教你解决办法!
- Mysql基础篇(10)—— MySQL8.0新特性概览
- 娃哈哈的困境,宗庆后的难题
- 心情感受(倍压抑 不想上课)
- 开酒馆前的注意事项 (下)
- java一个等号_java中等号的涵义
- 28335的启动步骤介绍
- bootstrap表单验证
- 全新iPhone发布会确定时间了!从Loog上可以看出有新配色
- MSA 2040 默认登录地址/用户名密码
热门文章
- 台式电脑蓝牙关了之后就开不了_有了这个小玩意儿,旧电脑也能用蓝牙
- 台式计算机的红外端口在哪,个人台式机里有蓝牙或者红外吗?
- 八代服务器芯片组,Intel八代酷睿全曝光:主板前所未有的混乱
- net12. 客户类——TcpClient
- [Rootkit] 驱动隐藏 - 断链
- 大数据应用之 --- clickhouse客户端连接 dbeaver和永洪对接
- 2018 最新注册码【激活码】、在线激活 pycharm 完整方法(亲测有效)
- 万人网络5218传媒美拍涨粉加粉丝直播平台粉丝增加
- Jetson Nano烧写程序后依然无法开机的问题解决
- MQTT libary之发布和订阅之开发秘籍