jqGrid 插件

/**
 * 封装表格插件条件：只需传入数据源与列表名、信息。
 * @param {Object}
 *            mydatalist：例如{url:'',data:postData,success:function(){}}
 * @return
 */
function dataGrid(options) {
	var width_table = $(".main_container_content").width() - 6;
	if (($(window).height() - 254) < 240) {
		height = ($(window).height() - 254);
	} else {
		height = 240;
	}
	$(".jqGrid div").remove();
	var gridId = options.id ? options.id : 'list';
	var pagerId = gridId + "_pager";
	$(".jqGrid").append("<table id='" + gridId + "'></table>");
	$(".jqGrid").append("<div id='" + pagerId + "'></div>");

	var isLoaded = false;
	var realOptions = {
		mtype : "POST",
		datatype : "json",
		height : height,// height: 'auto',
		width : width_table,
		pager : "#" + pagerId,
		
	   	pgbuttons: true,
	   	pginput:true,
	   	
		loadonce:true,
		prmNames:{rows:"rows",page:"page"},  
		toolbar : [ true, "top" ],
		multiselect : true,
		rowNum : 20,
		rowList : [  10, 20 ,50],
		rownumbers : true,
		jsonReader: {  
			root:"data",
			page: "page", 
			total: "total",  
			records: "record",
			repeatitems : false
		}
	};
	$.extend(realOptions, options);
	if(!realOptions['loadonce']){
		$.extend(realOptions, {
			prmNames:{rows:"rows", page:"page", sort: "sortName", order: "sortOrder"},
			viewrecords:true
		});
	}
	var searchStartTime = (new Date()).getTime();
	var searchEndTime = (new Date()).getTime();
	var events = {
		loadError: function(xhr,st,err){
			art.dialog.error(G_SYSTEM_ERROR);
		},
		loadBeforeSend:function(xhr){
			searchStartTime = (new Date()).getTime();
			if(options.loadBeforeSend){
				options.loadBeforeSend();
			}
		},	
		beforeProcessing:function(xhr){
			searchEndTime = (new Date()).getTime();
			if(options.beforeProcessing){
				options.beforeProcessing();
			}
		},
		loadComplete:function(){
			if(realOptions.pager){
				var searchTime = (searchEndTime - searchStartTime) / 1000;
				var renderTime = ((new Date()).getTime() - searchEndTime) / 1000;
				var pagerTextCtrl = $($('#' + pagerId).find(".ui-paging-info")[0]);
				pagerTextCtrl.html("查询时间 &nbsp;" + searchTime + "s&nbsp;&nbsp;加载时间&nbsp; " + renderTime + "s&nbsp;&nbsp;&nbsp;&nbsp;" + pagerTextCtrl.text());
			}
			if(options.loadComplete){
				options.loadComplete();
			}
		},
		gridComplete : function() {
			var ids = jQuery("#" + gridId).jqGrid('getDataIDs');
//			for ( var i = 0; i < ids.length; i++) {
				// 用来标识奇偶行，和鼠标经过的事件
				$("#" + gridId +" tr:odd").css({
					"background" : "#D4E9EE"
				});
				$("#" + gridId +" tr:even").css({
					"background" : "#F5FAFB"
				});
				$("#" + gridId +" tr").not(".ui-subgrid").hover(function() {
					$(this).children("td").addClass("ui-state-hover");
				}, function() {
					$(this).children("td").removeClass("ui-state-hover");
				});
//			}
			if(options.gridComplete){
				options.gridComplete();
			}
		}
	};
	/*
	 * subgrid
	 */
	if (realOptions['subGridOption']) {
		var subgOp = {
			subGrid : true,
			repeatitems : false,
			subGridRowExpanded : function(subGridId, rowId) {
				var subGridloadOp = {
					subGridId : subGridId,
					rowId : rowId,
					width : width_table - 70,
					height : realOptions.subGridOption.subHeight ? realOptions.subGridOption.subHeight : 200,
					url : realOptions.subGridOption.subUrl,
					colNames : realOptions.subGridOption.subColNames,
					colModel : realOptions.subGridOption.subColModel,
					subPager : realOptions.subGridOption.subPager
				};
				$.extend(subGridloadOp, realOptions.subGridOption);
				subGridload(subGridloadOp);
			},
			subGridRowColapsed: function(subGridId, rowId) {
				jQuery("#"+subGridId+"_table").remove();
			},
			subGridOptions : {
				plusicon : "ui-icon-plus",
				minusicon : "ui-icon-minus",
				openicon : "ui-icon-carat-1-sw",
				expandOnLoad : false,
				selectOnExpand : true,
				reloadOnExpand : true
			}
		};
		$.extend(subgOp, realOptions.subGridOption);
		$.extend(realOptions, subgOp);
		// 双击打开subgrid
		$.extend(events, {
			ondblClickRow:function (rowId){
				$("#" + gridId).jqGrid('toggleSubGridRow', rowId);
			}
		}); 
	}
	/*
	 * end
	 */
	$.extend(realOptions, events);
	return jQuery("#" + gridId).jqGrid(realOptions);
}

 

