使用jqgrid,要实现在单元格中的动态下拉框,废话不多说,上代码:
var gridOption = $("#inLineItemEditList").jqGrid({
url: path,
mtype: "get", /* ajax提交方式 */
postData:
{
opertype: this.globalParam.operType,
entitydataid: this.globalParam.entityDataID,
}, /* 提交参数 */
datatype: "json", /* 返回数据格式 */
prmNames: /* 避免发送不必要的参数到服务端 */
{
page: null, /* 开始页数 */
rows: null, /* 开始行数 */
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","住宿及伙食补助费","费用明细","人数","天数","金额(元)","核准金额(元)"],
colModel : [ /* 列设置 */
{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:大区职;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:大区职;1:军级;2:师级;3:其他人员"}});
} else {
$("#inLineItemEditList").setColProp("hotelfaredetail", {editable: true});
$("#inLineItemEditList").jqGrid('setRowData', rowid, {hotelfaredetail: 7});
$('#inLineItemEditList').setColProp('hotelfaredetail', {editoptions: {value: "4:途中伙食补助;5:住勤伙食补助;6:误餐补助"}});
}
}
//天数
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("请先选择费用明细");
}
}
//人数
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:误餐补助”}});
这是主要实现动态下拉框的方法;
注:
这样设置后页面没有问题,但是在通过getRowData()获取值时会出现获取不到值的问题,因此需要在调用getRowData()方法之前将所有的下拉框的值都加入进去如下:
$(’#inLineItemEditList’).setColProp(‘hotelfaredetail’, {editoptions: {value: “0:大区职;1:军级;2:师级;3:其他人员;4:途中伙食补助;5:住勤伙食补助;6:误餐补助;7:”}});