jqgrid更改另一個單元格（依賴列）的可編輯單元格的值

我的折扣列有一個自動完成，它具有來自另一個json變量的值。

這是我的json數組，其中的折扣數據來自於。

[ 
    {"id":0.56,"label":"Adams Rite Less 50\/12","value":"Adams Rite Less 50\/12"}, 
    {"id":0.44,"label":"ASSA Less 44","value":"ASSA Less 44"}, 
    {"id":0.603,"label":"BARON ACCESSORIES AND STICKS Less 60.3","value":"BARON ACCESSORIES AND STICKS Less 60.3"}, 
    {"id":0.704,"label":"BARON STD AND CUSTOM DOORS Less 70.4","value":"BARON STD AND CUSTOM DOORS Less 70.4"}, 
    {"id":0.617,"label":"BARON STD AND CUSTOM FRAMES Less 61.7","value":"BARON STD AND CUSTOM FRAMES Less 61.7"}, 
    {"id":0.704,"label":"BARON STD PALLET DOORS Less 70.4","value":"BARON STD PALLET DOORS Less 70.4"}, 
    {"id":0.145,"label":"Bobrick 10\/5","value":"Bobrick 10\/5"}, 
    {"id":0.6175,"label":"BREMNER HMD","value":"BREMNER HMD"}, 
    {"id":0.6073,"label":"BREMNER HMF","value":"BREMNER HMF"}, 
    {"id":0.44,"label":"Eff Eff Less 44","value":"Eff Eff Less 44"} 
]

我想做的是

（1）在改變折扣的值成本柱應該改變按照這個公式

new Cost = (1-0.145)*List Price Cell's value (in this case 999)

值0.145即將來自json的id列。

（2）在更改折扣價值時，ExtCost列應根據此更改。

New Ext Cost = Quantity * new Cost

數量是最左邊的單元格。

這是我的網格相關的代碼。

