// 我从后台动态生成的列,大家注意列的属性设置即可,以下是 action 代码 //----------以上添加了固定列;可变列要动态的从页面接收,或者从数据库中选取 List<String> companyList = materialStockedService.ListCompanies(); for (String company : companyList){ //合并的列名称 String spaned_quantity_name = "SUM_Quantity_" + company; String spaned_money_name = "SUM_TotalMoneyOTax_" + company; coln_list.add(common_col_left); coln_list.add(common_col_right); //合并的列(数量) colm_map = new HashMap<String, Object>(); colm_map.put("name", spaned_quantity_name); colm_map.put("index", spaned_quantity_name); colm_map.put("resizable", true); colm_map.put("width", 100); colm_map.put("sortable", false); colm_map.put("formatter", "number"); colm_map.put("formatoptions", "{thousandsSeparator: ','}"); colm_map.put("align", "right"); colm_list.add(colm_map); //合并的列(金额) colm_map = new HashMap<String, Object>(); colm_map.put("name", spaned_money_name); colm_map.put("index", spaned_money_name); colm_map.put("resizable", true); colm_map.put("width", 100); colm_map.put("sortable", false); colm_map.put("classes", "cvteste"); colm_map.put("formatter", "number"); colm_map.put("formatoptions", "{thousandsSeparator: ','}"); colm_map.put("align", "right"); colm_list.add(colm_map); //合并的数目,从那个字段开始合并 colspan_map = new HashMap<String, Object>(); colspan_map.put("startColumnName", spaned_quantity_name); colspan_map.put("numberOfColumns", 2); colspan_map.put("titleText", company); colspan_list.add(colspan_map); } jsonObj.put("ColN", coln_list); jsonObj.put("ColM", colm_list); jsonObj.put("groupHeaders", colspan_list); jsonObj.put("success", "success");
// 以下是 js 代码
$.ajax({ url: 'getCompanyGridCol.action', type: "POST", contentType: "application/json; charset=utf-8", data: {}, dataType: "json", success: function (data) { if (data.success == "success") { ColN = data.ColN;//jqgrid heading data ColM = data.ColM; // its column model GroupHeaders = data.groupHeaders; /*var array = new Array(); $.each(ColM, function(n, value){ if (value['name'] == "MaterialCategory"){ value['cellattr'] = arrtSetting; array.push(value); } else { array.push(value); } })*/ //ColM = array; //ColD = data.rows; // Data createGrid(); } }, error: function () { alert("Error with AJAX callback"); } }) resizeGrid(); }) function createGrid(){ $("#gridTable").jqGrid({ url: "ListCompanyGrid.action", datatype: "json", autowidth: true, shrinkToFit: false, height: $('body').height() - 110, width : 700, colNames: ColN, colModel: ColM, datatype: "json", hidegrid: false, jsonReader: { repeatitems: false }, // 允许多选 multiselect: false, // 显示序列号 sortable: false, pager:"#gridPaper", viewrecords: true, rowNum: 2000, loadComplete: function() { }, loadError: function(xhr,status,error){ alert(status + " loading data of " + $(this).attr("id") + " : " + error ); } }) ColSpan(GroupHeaders); jQuery("#gridTable").jqGrid('setFrozenColumns'); jQuery("#gridTable").triggerHandler("jqGridAfterGridComplete"); } function ColSpan(data){ jQuery("#gridTable").jqGrid('setGroupHeaders', { useColSpanStyle: true, groupHeaders: data }); }
实现的效果如下