Форматирование Выберите поля при сохранении нескольких строк в Jqgrid - PullRequest
1 голос
/ 11 ноября 2011

Я решаю упомянутую проблему здесь

Я смог сделать пользовательский формат элементов сетки таким образом, что несколько столбцов с возможностью редактирования в каждой строке, я делаюотобразите значение один и сохраните вновь измененное значение в скрытом поле, используя formatOptions.Однако, когда дело доходит до полей selectbox, я читал, что editoptions - это тот, который должен быть выбран вместо formatoptions.Поэтому в настоящее время мой selecbox выглядит следующим образом:

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

Спасибо, Саи Кришна

Ответы [ 2 ]

1 голос
/ 21 ноября 2011

Вы не разместили никаких тестовых данных, которые вы используете для заполнения сетки (mydata). Мне кажется, что значение из столбца invoice_item_id может быть хорошо использовано в качестве rowid. Чтобы упростить код для получения уникального идентификатора, который представляет элемент счета, я предполагаю, что значение 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)}.

0 голосов
/ 11 ноября 2011

Попробуйте $("select#id of selectbox[generated by jqgrid]").val();

Запрос должен работать.

...