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.)
第二種方法的顯示效果:
