我正在解决这里提到的问题
我能够以这样一种方式对网格元素进行自定义格式，即每行中的几列都是可编辑的，我将显示值设为 1，并使用 formatOptions 将新更改的值保存在隐藏字段中。但是，当涉及到选择框字段时，我读到 editoptions 是要在 formatoptions 上选择的。所以目前我的选择框如下
editoptions: {
dataUrl: '/lists/products',
buildSelect: function (data) {
return "<select><option val='0'></option>" + data + "</select>";
}
}
现在我需要将选定的值存储到类似的隐藏字段中<input type="hidden", name="items[item_id]" value="newly selected value">。但是有些我无法通过编辑选项来获得它。我试过的代码在这里。
editable:true,
edittype:"select",
editoptions: {
dataUrl: '/lists/products',
buildSelect: function (data) {
return "<select><option val='0'></option>" + data + "</select>";
},
dataEvents: [
{
type: 'change',
fn: function(e) {
console.log(e);
html = '<input type=text name=product_codes[' + rowObject.item_id +
'] value="' + e.currentTarget.options.value + '" />';
return html;
}}
]
}
这不起作用。欢迎任何建议。
其下的整个jqgrid如下
showGrid: function(data){
var request_data = data[0] ? data[0] :[];
var data = data[1] ? data[1] :[];
var items = data.invoice_items;
var lastsel2;
var $product_values = {};
if(data[0].type_code !='xyz'){
var $this = this;
$("#grid").GridUnload();
$("#grid").jqGrid({
datatype: 'local',
colNames:['Item#','Product Group ID', 'Product Group','Product','Origin','Destination','Apps','Mobile','Carrier','Vessels',''],
colModel :[
{name:'item_identifier', index:'item_identifier', width:60},
{name:'product_group_id', index:'product_group_id', width:60,hidden:true},
{name:'product_group_code', index:'product_group_code', width:60},
{name:'product_code', index:'product_code', width:150, editable:true, edittype:"select", editoptions: { dataUrl: '/lists/products', $.extend({
custom_element: function (value, editOptions) {
var el = $('<input type="hidden" />');
el.attr('name', product_codes['+rowObject.invoice_item_id+']);
el.attr('value', cellvalue);
return el[0];
}}), buildSelect: function (data) {
return "<select><option val='0'></option>" + data + "</select>";
}}, formatter: function carrierFormatter(cellValue, options, rowObject){
html = '<input type=text name=product_codes['+rowObject.invoice_item_id+'] value="'+cellValue+'" />';
return html;
}},
{name:'origin_branch_code' ,index:'origin_branch_code', width:110},
{name:'destination_branch_code', index:'destination_branch_code', width:100},
{name:'term_code', index:'term_code', width:150, editable:true, edittype:"custom", editoptions: { dataUrl: '/lists/incoterms', buildSelect: function (data) {
return "<select><option val='0'></option>" + data + "</select>";
}}, formatter: function carrierFormatter(cellValue, options, rowObject){
html = '<input type=text name=inco_term_code['+rowObject.invoice_item_id+'] value="'+cellValue+'" />';
return html;
}},
{name:'mobile', index:'mobile', width:90, editable:true},
{name:'carrier', index:'carrier', width:140, formatter: function carrierFormatter(cellValue, options, rowObject){
html = '<input type=text name=carrier_code['+rowObject.invoice_item_id+'] value="'+cellValue+'" /> <button class="carrier"> ...</button>';
return html;
}},
{name:'vessel', index:'vessel', width:90, formatter: function carrierFormatter(cellValue, options, rowObject){
html = '<input type=text name=vessel['+options.rowId+'] value="'+cellValue+'"/> <input type=hidden name=item_id['+options.rowId+'] value="'+rowObject.invoice_item_id+'" />';
return html;
}},
{name:'invoice_item_id', index:'invoice_item_id', hidden:true}
],
loadComplete: function(rowid, status){
$("#grid > tbody > tr").each(function (rowid){
$("#grid").editRow(rowid,true);
});
alert("load Complete")
},
onSelectRow: function(rowid, status){
// This action appends some more grids and sub forms
},
}
else{
$("#grid").jqGrid({
datatype: 'local',
colNames:['Item#','Product Group ID', 'Product Group','Product','Origin','Destination',' Terms','Mobile#','Carrier','Vessel', 'Cancel Item'],
colModel :[
{name:'invoice_item_identifier', index:'invoice_item_identifier', width:60,editable:false},
{name:'product_group_id', index:'product_group_id', width:60,editable:false, hidden:true},
{name:'product_group_code', index:'product_group_code', width:60,editable:false},
{name:'product_code', index:'product_code', width:150,editable:true,edittype:"select",editoptions:{value: this.callback('getProducts')}},
{name:'origin_branch_code' ,index:'origin_branch_code', width:110,editable:false},
{name:'destination_branch_code' ,index:'destination_branch_code', width:100,editable:false},
{name:'term_code' ,index:'term_code', width:150,editable:true,edittype:"select",editoptions:{value: this.callback('getIncoterms')}},
{name:'mbl', index:'mbl', width:90,editable:true,edittype:"text"},
{name:'carrier_code', index:'carrier_code', width:90,editable:true,edittype: 'text'},
{name:'vessel', index:'vessel', width:90,editable:true},
{
name:'invoice_item_id',
index:'invoice_item_id',
width:90,
formatter: function (cellvalue, options, rowObject){
var html_input = "<a href='#invoice_item'>Cancel</a>" ;
return html_input;
}
}
]
});
}
if(data){
/*data gets processed here and mydata array is pushed to grid*/
mydata.push({
rowId: x,
invoiceItem: x,
item_identifier: d.transaction_type_business_number || 'N/A',
product_group_id: d.product_group_code.group_id,
product_group_code: d.product_group_code.product_group.product_group_code || "N/A",
product_code: d.product_code,
origin_branch_code: origin_branch_code,
destination_branch_code: destination_branch_code,
term_code: inco_term_code,
Monbile: consolidation_number,
carrier_code: carrier_code,
vessel: d.comments,
invoice_item_id: d.invoice_item_id
});
$("#grid").addRowData(d.id, mydata);
}
}
$("#grid").trigger("reloadGrid"); //added for selection of rowids
}
});
谢谢你赛克里希纳