格式化在Jqgrid中执行多行保存时选择框
我正在解决这里提到的问题
我能够以这样的方式对网格元素进行自定义格式，使得每行中可以编辑的列很少，我使用formatOptions将显示值设置为1并将新更改的值保存在隐藏字段中。 但是，当涉及到selectbox字段时，我读到了editoptions是通过formatoptions选择的。 所以目前我的选择框如下
editoptions: { dataUrl: '/lists/products', buildSelect: function (data) { return "" + data + ""; } } 现在我需要将所选值存储到隐藏字段中这类 。 但有些我怎么也无法通过editoptions得到这个。 我试过的代码在这里。
editable:true, edittype:"select", editoptions: { dataUrl: '/lists/products', buildSelect: function (data) { return "" + data + ""; }, dataEvents: [ { type: 'change', fn: function(e) { console.log(e); html = ''; 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 = $(''); el.attr('name', product_codes['+rowObject.invoice_item_id+']); el.attr('value', cellvalue); return el[0]; }}), buildSelect: function (data) { return "" + data + ""; }}, formatter: function carrierFormatter(cellValue, options, rowObject){ html = ''; 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 "" + data + ""; }}, formatter: function carrierFormatter(cellValue, options, rowObject){ html = ''; return html; }}, {name:'mobile', index:'mobile', width:90, editable:true}, {name:'carrier', index:'carrier', width:140, formatter: function carrierFormatter(cellValue, options, rowObject){ html = ' '; return html; }}, {name:'vessel', index:'vessel', width:90, formatter: function carrierFormatter(cellValue, options, rowObject){ html = ' '; 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 = "Cancel" ; 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
您没有发布用于填充网格的任何测试数据（ 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.val() $input.find('option:selected').val()或$input.find('option:selected').text() 。
以上述方式，您将收集需要在invoiceCorrections对象中发布到服务器的完整信息。 因此，您可以按$.ajax或$.post将invoiceCorrections发送到服务器。 您应该根据服务器部分的实现填充$.ajax的data参数。 它可以只是data: invoiceCorrections data: JSON.stringify(invoiceCorrections)或data: JSON.stringify(invoiceCorrections)或data: {invoiceChanged: JSON.stringify(invoiceCorrections)} 。
尝试$("select#id of selectbox[generated by jqgrid]").val();
查询应该有效。