EasyUI中datagrid控件的使⽤设置多⾏表头（两⾏或多⾏）
EasyUI中的datagrid控件⼗分强⼤，能⽣成各种复杂的报表，现在因为项⽬需要，需要⽣成⼀个表头两⾏的表，了⼀些说明⽂档，以下⽤⼀个实例来说明⼀下:
第⼀种⽅法:
1 $('#divData').datagrid({
2    border : 2,
3    nowrap : false,
4    fit : true,
5        url: '<%=ContextPath()%>/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) {
25try {
27return "<a  href=\"javascript:void(0)\" onclick='Edit(\"" + row.FactID + "\")'>编辑</a>";
29                        }
30catch (e)
31                        { }
32                    }
33                },
34            {
35                title: "季度", order: 2,  width: 150, align: "center",colspan:3
36
easyuidatagrid37            },
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) {
45return (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的宽度将会随着页⾯的宽度⽽设第⼆种⽅法的显⽰效果:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。