我正在解决提到here
的问题我能够以这样的方式对网格元素进行自定义格式，使得每行中可以编辑的列很少，我使用formatOptions将显示值设置为1并将新更改的值保存在隐藏字段中。但是，当涉及到selectbox字段时，我读到了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">中。但有些我怎么也无法通过editoptions得到这个。我试过的代码就在这里。
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
}
});
谢谢 Sai Krishna
答案 0 :(得分：1)
您没有发布用于填充网格的任何测试数据（mydata）。在我看来，列invoice_item_id的值可以很好地用作rowid。为了简化代码以获取代表发票项目的唯一ID，我将假设值d.id与d.invoice_item_id相同。如果您使用其他值，则可以更改以下代码，包括额外调用getCell方法。
我认为无需在自定义格式化程序或自定义编辑（custom_element）中使用任何其他隐藏的输入字段。而不是我建议做以下简单的构造。
您定义了一个变量（一个对象），它将在用户在发票中执行的字段中表示更改。你可以定义一个变量，如。
var invoiceCorrections = {};
每次清除网格时（关于代码{}），将其重置为空对象$("#grid").GridUnload();。
您可以使用以下格式在invoiceCorrections对象中保存发票更改：invoiceCorrections的值可以invoice_item_id作为发票更改项目的属性。如果某个可编辑列的值如'product_code'，'mbl'（???'mbl'或'mobile'???你同时使用），'term_code'，'carrier'或'vessel'都会被更改，你可以保存在invoiceCorrections新的已修改值。例如，
{
'invoice_item_id123': { // - invoice_item_id123 it's the id of one item
product_code: 'new product id 1', // 'product_code' was changed
carrier: 'new carrier 1' // 'carrier' was also changed
},
'invoice_item_id456': { // - invoice_item_id456it's the id of another item
product_code: 'new product id 2',
term_code: 'term code 2'
},
}
要填写上述表格中的invoiceCorrections，您可以使用dataEvents：
dataEvents: [
{
type: 'change',
fn: function(e) {
var $input = $(e.target), $tr = $input.closest('tr.jqgrow'),
rowid, changedItem, inputColumnName = 'product_code';
if ($tr.length > 0) {
rowid = $tr[0].id; // if can be invoice_item_id
// if you use other rowid you can get the value of any non-editable
// with respect of `getCell`:
// var invoice_item_id = $("#grid").jqGrid('getCell',
// rowid, 'invoice_item_id');
if (rowid in invoiceCorrections) { // the same as
// typeof(invoiceCorrections[rowid]) !== "undefined"
changedItem = invoiceCorrections[rowid];
} else {
changedItem = {};
invoiceCorrections[rowid] = changedItem;
}
changedItem = invoiceCorrections[inputColumnName];
changedItem[inputColumnName] = $input.val();
}
}}
]
我在上面的代码中使用了inputColumnName = 'product_code'，以便您更轻松地将代码移动到您可以在dataEvents的代码中为不同的网格列共享的函数。如果使用select元素，您可以将$input.val()替换为$input.find('option:selected').val()或$input.find('option:selected').text()。
以上述方式，您将收集在invoiceCorrections对象中发布到服务器所需的完整信息。因此，您可以按invoiceCorrections或$.ajax向服务器发送$.post。您应该填写data $.ajax参数，具体取决于服务器部分的实现。它可以只是data: invoiceCorrections或data: JSON.stringify(invoiceCorrections)或data: {invoiceChanged: JSON.stringify(invoiceCorrections)}。
答案 1 :(得分：0)
尝试$("select#id of selectbox[generated by jqgrid]").val();
查询应该有效。