`
TreasureNow
  • 浏览: 20943 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

jqgrid thousand seperator,Col background and colspan setting

 
阅读更多
// 我从后台动态生成的列,大家注意列的属性设置即可,以下是 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
			});	
	   }

 

 实现的效果如下

 



 

 

  • 大小: 52.4 KB
分享到:
评论

相关推荐

    JqGrid插件+JqGridDemo+JqGrid主题

    JqGrid是一款强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、筛选、分页、编辑、添加、删除和保存等,极大地增强了网页中表格的交互性和数据管理...

    jqgrid中文文档API

    jQgrid中文文档API jQgrid是一个功能强大且流行的JavaScript插件,用于创建交互式表格。它基于jQuery库,提供了许多强大的功能,例如排序、过滤、编辑、分页等,使得开发者可以快速创建复杂的表格应用程序。本文将...

    jqGrid随窗口大小变化自适应大小的示例代码

    jqGrid是一款功能强大的jQuery插件,用于创建交互式的表格,具有数据分页、排序、过滤、编辑等多种功能。在现代网页开发中,响应式设计是不可或缺的,它使得页面能够根据用户设备的屏幕尺寸自动调整布局。对于jqGrid...

    JqGrid中文API文档

    JqGrid是一款强大的JavaScript数据网格组件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如分页、排序、过滤、编辑和格式化数据。本中文API文档将帮助开发者深入理解并有效利用JqGrid的...

    jqGrid4.8.2 jqgrid_demo40

    jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...

    jqGrid4.6完整包

    jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据。这个"jqGrid4.6完整包"包含了所有你需要的组件来构建功能丰富的、可编辑的表格。以下是关于 jqGrid 4.6 版本的一些关键知识点: 1. **jqGrid ...

    jqGrid中文文档.doc

    jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作表格化的数据。在开始使用 jqGrid 之前,需要具备基本的 JavaScript 和 jQuery 知识,因为 jqGrid 是构建在 jQuery 库之上的。jQuery 提供了简便的...

    jqGrid_api中文文档

    根据提供的文件信息,我们可以提取出关于jqGrid的知识点,具体如下: 1. jqGrid基础概念 jqGrid是一个用于Web应用程序的JavaScript表格插件,它遵循典型的B/S(浏览器/服务器)架构。在这种架构中,服务器端负责...

    jqGrid4.6.0 jqgrid_demo40

    jquery.jqGrid-4.6.0(jquery表格插件).zip----------jqGrid4.6.0包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件.rar-----------经我修改过的demo40,官网上面demo40下载...

    jqgrid API 3.6.5

    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 4.6和4.7版本

    jqGrid是一款功能强大的jQuery插件,专用于在Web页面上展示和操作表格数据。它以其高效、灵活和可定制性而受到开发者的广泛欢迎。在jqGrid 4.6和4.7这两个版本中,我们可以深入探讨一些核心知识点: 1. **数据网格...

    jqGrid5.X 官方全Demo下载

    jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、操作和展示数据表格。它提供了丰富的功能,如数据分页、排序、过滤、编辑和更多。本资源为 jqGrid5.X 的官方全Demo下载,包含中文文档和离线演示,用户可以在...

    jquery.jqgrid最新版

    《jQuery.jqGrid详解——打造高效数据管理界面》 jQuery.jqGrid是一款强大的JavaScript插件,主要用于构建数据密集型Web应用程序,特别是在展示和操作大量结构化数据时。它以其丰富的功能集、高度可定制性和易用性...

    关于jqGrid中查询功能

    在IT领域,jqGrid是一个非常流行的JavaScript库,用于创建数据密集型网格视图。它提供了丰富的功能,包括数据检索、排序、分页以及查询。在本篇中,我们将深入探讨jqGrid中的查询功能,特别是如何根据多个或单个条件...

    jQgrid demo

    在本"jQgrid demo"中,我们将深入探讨如何利用 jQGrid 实现交互式的数据展示和操作。 jQGrid 的核心特性包括: 1. **数据加载与显示**:jQGrid 支持从服务器或本地数据源动态加载数据,并以表格形式展示。它可以...

    jqGrid demo (完整版)

    jqGrid 是一个基于 jQuery 的数据网格插件,用于在网页上展示和操作大量结构化数据。这个"jqGrid demo (完整版)"提供了一个全面的示例,可以帮助开发者更好地理解和应用 jqGrid,无论是在 PHP 或 JSP 环境中。 1....

    jqGrid5.5 版本

    jqGrid是一款功能强大的JavaScript数据网格插件,专为Web应用程序设计,用于展示和操作大量结构化数据。在jqGrid5.5版本中,它提供了一系列的改进和新特性,使得数据管理和用户界面更加高效和易用。以下是关于jqGrid...

    jqgrid +bootstrap4.0 直接使用

    jqGrid 是一个强大的 jQuery 插件,用于在网页上展示和操作数据,它提供了丰富的功能,包括数据排序、筛选、分页和编辑等。Bootstrap 4.0 是一个流行的前端框架,用于构建响应式和移动优先的网站。将 jqGrid 与 ...

    jqGrid in ASP.NET MVC 3 and Razor.zip

    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

    jqgriddemo,样式漂亮,可以直接使用

    **jqGrid介绍** jqGrid是一款基于JavaScript的开源数据网格组件,它是jQuery库的一部分,用于创建交互式的、数据丰富的Web表格。jqGrid以其强大的数据管理能力、丰富的功能集和灵活的可定制性,深受开发者的喜爱。...

Global site tag (gtag.js) - Google Analytics