jgrid数据加载完成用input或者select框修饰

在jqgrid加载完以后直接出现input框可以通过gridComplete的事件进行修改grid。

主要思路是:

1、获取jqgrid的id数组(jqgrid是通过id获取一行的值的,如果在你的colModel没有id,就会出现显示问题,这点大家必须注意,每一个jqgrid都要有自己id。

2. 通过id数组的长度来循环grid

3.使用'getRowData'方法利用id获取该id行的数据

4.通过列名来获取该列的值比如recrod.id 是获取该记录的id值,json数据格式

5、拼接input串,并把原来的值赋给input的value值

6.在通过'setRowData'方法,把拼接后的input框传递给jqgird的列。

如果select或者textarea都可以使用如上步骤进行替换。

gridComplete:function(){
		        	var rowIds = $("#phaseTypeList").getDataIDs();
					for(var i=0;i<rowIds.length;i++){
						var record = $("#phaseTypeList").jqGrid('getRowData', rowIds[i]);
						var unitPrice = record.unitPrice;
						var varTemp = '<input name=\'unitPrice\' type=\'text\' class=\'number\' onblur=\'javascript:changePrice(this);\' recordId =\'' +rowIds[i]+ '\' value=\''+ unitPrice+'\'/>';
						jQuery("#phaseTypeList").jqGrid('setRowData', rowIds[i], {unitPrice:varTemp});
						
						var varTempid = '<input name=\'id\' type=\'text\' style=\'border:0px\'  readonly=\'readonly\' value=\''+ record.id+'\'/>';
						jQuery("#phaseTypeList").jqGrid('setRowData', rowIds[i], {id:varTempid});
						
						var varTemp1 ="<input id=\"submitTime\" name=\"submitTime\" type=\"text\" value=\""+record.submitTime+"\" onClick=\"WdatePicker({dateFmt:'yyyy-M-d',minDate:'%y-%M-%d'})\"/>";
						jQuery("#phaseTypeList").jqGrid('setRowData', rowIds[i], {submitTime:varTemp1});
						
						var needNum = record.needNum;
						var proceSheetValue=0;
						if((unitPrice!=null || unitPrice != undefined) && (needNum!=null || needNum != undefined)){
							proceSheetValue=parseFloat(needNum)*parseFloat(unitPrice);
							totalPrice=+proceSheetValue;
						}
						var varTempSum = '<input name=\'sum\' value=\''+proceSheetValue+'\' style=\'border:0px\'  readonly=\'readonly\' />';
						jQuery("#phaseTypeList").jqGrid('setRowData', rowIds[i], {sum:varTempSum});
						
						var varTemp2 = '<input name=\'priceSheet\'  class="btn06_2"/>';
						jQuery("#phaseTypeList").jqGrid('setRowData', rowIds[i], {priceSheet:varTemp2});
						}
						$("#priceTotal").val(totalPrice);
				}

效果图如下:

你可能感兴趣的:(jgrid数据加载完成用input或者select框修饰)