jqgrid thousand seperator，Col background and colspan setting

最新推荐文章于 2024-04-30 19:40:07 发布

原创最新推荐文章于 2024-04-30 19:40:07 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #javascript #数据库 #ViewUI

java 同时被 2 个专栏收录

9 篇文章

订阅专栏

web

2 篇文章

订阅专栏

本文详细介绍了如何从后台动态生成列，并将其与网格数据集成的过程，包括使用AJAX获取数据、设置列属性和网格配置等关键步骤。

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

实现的效果如下