// 我从后台动态生成的列,大家注意列的属性设置即可,以下是 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 }); }
实现的效果如下
相关推荐
JqGrid是一款强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、筛选、分页、编辑、添加、删除和保存等,极大地增强了网页中表格的交互性和数据管理...
jQgrid中文文档API jQgrid是一个功能强大且流行的JavaScript插件,用于创建交互式表格。它基于jQuery库,提供了许多强大的功能,例如排序、过滤、编辑、分页等,使得开发者可以快速创建复杂的表格应用程序。本文将...
jqGrid是一款功能强大的jQuery插件,用于创建交互式的表格,具有数据分页、排序、过滤、编辑等多种功能。在现代网页开发中,响应式设计是不可或缺的,它使得页面能够根据用户设备的屏幕尺寸自动调整布局。对于jqGrid...
JqGrid是一款强大的JavaScript数据网格组件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如分页、排序、过滤、编辑和格式化数据。本中文API文档将帮助开发者深入理解并有效利用JqGrid的...
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...
jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据。这个"jqGrid4.6完整包"包含了所有你需要的组件来构建功能丰富的、可编辑的表格。以下是关于 jqGrid 4.6 版本的一些关键知识点: 1. **jqGrid ...
jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作表格化的数据。在开始使用 jqGrid 之前,需要具备基本的 JavaScript 和 jQuery 知识,因为 jqGrid 是构建在 jQuery 库之上的。jQuery 提供了简便的...
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是一款功能强大的jQuery插件,专用于在Web页面上展示和操作表格数据。它以其高效、灵活和可定制性而受到开发者的广泛欢迎。在jqGrid 4.6和4.7这两个版本中,我们可以深入探讨一些核心知识点: 1. **数据网格...
根据提供的文件信息,我们可以提取出关于jqGrid的知识点,具体如下: 1. jqGrid基础概念 jqGrid是一个用于Web应用程序的JavaScript表格插件,它遵循典型的B/S(浏览器/服务器)架构。在这种架构中,服务器端负责...
jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据表格。它提供了丰富的功能,如数据分页、排序、过滤、编辑和更多。本资源为 jqGrid5.X 的官方全Demo下载,包含中文文档和离线演示,用户可以在...
《jQuery.jqGrid详解——打造高效数据管理界面》 jQuery.jqGrid是一款强大的JavaScript插件,主要用于构建数据密集型Web应用程序,特别是在展示和操作大量结构化数据时。它以其丰富的功能集、高度可定制性和易用性...
在IT领域,jqGrid是一个非常流行的JavaScript库,用于创建数据密集型网格视图。它提供了丰富的功能,包括数据检索、排序、分页以及查询。在本篇中,我们将深入探讨jqGrid中的查询功能,特别是如何根据多个或单个条件...
在本"jQgrid demo"中,我们将深入探讨如何利用 jQGrid 实现交互式的数据展示和操作。 jQGrid 的核心特性包括: 1. **数据加载与显示**:jQGrid 支持从服务器或本地数据源动态加载数据,并以表格形式展示。它可以...
jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作大量结构化数据。这个"jqGrid demo (完整版)"提供了一个全面的示例,可以帮助开发者更好地理解和应用 jqGrid,无论是在 PHP 或 JSP 环境中。 1....
jqGrid是一款功能强大的JavaScript数据网格插件,专为Web应用程序设计,用于展示和操作大量结构化数据。在jqGrid5.5版本中,它提供了一系列的改进和新特性,使得数据管理和用户界面更加高效和易用。以下是关于jqGrid...
jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...
jqGrid 是一个强大的 jQuery 插件,用于在网页上展示和操作数据,它提供了丰富的功能,包括数据排序、筛选、分页和编辑等。Bootstrap 4.0 是一个流行的前端框架,用于构建响应式和移动优先的网站。将 jqGrid 与 ...
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
**jqGrid介绍** jqGrid是一款基于JavaScript的开源数据网格组件,它是jQuery库的一部分,用于创建交互式的、数据丰富的Web表格。jqGrid以其强大的数据管理能力、丰富的功能集和灵活的可定制性,深受开发者的喜爱。...