jqGrid 动态填充 Select 列表
jqGrid Dynamically Populate Select List
使用 jqGrid 4.13.3 - 免费 jqGrid
在添加表单中，我有一个静态输入元素和一个 select 列表元素。
我在 beforeInitData 中使用 dataEvents 将 keyup ajax 函数绑定到输入元素。
添加表单显示后，我在静态元素中键入一个值。
ajax 回调函数 returns 一个格式化为 select 列表的字符串。
我正在尝试使用此代码填充 select 列表，但它从未填充。
function faiLogDocumentItemListResults(wResults){
if(wResults.validItemList){
$("#ifailocloglist").setColProp('item', { editoptions: { value: wResults.itemSelectList}});
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
}
}
更新以添加完整代码：
$(document).ready(function(){
var cName = "";
var selID = "";
var temp = "";
var sourcevalue = "";
var addFormId = "";
var requestedchangelink = "";
$("#ifailocloglist").jqGrid({
url:'/QMSWebApp/FirstArticleLocationLogV8ControllerServlet?lifecycle=failogbodydataload',
editurl:'/QMSWebApp/FirstArticleLocationLogV8ControllerServlet?lifecycle=failogbodydataedit',
datatype: "json",
height: "auto",
colNames:['Badge#','Index#','PriorityIndex','Priority','Delete Request','Location','Document#','Due Date','Part#','Planner#','Airline','Log Data','Inspector','FAI Started','FAI Finished','Comments','Status','IFlag'],
colModel:[
{name:'badgeno', index:'badgeno', width:50, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:1, colpos:1,label:"Badge#:"}},
{name:'id', index:'id', width:100, hidden: false, editable: true, editoptions:{ disabled:'disabled'}, editrules:{edithidden:true}, formoptions:{rowpos:2, colpos:1,label:"Index#:"}},
{name:'priority', index:'priority', width:50, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:3, colpos:1,label:"Priority:"}, edittype: "select", editoptions: { size: 1}},
{name:'priorityicon', index:'priorityicon', width:50},
{name:'requesttodelete', index:'requesttodelete', width:50, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:4, colpos:1,label:"Delete Request:"}, edittype: "select", editoptions: { size: 1}},
{name:'location', index:'location', width:50, hidden: false, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:5, colpos:1,label:"Location:"}, edittype: "select", editoptions: { size: 1}},
{name:'documentNumber', index:'documentNumber', width:50, hidden: false, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:6, colpos:1,label:"Document#:", elmsuffix: " type in Document# and press 'Enter' key"}},
{name:'duedate', index:'duedate', width:50, hidden: false},
{name:'item', index:'item', width:100, hidden: false, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:8, colpos:1,label:"Item:"}, edittype: "select", editoptions: { size: 1}},
{name:'planner', index:'planner', width:50, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'airline', index:'airline', width:50, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'logdata', index:'logdata', width:75, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'inspector', index:'inspector', width:75, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'startdate', index:'startdate', width:100, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'finishdate', index:'finishdate', width:100, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'comment', index:'comment', width: 250, hidden: false, editable: true, editrules:{edithidden:true}, edittype:'textarea',editoptions:{rows:'3',cols:'50'}, formoptions:{rowpos:15, colpos:1,label:"Comments:"}},
{name:'faistatus', index:'faistatus', width:1, hidden: true, editable: false, editrules:{edithidden:false}},
{name:'initializedflag', index:'initializedflag', width:1, hidden: true, editable: false, editrules:{edithidden:false}},
],
onSelectRow: oSelect,
rowNum:5,
rowList:[5,10,15,20,25,30],
loadonce: true,
pager: '#ifailocloglistpager',
viewrecords: true,
gridview: true,
userdata: "userdata",
rowattr: colorrow,
loadComplete: lComplete,
reloadAfterSubmit: true,
caption:"First Article Location Log"
});
$("#ifailocloglist").jqGrid('navGrid','#ifailocloglistpager',
{edit:true,add:true,del:true,search:true,view:false,
beforeRefresh: function(){
$(this).jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
}},
{url:'/QMSWebApp/FirstArticleLocationLogV8ControllerServlet?lifecycle=failogbodydataedit',
recreateForm: true,
width: 700,
beforeShowForm: bsForm,
viewPagerButtons: false,
checkOnSubmit: true,
zIndex: 500200},
{recreateForm: true,
width: 700,
beforeShowForm: absForm,
beforeInitData: biAddForm,
afterShowForm: asForm,
afterComplete: afComp,
beforeSubmit: bsubForm,
afterSubmit: afSubmit,
zIndex: 500200},
{zIndex: 500200},
{zIndex: 500200},
{recreateForm: true,
width: 700,
viewPagerButtons: false
}
);
$("#ifailocloglist").setGridWidth(gridouterwidth);
function lComplete(data){
$('.faiLocationLog-error-msg').load("/QMSWebApp/GenericControllerServlet",
{lifecycle:"errorMessageDisplay"});
$('.faiLocationLog-error-msg span').text($("#ifailocloglist").getGridParam('userData').elapsedtime);
hideProgressDisplay();
};
function colorrow(rd){
switch(rd.faistatus){
case 1:
return {"class": "greenBGrow1"};
break;
case 2:
return {"class": "redBGrow1"};
break;
default:
if(rd.initializedflag){
return {"class": "yellowBGrow1"};
}
break;
}
};
function oSelect(id){
$("#ifailocloglist").setColProp('priority', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=failocationlogpriorityoptionslist'}});
$("#ifailocloglist").setColProp('requesttodelete', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=twowayoptionlist'}});
$("#ifailocloglist").setColProp('location', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=failocationlogoptionslist'}});
};
function bsForm(formId){
$('#tr_documentNumber',formId).hide();
$('#tr_badgeno',formId).hide();
$('#tr_duedate',formId).hide();
};
function absForm(formId){
$('#tr_priority',formId).hide();
$('#tr_id',formId).hide();
$('#tr_requesttodelete',formId).hide();
$('#tr_duedate',formId).hide();
$('#tr_item',formId).hide();
$('#tr_comment',formId).hide();
//$('#tr_badgeno',formId).addClass("badgeenter");
//$('#tr_documentNumber',formId).addClass("docenter");
$('#badgeno',formId).val($('#savebadgenov').val());
//$('.badgeenter').on("keyup", function(){
//if(event.keyCode=='13'){
//$('#documentNumber',formId).focus();
//}
//});
//$('.docenter').on("keyup", function(){
//if(event.keyCode=='13'){
//$("#sData").click();
//}
//});
};
function biAddForm(formId){
addFormId = formId;
$("#ifailocloglist").setColProp('location', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=failocationlogoptionslist'}, defaultValue: 0});
$("#ifailocloglist").setColProp('documentNumber', { editoptions: {dataEvents: [{ type: 'keyup', fn: function(e) {if(event.keyCode=='13'){getDocumentItemList(this.value); }}}]}});
};
function getDocumentItemList(wValue){
$.post("/QMSWebApp/FirstArticleLocationLogV8ControllerServlet",
{lifecycle:"faiLogDocumentItemList",
documentNumber:wValue}, faiLogDocumentItemListResults, 'json');
}
function faiLogDocumentItemListResults(wResults){
var cm = $('#ifailocloglist').jqGrid('getColProp','item');
if(wResults.validItemList){
cm.edittype = "select";
cm.editoptions = { size: 1};
setTimeout(function(){
$('#tr_item select').html(wResults.itemSelectList);
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
},500);
}
else{
cm.edittype = "text";
cm.editoptions = { size: 20};
setTimeout(function(){
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
},500);
}
}
function asForm(formId){
//if($('#badgeno').val() != ""){
//$('#documentNumber',formId).focus();
//}
//else{
//$('#badgeno',formId).focus();
//}
};
function bsubForm(postdata, formid){
$('#savebadgenov').val($('#badgeno').val());
$('#savelocv').val($('#location').val());
if($('#badgeno').val() == ""){
return [false,"ATTENTION - Record was not saved. Badge# field is blank."];
}
else if($('#location').val() == ""){
return [false,"ATTENTION - Record was not saved. Location field is blank."];
}
else if($('#documentNumber').val() == 0){
return [false,"ATTENTION - Record was not saved. MO/PO field is blank."];
}
else{
return [true,"Ok"];
}
};
function afComp(response,postdata,formID){
$('#badgeno',formID).val($('#savebadgenov').val());
$('#location',formID).val($('#savelocv').val());
$('#documentNumber',formID).focus();
}
function afSubmit(response, postdata) {
var res = $.parseJSON(response.responseText);
if(res){
if(res.errorCode == "BadgeFailure"){
return [false,"Your badge number could not be validated."];
}
else if(res.errorCode == "DocFailure"){
return [false,"Document# could not be validated."];
}
else{
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true,"Ok"];
}
}
else{
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true,"Ok"];
}
//return [true];
}
$('.ifaiappenddialog').click(function(){
});
$('.failocationlogPrint').on("click", function(){
$.post("/QMSWebApp/FirstArticleLocationLogV8ControllerServlet",
{lifecycle:"printfialocationlogqueue"}, exportDisplayResults, 'json');
});
这行不通。 edittype 的更改在下次打开添加表单时发生。不仅需要更改 edittype，还需要将输入字段从文本物理更改为 select，反之亦然。下面的代码对我有效。希望你能明白我的意思
function faiLogDocumentItemListResults(wResults){
var cm = $('#ifailocloglist').jqGrid('getColProp','item');
if(wResults.validItemList){
//create a clone from another select
var test = $("#location").clone();
test.attr({id:"dummy",size:1}).html("");
// initialize the new remove the old and place the new
$("#item").after(test).remove();
test.attr("id","item");
cm.edittype = "select";
cm.editoptions = { size: 1};
setTimeout(function(){
$('#tr_item select').html(wResults.itemSelectList);
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
},500);
}
else{
// see the comments above
var test = $("#documentNumber").clone();
test.attr({id:"dummy",size:20}).val("");
$("#item").after(test).remove();
test.attr("id","item");
// now change it in colModel
cm.edittype = "text";
cm.editoptions = { size: 20};
setTimeout(function(){
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
},500);
}
}
希望对您有所帮助。
使用 jqGrid 4.13.3 - 免费 jqGrid
在添加表单中，我有一个静态输入元素和一个 select 列表元素。 我在 beforeInitData 中使用 dataEvents 将 keyup ajax 函数绑定到输入元素。 添加表单显示后，我在静态元素中键入一个值。 ajax 回调函数 returns 一个格式化为 select 列表的字符串。
我正在尝试使用此代码填充 select 列表，但它从未填充。
function faiLogDocumentItemListResults(wResults){
if(wResults.validItemList){
$("#ifailocloglist").setColProp('item', { editoptions: { value: wResults.itemSelectList}});
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
}
}
更新以添加完整代码：
$(document).ready(function(){
var cName = "";
var selID = "";
var temp = "";
var sourcevalue = "";
var addFormId = "";
var requestedchangelink = "";
$("#ifailocloglist").jqGrid({
url:'/QMSWebApp/FirstArticleLocationLogV8ControllerServlet?lifecycle=failogbodydataload',
editurl:'/QMSWebApp/FirstArticleLocationLogV8ControllerServlet?lifecycle=failogbodydataedit',
datatype: "json",
height: "auto",
colNames:['Badge#','Index#','PriorityIndex','Priority','Delete Request','Location','Document#','Due Date','Part#','Planner#','Airline','Log Data','Inspector','FAI Started','FAI Finished','Comments','Status','IFlag'],
colModel:[
{name:'badgeno', index:'badgeno', width:50, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:1, colpos:1,label:"Badge#:"}},
{name:'id', index:'id', width:100, hidden: false, editable: true, editoptions:{ disabled:'disabled'}, editrules:{edithidden:true}, formoptions:{rowpos:2, colpos:1,label:"Index#:"}},
{name:'priority', index:'priority', width:50, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:3, colpos:1,label:"Priority:"}, edittype: "select", editoptions: { size: 1}},
{name:'priorityicon', index:'priorityicon', width:50},
{name:'requesttodelete', index:'requesttodelete', width:50, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:4, colpos:1,label:"Delete Request:"}, edittype: "select", editoptions: { size: 1}},
{name:'location', index:'location', width:50, hidden: false, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:5, colpos:1,label:"Location:"}, edittype: "select", editoptions: { size: 1}},
{name:'documentNumber', index:'documentNumber', width:50, hidden: false, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:6, colpos:1,label:"Document#:", elmsuffix: " type in Document# and press 'Enter' key"}},
{name:'duedate', index:'duedate', width:50, hidden: false},
{name:'item', index:'item', width:100, hidden: false, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:8, colpos:1,label:"Item:"}, edittype: "select", editoptions: { size: 1}},
{name:'planner', index:'planner', width:50, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'airline', index:'airline', width:50, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'logdata', index:'logdata', width:75, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'inspector', index:'inspector', width:75, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'startdate', index:'startdate', width:100, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'finishdate', index:'finishdate', width:100, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'comment', index:'comment', width: 250, hidden: false, editable: true, editrules:{edithidden:true}, edittype:'textarea',editoptions:{rows:'3',cols:'50'}, formoptions:{rowpos:15, colpos:1,label:"Comments:"}},
{name:'faistatus', index:'faistatus', width:1, hidden: true, editable: false, editrules:{edithidden:false}},
{name:'initializedflag', index:'initializedflag', width:1, hidden: true, editable: false, editrules:{edithidden:false}},
],
onSelectRow: oSelect,
rowNum:5,
rowList:[5,10,15,20,25,30],
loadonce: true,
pager: '#ifailocloglistpager',
viewrecords: true,
gridview: true,
userdata: "userdata",
rowattr: colorrow,
loadComplete: lComplete,
reloadAfterSubmit: true,
caption:"First Article Location Log"
});
$("#ifailocloglist").jqGrid('navGrid','#ifailocloglistpager',
{edit:true,add:true,del:true,search:true,view:false,
beforeRefresh: function(){
$(this).jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
}},
{url:'/QMSWebApp/FirstArticleLocationLogV8ControllerServlet?lifecycle=failogbodydataedit',
recreateForm: true,
width: 700,
beforeShowForm: bsForm,
viewPagerButtons: false,
checkOnSubmit: true,
zIndex: 500200},
{recreateForm: true,
width: 700,
beforeShowForm: absForm,
beforeInitData: biAddForm,
afterShowForm: asForm,
afterComplete: afComp,
beforeSubmit: bsubForm,
afterSubmit: afSubmit,
zIndex: 500200},
{zIndex: 500200},
{zIndex: 500200},
{recreateForm: true,
width: 700,
viewPagerButtons: false
}
);
$("#ifailocloglist").setGridWidth(gridouterwidth);
function lComplete(data){
$('.faiLocationLog-error-msg').load("/QMSWebApp/GenericControllerServlet",
{lifecycle:"errorMessageDisplay"});
$('.faiLocationLog-error-msg span').text($("#ifailocloglist").getGridParam('userData').elapsedtime);
hideProgressDisplay();
};
function colorrow(rd){
switch(rd.faistatus){
case 1:
return {"class": "greenBGrow1"};
break;
case 2:
return {"class": "redBGrow1"};
break;
default:
if(rd.initializedflag){
return {"class": "yellowBGrow1"};
}
break;
}
};
function oSelect(id){
$("#ifailocloglist").setColProp('priority', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=failocationlogpriorityoptionslist'}});
$("#ifailocloglist").setColProp('requesttodelete', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=twowayoptionlist'}});
$("#ifailocloglist").setColProp('location', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=failocationlogoptionslist'}});
};
function bsForm(formId){
$('#tr_documentNumber',formId).hide();
$('#tr_badgeno',formId).hide();
$('#tr_duedate',formId).hide();
};
function absForm(formId){
$('#tr_priority',formId).hide();
$('#tr_id',formId).hide();
$('#tr_requesttodelete',formId).hide();
$('#tr_duedate',formId).hide();
$('#tr_item',formId).hide();
$('#tr_comment',formId).hide();
//$('#tr_badgeno',formId).addClass("badgeenter");
//$('#tr_documentNumber',formId).addClass("docenter");
$('#badgeno',formId).val($('#savebadgenov').val());
//$('.badgeenter').on("keyup", function(){
//if(event.keyCode=='13'){
//$('#documentNumber',formId).focus();
//}
//});
//$('.docenter').on("keyup", function(){
//if(event.keyCode=='13'){
//$("#sData").click();
//}
//});
};
function biAddForm(formId){
addFormId = formId;
$("#ifailocloglist").setColProp('location', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=failocationlogoptionslist'}, defaultValue: 0});
$("#ifailocloglist").setColProp('documentNumber', { editoptions: {dataEvents: [{ type: 'keyup', fn: function(e) {if(event.keyCode=='13'){getDocumentItemList(this.value); }}}]}});
};
function getDocumentItemList(wValue){
$.post("/QMSWebApp/FirstArticleLocationLogV8ControllerServlet",
{lifecycle:"faiLogDocumentItemList",
documentNumber:wValue}, faiLogDocumentItemListResults, 'json');
}
function faiLogDocumentItemListResults(wResults){
var cm = $('#ifailocloglist').jqGrid('getColProp','item');
if(wResults.validItemList){
cm.edittype = "select";
cm.editoptions = { size: 1};
setTimeout(function(){
$('#tr_item select').html(wResults.itemSelectList);
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
},500);
}
else{
cm.edittype = "text";
cm.editoptions = { size: 20};
setTimeout(function(){
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
},500);
}
}
function asForm(formId){
//if($('#badgeno').val() != ""){
//$('#documentNumber',formId).focus();
//}
//else{
//$('#badgeno',formId).focus();
//}
};
function bsubForm(postdata, formid){
$('#savebadgenov').val($('#badgeno').val());
$('#savelocv').val($('#location').val());
if($('#badgeno').val() == ""){
return [false,"ATTENTION - Record was not saved. Badge# field is blank."];
}
else if($('#location').val() == ""){
return [false,"ATTENTION - Record was not saved. Location field is blank."];
}
else if($('#documentNumber').val() == 0){
return [false,"ATTENTION - Record was not saved. MO/PO field is blank."];
}
else{
return [true,"Ok"];
}
};
function afComp(response,postdata,formID){
$('#badgeno',formID).val($('#savebadgenov').val());
$('#location',formID).val($('#savelocv').val());
$('#documentNumber',formID).focus();
}
function afSubmit(response, postdata) {
var res = $.parseJSON(response.responseText);
if(res){
if(res.errorCode == "BadgeFailure"){
return [false,"Your badge number could not be validated."];
}
else if(res.errorCode == "DocFailure"){
return [false,"Document# could not be validated."];
}
else{
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true,"Ok"];
}
}
else{
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true,"Ok"];
}
//return [true];
}
$('.ifaiappenddialog').click(function(){
});
$('.failocationlogPrint').on("click", function(){
$.post("/QMSWebApp/FirstArticleLocationLogV8ControllerServlet",
{lifecycle:"printfialocationlogqueue"}, exportDisplayResults, 'json');
});
这行不通。 edittype 的更改在下次打开添加表单时发生。不仅需要更改 edittype，还需要将输入字段从文本物理更改为 select，反之亦然。下面的代码对我有效。希望你能明白我的意思
function faiLogDocumentItemListResults(wResults){
var cm = $('#ifailocloglist').jqGrid('getColProp','item');
if(wResults.validItemList){
//create a clone from another select
var test = $("#location").clone();
test.attr({id:"dummy",size:1}).html("");
// initialize the new remove the old and place the new
$("#item").after(test).remove();
test.attr("id","item");
cm.edittype = "select";
cm.editoptions = { size: 1};
setTimeout(function(){
$('#tr_item select').html(wResults.itemSelectList);
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
},500);
}
else{
// see the comments above
var test = $("#documentNumber").clone();
test.attr({id:"dummy",size:20}).val("");
$("#item").after(test).remove();
test.attr("id","item");
// now change it in colModel
cm.edittype = "text";
cm.editoptions = { size: 20};
setTimeout(function(){
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
},500);
}
}
希望对您有所帮助。