Есть множество ответов на этот вопрос или ситуации, похожие на этот вопрос, но, к сожалению, все они кажутся довольно старыми, и jqGrid недавно прошел капитальный ремонт до версии 4.x. Кроме того, существует так много разных способов редактирования и добавления, что кажется, что нет двух одинаковых ситуаций. Итак, я должен повторно опубликовать этот вопрос с моим конкретным кодом и попросить конкретный ответ.
По сути, у меня есть три почти идентичных сетки, которые я хочу редактировать INLINE и использовать autocomplete для одного поля, которое будет заполнять два других поля на основе метода select.
** Исходный код**
var mmGrid = $('#orderMMGrid'),
editingRowId,
myEditParam = {
keys: false,
oneditfunc: function(id) {
editingRowId = id;
// have tried autocomplete here as well //
},
afterrestorefunc: function(id) {
editingRowId = undefined;
},
extraparam: {
ml_id: ml_id
}
},
myAddParam = {
rowID: 'new',
position:'last',
extraparam: {
ml_id: ml_id
}
};
mmGrid.jqGrid({
url: '/json/json.getMinorMaterialsOrder.php?ml_id=' + ml_id,
datatype:'json',
colNames: ['ID','Type','Supp','Vendor','PO#','MasTec Part#','Description','Ship Date','Qty Ord','Rcvd Date','Qty Rec','Material Manager Notes','Receiving Clerk Notes'],
colModel: [
{ name:'id',
index:'id',
hidden:true,
key:false,
search:false,
viewable:false
},
{ name:'type',
index:'type',
width:40,
sortable:false,
editable:false,
align:'center',
editoptions:{defaultValue:'M'}
},
{ name:'supp',
index:'supp',
width:40,
sortable:false,
editable:false,
align:'center',
editoptions:{defaultValue:suppno}
},
{ name:'vendor_id',
index:'o.vendor_id',
width:75,
sortable:true,
sorttype:'text',
align:'left',
editable:true,
classes:'ui-ellipsis',
edittype:'select',
editoptions:{dataUrl:'/jqg/jqg.selVendors.php'},
editrules:{required:true}
},
{ name:'order_number',
index:'order_number',
width:55,
sortable:false,
editable:true,
classes:'ui-ellipsis',
align:'center'
},
{ name:'mastec_partno',
index:'mastec_partno',
width:120,
sortable:false,
editable:true,
classes:'ui-ellipsis',
edittype:'text',
editoptions:{size:22},
editrules:{required:true},
searchoptions: {
dataInit: function(e) {
$(e).autocomplete({
source: allMinorMaterials,
minLength: 2,
select: function(e,ui) {
e.val(ui.item.id);
$('input[name="description"]').text(ui.item.description);
$('input[name="vendor_id"]').val(ui.item.vendor_id);
return false;
}
});
}
}
},
{ name:'description',
index:'description',
width:180,
sortable:false,
align:'left',
editable:true,
classes:'ui-ellipsis',
edittype:'text',
editoptions:{size:33},
editrules:{required:true}
},
{ name:'ship_date',
index:'o.ship_date',
width:85,
sortable:true,
sorttype:'date',
editable:true,
align:'center',
editrules:{required:true},
editoptions:{ size:15,
dataInit: function(l) {
$(l).datepicker({dateFormat:'yy-mm-dd'});
}
}
},
{ name:'qty_ordered',
index:'qty_ordered',
width:55,
sortable:false,
editable:true,
align:'center',
classes:'qtyOrd',
editrules:{required:true},
editoptions:{size:6}
},
{ name:'rcvd_date',
index:'o.rcvd_date',
width:85,
sortable:true,
sorttype:'date',
editable:true,
align:'center',
editoptions:{ size:15,
dataInit:function(l) {
$(l).datepicker({dateFormat:'yy-mm-dd'});
}
}
},
{ name:'qty_received',
index:'qty_received',
width:55,
sortable:false,
editable:true,
align:'center',
classes:'qtyRec',
editoptions:{size:6}
},
{ name:'mm_notes',
index:'mm_notes',
width:250,
sortable:false,
editable:true,
edittype:'textarea',
classes:'ui-ellipsis',
editoptions:{rows:'3',cols:'45'}
},
{ name:'rc_notes',
index:'rc_notes',
width:250,
sortable:false,
editable:true,
edittype:'textarea',
classes:'ui-ellipsis',
editoptions:{rows:'3',cols:'45'}
}
],
pager:'#orderMMFoot',
sortname:'o.id',
caption:'Minor Materials Ordered for ' + ml_name,
gridComplete: function() {
$('.jqgrow').each(function(i) {
var ordqty = $(this).find('td.qtyOrd').text();
var ordrec = $(this).find('td.qtyRec').text();
if ((+ordqty == +ordrec) && (ordrec !== null) && (ordrec != 'undefined')) {
$(this).find('td.qtyRec').addClass('complete');
} else {
$(this).find('td.qtyRec').addClass('incomplete');
};
});
},
afterSaveCell: function(rowid) {
var jqRow = $('tr#' + rowid);
var ordqty = jqRow.find('td.qtyOrd').text();
var ordrec = jqRow.find('td.qtyRec').text();
if ((+ordqty == +ordrec) && (ordrec !== null) && (ordrec != 'undefined')) {
jqRow.find('td.qtyRec').addClass('complete');
} else {
jqRow.find('td.qtyRec').addClass('incomplete');
};
},
onSelectRow: function(id) {
if(id && id !== lastSel) {
mmGrid.jqGrid('restoreRow',lastSel);
mmGrid.jqGrid('editRow',id,true);
lastSel = id;
}
},
editurl:'/jqg/jqg.saveMinorMaterialEdit.php'
});
mmGrid.jqGrid('navGrid','#orderMMFoot',{add:false,edit:false,del:true});
mmGrid.jqGrid('inlineNav','#orderMMFoot',{add:true,edit:true,del:true,editParams:myEditParam,addParams:{addRowParams:myAddParam}});
Необязательный код с autocomplete в oneditfunc
var mmGrid = $('#orderMMGrid'),
editingRowId,
myEditParam = {
keys: true,
oneditfunc: function(id) {
editingRowId = id;
alert('#' + id + '_mastec_partno');
$('#' + id + '_mastec_partno').autocomplete({
source: function(request, response) {
$.getJSON('/json/json.searchmultiMaterials.php',{term:request.term,type:'m'},function(data) {
response(data);
})
},
minLength: 2,
select: function(e,ui) {
$(e).val(ui.item.id);
$('input[name="description"]').text(ui.item.description);
$('input[name="vendor_id"]').val(ui.item.vendor_id);
return false;
}
});
},
afterrestorefunc: function(id) {
editingRowId = undefined;
}
},
myAddParam = {
rowID: 'new',
position:'last',
extraparam: {
ml_id: ml_id
}
};
Встроенное редактирование, кажется, работает. Дополнительные параметры работают. Автозаполнения нет.
Одной из проблем, по-видимому, является элемент #inner-editor, который создается в поле во время встроенного редактирования.
Следуя нескольким опубликованным ответам/примерам, я пробовал autocomplete в параметрах поиска и oneditfunc, но безрезультатно. Крайне важно, чтобы mastec_partno был autocomplete, чтобы можно было поместить правильные значения в два других поля.