var lastsel2; 
    jQuery(document).ready(function(){ 
     var autocompleteSource; 
     $.getJSON("{{ asset('app_dev.php/GetDiscount') }}", function(json){ 
      autocompleteSource = json; 
     }); 
     var cont; 
     jQuery("#list").jqGrid({ 
      url: "{{ asset('/app_dev.php/_thrace-datagrid/data/view_PO_details') }}", 
      postData: { 
       masterGridRowId: {{ editid }} 
      }, 
      datatype: "json", 
      mtype: 'POST', 
      colNames: ['', 'Released', 'Attachments', 'Quantity', 'Received', 'Item #', 'Vendor Item #', 'List Price', 'Discount', 'Cost', 'ExtCost', 'Lead Time', 'System Key', 'PO Item Note', 'PO Required Date', 'Confirm #','Confirm Date', 'VQ #', 'Reference', 'VQ Ref', 'UOM', 'Type', 'Last Update', 'Updated By', 'FSC', 'Door #', 'Queue', 'RTE#'], 
      colModel: [ 
       { 
        name: "POD_UISelected", 
        index: "o.POD_UISelected", 
        editable: true, 
        edittype: 'checkbox', 
        editoptions: {value: "True:False"}, 
        formatter: "checkbox", 
        formatoptions: {disabled: false}, 
        align: 'center', 
        jsonmap: "cell.0", 
        width: '70' 
       }, 
       { 
        name: "POD_Released", 
        index: "o.POD_Released", 
        editable: true, 
        edittype: 'checkbox', 
        editoptions: {value: "Yes:No"}, 
        formatter: "checkbox", 
        formatoptions: {disabled: false}, 
        align: 'center', 
        jsonmap: "cell.1", 
        width: '70' 
       }, 
       { 
        name: "I_LinkHasFiles", 
        index: "o.I_LinkHasFiles", 
        editable: false, 
        edittype: 'checkbox', 
        editoptions: {value: "True:False"}, 
        formatter: "checkbox", 
        formatoptions: {disabled: true}, 
        align: 'center', 
        jsonmap: "cell.2", 
        width: '70' 
       }, 
       { 
        name: "POD_OrderQty", 
        index: "o.POD_OrderQty", 
        editable: true, 
        align: 'center', 
        jsonmap: "cell.3", 
        width: '100' 
       }, 
       { 
        name: "POD_QtyReceived", 
        index: "o.POD_QtyReceived", 
        editable: true, 
        align: 'center', 
        jsonmap: "cell.4", 
        width: '100' 
       }, 
       {name: "POD_ItemNumID #", index: "o.POD_ItemNumID", editable: false, align: 'center', jsonmap: "cell.5"}, 
       { 
        name: "POD_VendorItemNum", 
        index: "o.POD_VendorItemNum", 
        editable: false, 
        align: 'center', 
        jsonmap: "cell.6" 
       }, 
       { 
        name: "POD_VendorListPrice", 
        index: "o.POD_VendorListPrice", 
        editable: true, 
        align: 'center', 
        formatter: 'currency', 
        formatoptions: {prefix: '$', suffix: '', thousandsSeparator: ','}, 
        jsonmap: "cell.7" 
       }, 
       { 
        name: "POD_VendorDiscount", 
        index: "o.POD_VendorDiscount", 
        editable: true, 
        jsonmap: "cell.8", 
        editoptions: { 
         dataInit: function(elem) { 
          var $self = $(this), // save the reference to the grid 
            $elem = $(elem); // save the reference to <input> 
          $(elem).autocomplete({ 
           source: autocompleteSource, 
           select: function (event, ui) { 
            var $tr = $elem.closest("tr.jqgrow"), newCost, rowid = $tr.attr("id"), 
              orderQty = parseFloat($tr.find("input[name=POD_OrderQty]").val()), 
              listPrice = parseFloat($tr.find("input[name=POD_VendorListPrice]").val()); 
            if (ui.item) { 
             console.log(orderQty); 
             console.log(listPrice); 
             newCost = (1 - parseFloat(ui.item.id)) * listPrice; 
             $self.jqGrid("setRowData", rowid, { 
              POD_UnitCost: newCost, 
              POD_ExtCost: orderQty * newCost 
             }); 
            } 
           }, 
           minLength: 0, 
           minChars: 0, 
           autoFill: true, 
           mustMatch: true, 
           matchContains: false, 
           scrollHeight: 220 


          }).on('focus', function(event) { 
           var self = this; 
           $(self).autocomplete("search", ""); 
          }); 
         } 
        } 
       }, 
       { 
        name: "POD_UnitCost", 
        index: "o.POD_UnitCost", 
        editable: false, 
        align: 'center', 
        formatter: 'currency', 
        formatoptions: {prefix: '$', suffix: '', thousandsSeparator: ','}, 
        jsonmap: "cell.9" 
       }, 
       { 
        name: "POD_ExtCost", 
        index: "o.POD_ExtCost", 
        editable: false, 
        align: 'center', 
        formatter: 'currency', 
        formatoptions: {prefix: '$', suffix: '', thousandsSeparator: ','}, 
        jsonmap: "cell.10" 
       }, 
       {name: "POD_Leadtime", index: "o.POD_Leadtime", editable: false, jsonmap: "cell.11"}, 
       { 
        name: "POD_Stocked", 
        index: "o.POD_Stocked", 
        editable: false, 
        edittype: 'checkbox', 
        editoptions: {value: "True:False"}, 
        formatter: "checkbox", 
        formatoptions: {disabled: true}, 
        align: 'center', 
        jsonmap: "cell.12" 
       }, 
       {name: "POD_Note", index: "o.POD_Note", editable: true, jsonmap: "cell.13"}, 
       { 
        name: "POD_ReqDate", 
        index: "o.POD_ReqDate", 
        editable: true, 
        jsonmap: "cell.14.date", 
        editoptions:{size:20, 
         dataInit:function(el){ 
          $(el).datepicker({dateFormat:'yy-mm-dd'}); 
         }, 
         defaultValue: function(){ 
          var currentTime = new Date(); 
          var month = parseInt(currentTime.getMonth() + 1); 
          month = month <= 9 ? "0"+month : month; 
          var day = currentTime.getDate(); 
          day = day <= 9 ? "0"+day : day; 
          var year = currentTime.getFullYear(); 
          return year+"-"+month + "-"+day; 
         } 
        } 
       }, 
       {name: "POD_ConfrmNum", index: "o.POD_ConfrmNum", editable: true, jsonmap: "cell.15"}, 
       { 
        name: "POD_PromDate", 
        index: "o.POD_PromDate", 
        editable: true, 
        jsonmap: "cell.16.date", 
        editoptions:{size:20, 
         dataInit:function(el){ 
          $(el).datepicker({dateFormat:'yy-mm-dd'}); 
         }, 
         defaultValue: function(){ 
          var currentTime = new Date(); 
          var month = parseInt(currentTime.getMonth() + 1); 
          month = month <= 9 ? "0"+month : month; 
          var day = currentTime.getDate(); 
          day = day <= 9 ? "0"+day : day; 
          var year = currentTime.getFullYear(); 
          return year+"-"+month + "-"+day; 
         } 
        } 
       }, 
       {name: "VQ_PK", index: "o.VQ_PK", editable: false, jsonmap: "cell.17"}, 
       {name: "pod_reftext", index: "o.pod_reftext", editable: false, jsonmap: "cell.18"}, 
       {name: "VQ_VRef", index: "o.VQ_VRef", editable: false, jsonmap: "cell.19"}, 
       {name: "POD_UOM", index: "o.POD_UOM", editable: false, jsonmap: "cell.20"}, 
       {name: "POD_ItemType", index: "o.POD_ItemType", editable: false, jsonmap: "cell.21"}, 
       {name: "POD_DateUpdated", index: "o.POD_DateUpdated", editable: false, jsonmap: "cell.22.date"}, 
       {name: "POD_UpdatedSysUser", index: "o.POD_UpdatedSysUser", editable: false, jsonmap: "cell.23"}, 
       {name: "I_FSC", index: "o.I_FSC", editable: false, jsonmap: "cell.24"}, 
       {name: "PjD_NumID", index: "o.PjD_NumID", editable: false, jsonmap: "cell.25"}, 
       {name: "POD_QueueSourceText", index: "o.POD_QueueSourceText", editable: false, jsonmap: "cell.26"}, 
       {name: "RTP_PK_E", index: "o.RTP_PK_E", editable: false, jsonmap: "cell.27"} 
      ], 
      beforeSelectRow: function (rowid, e) { 
       var $target = $(e.target), $td = $target.closest("td"), 
         iCol = $.jgrid.getCellIndex($td[0]), 
         colModel = $(this).jqGrid("getGridParam", "colModel"); 
       if (iCol >= 0 && $target.is(":checkbox")) { 
        if(colModel[iCol].name == "POD_UISelected") 
        { 
         $('#list').setSelection(rowid, true); 
         $("#list").jqGrid('saveRow', rowid, { //same rowid value used in 'addRowData' method above 
          succesfunc: function (response) { 
           $('#list').trigger('reloadGrid'); 
           return true; 
          } 
         }) 
        } 
       } 
       return true; 
      }, 
      onSelectRow: function(id){ 
       if(id && id!==lastsel2){ 
        jQuery('#list').jqGrid('restoreRow',lastsel2); 
        jQuery('#list').jqGrid('editRow',id,true); 
        lastsel2=id; 
       } 
      }, 
      jsonReader: {repeatitems: false}, 
      height: 400, 
      rowNum: 50, 
      rowTotal: 1000000, 
      autowidth: true, 
      gridview: true, 
      autoencode: false, 
      pager: '#pager', 
      shrinkToFit: true, 
      sortable: true, 
      sortname:"o.POD_ReqDate", 
      sortorder: "desc", 
      viewrecords: true, 
      //multiselect: true, 
      loadonce:false, 
      rowList: [50, 100, 500, 1000], 
      editurl: "{{ asset('/app_dev.php/_thrace-datagrid/row-action/view_PO_details') }}" 
     }); 
     jQuery("#list").jqGrid('navGrid',"#pager",{ del:false, add:false, edit:false}, 
     {editData: {PO_PK: {{ editid }}}}, 
     {editData: {PO_PK: {{ editid }}}}, 
     {editData: {PO_PK: {{ editid }}}}, 
     {multipleSearch:true} 
     ); 
     jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : true}); 
     jQuery('#list').jqGrid('gridResize'); 
     $("#productEdit_V_PK").prop("disabled", true); 
    });

