在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\' οnblur=\'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);
}
效果图如下: