在 Jqgrid 中进行多行保存时格式化选择框

Question

我正在解决此处提到的问题

我能够以这样的方式自定义网格元素的格式，即每行中很少有可编辑的列，我将显示值设置为一，并使用 formatOptions 将新更改的值保存在隐藏字段中。然而，当谈到选择框字段时，我读到编辑选项是比格式选项要选择的选项。所以目前我的选择框如下

editoptions: {
    dataUrl: '/lists/products', 
    buildSelect: function (data) {
        return "<select><option val='0'></option>" + data + "</select>";
    }
}

现在我需要将所选值存储到隐藏字段中 。但有些我无法通过编辑选项得到这个。我尝试过的代码在这里。

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+'" />&nbsp;<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+'"/>&nbsp;<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
  }
});

谢谢 赛克里希纳

Answer 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”发生更改，您可以保存在 invoiceCorctions 中新的修改值。例如，

{
    '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'
    },
}

要填写上述表单中的 invoiceCorctions，您可以使用 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()< /code> 或 $input.find('option:selected').text()。

通过上述方式，您将收集需要在 invoiceCorctions 对象中发布到服务器的完整信息。因此，您可以仅根据 $.ajax 或 $.post 将 invoiceCorctions 发送到服务器。您应该根据服务器部分的实现来填写$.ajax 的data 参数。它可以只是data：invoiceCorrections或data：JSON.stringify(invoiceCorrections)或data：{invoiceChanged：JSON.stringify(invoiceCorrections)} 。

Answer 2

尝试 $("select#id of selectbox[由 jqgrid 生成]").val();

查询应该可以工作。