到目前爲止，我已經嘗試this this和this 的jqGrid版本4.8.2

來源

2015-06-04 Dipen Shah

你不提供一個工作演示，但我希望我還是理解正確。

我認爲您希望在可編輯POD_VendorDiscount的jQuery UI自動完成控件中選擇不可編輯列的值POD_UnitCost和POD_ExtCost。計算過程中將使用另一個可編輯列POD_OrderQty和POD_VendorListPrice的值。 select當前代碼自動完成回調

var rowData = $('#list').jqGrid('getRowData', rowid); 
cont = rowData.POD_VendorListPrice; 
console.log(cont); 
rowData.POD_ExtCost = (1-ui.item.id)*cont;

不正確。第一個問題是使用getRowData來訪問當前在內聯編輯模式下的列。這是不對的。 getRowData將從單元中獲取HTML片段，而不是相應的<input>元素的value。第二個錯誤：您只需設置POD_ExtCost的rowData對象，而無需執行任何其他操作。它不會更改POD_ExtCost列中的值。你應該做的是：你可以使用getRowData和setRowData獲取/設置值不編輯列，你必須獲得編輯元素的<input>元素並獲取其value以獲取當前編輯值。

我無法測試下面的代碼，但正確的方法可以是例如以下

dataInit: function(elem) { 
    var $self = $(this), // save the reference to the grid 
     $elem = $(elem); // save the reference to <input> 
    $elem.autocomplete({ 
     source: autocompleteSource, 
     select: function (event, ui) { 
      var $tr = $elem.closest("tr.jqgrow"), newCost, rowid = $tr.attr("id"), 
       orderQty = parseFloat($tr.find("input[name=POD_OrderQty]").val()), 
       listPrice = parseFloat($tr.find("input[name=POD_VendorListPrice]").val()); 
      if (ui.item) { 
       console.log(orderQty); 
       console.log(listPrice); 
       newCost = (1 - parseFloat(ui.item.id)) * listPrice; 
       $self.jqGrid("setRowData", rowid, { 
        POD_UnitCost: newCost, 
        POD_ExtCost: orderQty * newCost 
       }); 
      } 
     }, 
     minLength: 0, 
     minChars: 0, 
     autoFill: true, 
     mustMatch: true, 
     matchContains: false, 
     scrollHeight: 220 
    }).on("focus", function(event) { 
     $(this).autocomplete("search", ""); 
    }); 
}

我應該此話，上面的代碼僅適用於內聯編輯。

來源

2015-06-04 16:29:26 Oleg

謝謝奧列格。一如既往，您的代碼完美無瑕。是的，你理解我是對的。我只是認爲我只會提供相關的代碼，它應該是可以解釋的。我將爲未來的用戶更新代碼。再次感謝你。你是男人。 –

@DipenShah：不客氣！我很高興能幫助你。 – Oleg

jqgrid更改另一個單元格（依賴列）的可編輯單元格的值

回答

相關問題