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.)

第二种方法的显示效果:

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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