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)\" onclick='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.)
第二种方法的显示效果:
