使用jqgrid，要實現(xiàn)在單元格中的動態(tài)下拉框，廢話不多說，上代碼：

var gridOption = $("#inLineItemEditList").jqGrid({url: path,mtype: "get", /* ajax提交方式 */postData:{opertype: this.globalParam.operType,entitydataid: this.globalParam.entityDataID,}, /* 提交參數(shù) */datatype: "json", /* 返回數(shù)據(jù)格式 */prmNames: /* 避免發(fā)送不必要的參數(shù)到服務(wù)端 */{page: null, /* 開始頁數(shù) */rows: null, /* 開始行數(shù) */search: null,nd: null,sort: null,order: null},jsonReader: mc.grid.ExtJsonReader,beforeProcessing: $.proxy(function (data, status, xhr) {if (data.success) {this.data = data.data;this.isLoaded = true;}}, this),rownumbers: true,cmTemplate:{sortable: false},cellEdit: true,cellsubmit: "clientArray",colNames: ["hotelid","住宿及伙食補助費","費用明細","人數(shù)","天數(shù)","金額(元)","核準金額(元)"],colModel : [ /* 列設(shè)置 */{name : "hotelid",label : "id",editable:false,hidden:true,key:true},{name : "hotelfare", align:"center", width : 80, editable: true, edittype:'select',formatter:'select',editoptions: {value: "0:住宿費;1:伙食補助"}},{name : "hotelfaredetail",align:"center",width:80,editable: false, edittype:'select',formatter:'select',editoptions: {value: "0:大區(qū)職;1:軍級;2:師級;3:其他人員;4:途中伙食補助;5:住勤伙食補助;6:誤餐補助;7:"}},{name : "persionnumber", width:80, align : "center", editable:true, edittype:'text',formatter: "number",formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:0}},{name : "days", width:80, align : "center", editable:true, edittype:'text',formatter: "number",formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:0}},{name: "normalmoney",width: 80,align : "center", editable:false, edittype:'text',formatter: "number",formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:2}},{name: 'hotelmoney', width: 80,align : "center", editable:false, edittype:'text',formatter: "number",formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:2}}],afterSaveCell : function (rowid, name, val, iRow, iCol) {//價款if (name == 'hotelfare') {//var hotelfare = jQuery("#inLineItemEditList").jqGrid('getCell', rowid, 'hotelfare');if (val == '0') {$("#inLineItemEditList").setColProp("hotelfaredetail", {editable: true});$("#inLineItemEditList").jqGrid('setRowData', rowid, {hotelfaredetail: 7});$('#inLineItemEditList').setColProp('hotelfaredetail', {editoptions: {value: "0:大區(qū)職;1:軍級;2:師級;3:其他人員"}});} else {$("#inLineItemEditList").setColProp("hotelfaredetail", {editable: true});$("#inLineItemEditList").jqGrid('setRowData', rowid, {hotelfaredetail: 7});$('#inLineItemEditList').setColProp('hotelfaredetail', {editoptions: {value: "4:途中伙食補助;5:住勤伙食補助;6:誤餐補助"}});}}//天數(shù)if (name == 'days') {var hotelfaredetail = jQuery("#inLineItemEditList").jqGrid('getCell', rowid, 'hotelfaredetail');var persionnumber = jQuery("#inLineItemEditList").jqGrid('getCell', rowid, 'persionnumber');if (hotelfaredetail != "") {if (persionnumber != 0.00) {switch (parseFloat(hotelfaredetail)) {case 0: {setNormalmoneyAndHotelmoney(allEnum.hotelType.DQZ,persionnumber,val,rowid);return;}case 1: {setNormalmoneyAndHotelmoney(allEnum.hotelType.JJ,persionnumber,val,rowid);return;}case 2:{setNormalmoneyAndHotelmoney(allEnum.hotelType.SJ,persionnumber,val,rowid);return;}case 3:{setNormalmoneyAndHotelmoney(allEnum.hotelType.QT,persionnumber,val,rowid);return;}case 4:{setNormalmoneyAndHotelmoney(allEnum.hotelType.TZHS,persionnumber,val,rowid);return;}case 5:{setNormalmoneyAndHotelmoney(allEnum.hotelType.ZQHS,persionnumber,val,rowid);return;}case 6:{setNormalmoneyAndHotelmoney(allEnum.hotelType.WCBZ,persionnumber,val,rowid);return;}}}}else {mc.msg("請先選擇費用明細");}}//人數(shù)if (name == 'persionnumber') {var hotelfaredetail = $("#inLineItemEditList").jqGrid('getCell', rowid, 'hotelfaredetail');var days = $("#inLineItemEditList").jqGrid('getCell', rowid, 'days');if(hotelfaredetail != "") {if (days != 0.00) {switch (parseFloat(hotelfaredetail)) {case 0: {setNormalmoneyAndHotelmoney(allEnum.hotelType.DQZ,days,val,rowid);return;}case 1: {setNormalmoneyAndHotelmoney(allEnum.hotelType.JJ,days,val,rowid);return;}case 2:{setNormalmoneyAndHotelmoney(allEnum.hotelType.SJ,days,val,rowid);return;}case 3:{setNormalmoneyAndHotelmoney(allEnum.hotelType.QT,days,val,rowid);return;}case 4:{setNormalmoneyAndHotelmoney(allEnum.hotelType.TZHS,days,val,rowid);return;}case 5:{setNormalmoneyAndHotelmoney(allEnum.hotelType.ZQHS,days,val,rowid);return;}case 6:{setNormalmoneyAndHotelmoney(allEnum.hotelType.WCBZ,days,val,rowid);return;}}}}else{mc.msg("請先選擇費用明細");}}},beforeEditCell : function (rowid, name, val, iRow, iCol) {if (name == 'hotelfaredetail') {var hotelfare = jQuery("#inLineItemEditList").jqGrid('getCell', rowid, 'hotelfare');if(hotelfare =="" || hotelfare == 'undefined'){mc.msg("請先選擇住宿及伙食補助費")}}}});$("#inLineItemEditList").jqGrid(gridOption);

效果如下：

$(’#inLineItemEditList’).setColProp(‘hotelfaredetail’, {editoptions: {value: “4:途中伙食補助;5:住勤伙食補助;6:誤餐補助”}});
這是主要實現(xiàn)動態(tài)下拉框的方法；

注：
這樣設(shè)置后頁面沒有問題，但是在通過getRowData()獲取值時會出現(xiàn)獲取不到值的問題，因此需要在調(diào)用getRowData()方法之前將所有的下拉框的值都加入進去如下：
$(’#inLineItemEditList’).setColProp(‘hotelfaredetail’, {editoptions: {value: “0:大區(qū)職;1:軍級;2:師級;3:其他人員;4:途中伙食補助;5:住勤伙食補助;6:誤餐補助;7:”}});

總結(jié)

以上是生活随笔為你收集整理的jqgrid的动态下拉框实现，并解决不能获取值的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。