/**
 * 子表格
 */
function subGridload(options) {
	var subGridId = options.subGridId;
	var subgrid_table_id = options.subGridId + "_table";
	var subgrid_pager_id = options.subGridId + "_pager"  
	$("#" + subGridId).css({
		'padding':'2px'
	});
	$("#" + subGridId).height(options.height+30);
	$("#" + subGridId).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+subgrid_pager_id+"' class='scroll'></div>");
	var _subpagerId = null;
	var _rowNum = 9999;
	if (options.subPager) {
		$("#" + subGridId).height(options.height+61);	
		_subpagerId = options.subPager ? "#"+subgrid_pager_id : null;
		_rowNum = 10;
	}
	var realOptions = {
		mtype : "POST",
		datatype : "json",
		height : options.height,
		pager : _subpagerId,
		loadonce : false,
		toolbar : [ false, "top" ],
		multiselect : false,
		shrinkToFit:true,
		rowNum : _rowNum,
		rowList : [  10, 15 ,20],
		rownumbers : true,
		jsonReader : {
			root : "data",
			page : "page",
			total : "total",
			records : "record",
			repeatitems : false
		}
	};
	$.extend(realOptions, options);
	if(!realOptions['loadonce']){
		// 每次都从服务器加载时，分页参数
		$.extend(realOptions, {
			prmNames:{rows:"rows", page:"page", sort: "sortName", order: "sortOrder"},
			viewrecords:true
		});
	}
	var events = {
		gridComplete : function() {
//			$("#" + subgrid_table_id+" tr:odd").css( {
//				"background" : "#F0F0F0"
//			});
//			$("#" + subgrid_table_id+" tr:even").css( {
//				"background" : "#E0E0E0"
//			});
		},
		onSelectRow:function (a){
			$(this).css({"background" : "#F5FAFB"});
		}
	};
	$.extend(realOptions, events);
	return jQuery("#" + subgrid_table_id).jqGrid(realOptions);
}

 调用sample：

subGridOption : {
							subPager: false,
							shrinkToFit:false,
							subHeight : 200,
							subUrl:'detailSearch.action?invoiceDetailEntity.invoiceNoticeId=' + $('#invoiceNoticeId').val(),
							subColNames:['工厂代码', '工厂名称', '仓库代码',
											'仓库名称'],
							subColModel:[{name:'polineNo', index:'PO_LINE_NO', width:80, editable:true, align:"center"},
											{name:'factoryDesc', index:'FACTORY_DESC', width:80, editable:true, align:"center"},
											{name:'invLocCode', index:'INV_LOC_CODE', width:80, editable:true, align:"center"},
											{name:'invLocDesc', index:'INV_LOC_DESC', width:80, editable:true, align:"center"}]
					},