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',  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             auto 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",100,align:"center",rowspan:2,resizeable:false,formatter:function(value,row) {
25                         try {
27                                 return "<a  href="javascript:void(0)" onclick='Edit("" + row.FactID + "")'>编辑</a>";
29                         }
30                         catch (e)
31                         { }
32                     }
33                 },
34             {
35                 title: "季度", order: 2,   150, align: "center",colspan:3
36                 
37             },
38             {
39                 title: "上报机构", order: 3, field: "OrgID",  150, align: "center", rowspan: 2, resizeable: false42             },
43             {
44                 title: "备注",order:5,field:"Remark",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",  50, align: "center", resizeable: false
52                 },
53                 {
54                     title: "2月", order: 6, field: "SubmitID", 50, align: "center", resizeable: false
55                 }
56                 , {
57                     title: "3月", order: 6, field: "SubmitID",  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.)

第二种方法的显示效果:

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

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