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

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

第一种方法:

 $('#divData').datagrid({
     border : ,
     nowrap : false,
     fit : true,
         url: '<%=request.getContextPath()%>/report/showreport.action',
         frozenColumns: [[
                              { title: '区域名称', field: 'regionname', width: , sortable: true}
                          ]],
         columns: [
         [{"title":"学生","colspan":},
          {"title":"成绩","colspan":}],
         [          {"field":"config_gender1","title":"女生","rowspan":},
          {"field":"config_gender2","title":"男生","rowspan":},
          {"field":"config_datatype0","title":"语文","rowspan":},
          {"field":"config_datatype1","title":"数学","rowspan":},
          {"field":"config_datatype2","title":"英语","rowspan":}]],
         rownumbers: true
 });

第二种方法:

 $("#divValueTable").datagrid({
             url: '@Url.Action("DataList", "Report")',
             queryParams: {
                 "targetID": '1234',
                 "OrgID": orgid,
                 "FactTime": Year,

             }, //请求数据时发送的参数
             autowidth: true,// 自动宽度
             iconCls: 'icon-save',
             striped: true,
             height: 600,
             nowrap: false,
             singleSelect: true,
             fitColumns: true,
             rownumbers: true, //是否加行号
             pagination: false, //是否显式分页
             pageSize: 10,   //页容量，必须和pageList对应起来，否则会报错
             pageNumber: 1, //默认显示第几页
             pageList: [10, 20, 30],//分页中下拉选项的数值
             frozenColumns: [],
             columns: [[
                 {
                     title: "操作",field:"Operate",width:100,align:"center",rowspan:2,resizeable:false,formatter:function(value,row) {
                         try {
                                 return "<a  href=\"javascript:void(0)\" onclick='Edit(\"" + row.FactID + "\")'>编辑</a>";
                         }
                         catch (e)
                         { }
                     }
                 },
             {
                 title: "季度", order: 2,  width: 150, align: "center",colspan:3

             },
             {
                 title: "上报机构", order: 3, field: "OrgID", width: 150, align: "center", rowspan: 2, resizeable: false             },
             {
                 title: "备注",order:5,field:"Remark",width:80,align:"center",rowspan:2,resizeable:false,formatter:function(value) {
                     return (value == null ? "" : value).overflow(10);
                 }
             }
             ],
             [
                 {
                     title: "1月", order: 6, field: "SubmitID", width: 50, align: "center", resizeable: false
                 },
                 {
                     title: "2月", order: 6, field: "SubmitID", width:50, align: "center", resizeable: false
                 }
                 , {
                     title: "3月", order: 6, field: "SubmitID", width: 50, align: "center", resizeable: false
                 }
             ]

             ]
         });

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

frozenColumns: []里边写入要锁定的列,这些列将被冻结,就像Excel中的锁定表头一样,锁定后该内容将不会随着滚动条的移动而变动位置.

fitColumns: true 该属性是设置列的宽度(个人经验,非官方说法:设置为false后,datagrid的宽度将会随着你设置的每列的宽度自定累加,如果加起来的数达到2048px,在页面中会自动显示水平滚动条,如果该值为true,datagrid的宽度将会随着页面的宽度而设置,如页面的宽度设置的是1000px,那么datagrid也会显示成1000,即使你设置的每列的宽度加起来达到了2048,datagrid的宽度也不会显示成2048,而是显示成1000.)

第二种方法的显示效果: