// 我从后台动态生成的列,大家注意列的属性设置即可,以下是 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 }); }
实现的效果如下
相关推荐
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jqGrid 学习 原理 2 jqGrid 学习之 皮肤 2 jqGrid 学习 2 jQuery 学习之:jqGrid 表格插件 参数配置 4 jqGrid 学习 自定义搜索 14 jqGrid 学习 搜索工具栏 16 jqGrid 学习 搜索 17 jqGrid 学习 自定义格式化类型 19 ...
jqgrid
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
jqgrid中文文档API,使用JQGRID
jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically ...
JqGrid插件+JqGridDemo+JqGrid主题,自己项目里引入的文件
本篇文章主要是对jqGrid随窗口大小变化自适应大小的示例代码进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
JqGrid中文API文档,包含了基础的JqGrid控件的属性方法事件等,有如何使用JqGrid的Demo.
jqGrid in ASP.NET MVC 3 and Razor.zipjqGrid in ASP.NET MVC 3 and Razor.zipjqGrid in ASP.NET MVC 3 and Razor.zip
jquery.jqgrid
jqGrid 最新版 3.7.2 离线帮助手册,方便各位查看 Installing jqGrid Before you begin System Requirements Download jqGrid Change Log How to Install How it Works My First Grid Basic Grid Conventions ...
jqGrid5.5 学习
jQgrid+demo
jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0jqgrid4.0
jqGrid demo
jqGrid_API中文
jqgrid实现分组显示和统计的功能,jqgrid实现分组显示和统计
jqgrid 的帮助文档 jqGrid属性
jqGrid 中的锁定固定的列并且关于jqGrid 中的一些排序的实现细节