如何爲jqGird中的列分配值？

Question

我使用jqGrid和CodeIgniter 2.1.0。 引起我騷擾的事情是如何爲特定事件上的特定列指定值

假設我輸入數量和比率列值.....當我失去焦點從「比率」字段.. ...淨數額應該計算並顯示在金額字段...

我需要在這裏做的是分配計算值的金額領域......但我沒有得到任何關於如何我是否這樣做？

我所做的下面給出：

var selIRow = 1; 
var rowid=''; 
var iCol=''; 
$("#purchasedetailsgrid").jqGrid({ 
    url: sitepath + 'purchase/purchase_grid', 
    datatype: 'json', 
    mtype: 'POST', 
    height:220, 
    width:500, 
    colNames:["","","Store Name","Item Name","Inner Pkg.","Outer Pkg.","Qty","Rate","Amount"], 
    colModel:[ 
     {name: 'storeID_hidden_field', index:'storeID_hidden_field',hidden: true, editable: true,edittype: 'text',editrules: {edithidden:true}}, 
     {name: 'itemID_hidden_field', index:'itemID_hidden_field',hidden: true, editable: true,edittype: 'text',editrules: {edithidden:true}}, 
     {name:'store_id', index:'store_id',width:150,search:false,editable:true,editrules:{number:false,maxlength:10}}, 
     {name:'item_id', index:'item_id',width:150,search:false,editable:true,editrules:{number:false,maxlength:10}}, 
     {name:'inner_pkg', index:'inner_pkg',width:150,search:false,editable:true,editrules:{number:true,maxlength:5}}, 
     {name:'outer_pkg', index:'outer_pkg',width:150,search:false,editable:true,editrules:{number:true,maxlength:5}}, 
     {name:'qty', index:'qty',editable:true,width:85,search:false,editrules:{number:true,maxlength:5}}, 
     {name:'rate', index:'rate',width:100,editable:true,search:false,editrules:{number:true,maxlength:10}, 
      editoptions: { 
       dataInit: function (elem) { $(elem).focus(function() { this.select(); }) }, 
       dataEvents: [ 
        { 
         type: 'keydown', 
         fn: function (e) { 
          var key = e.charCode || e.keyCode; 
          if (key == 9)//tab 
          { 
           $('#amount').val();//here in val() i need to write the value of qty and rate field 
          } 
         } 
        } 
       ] 
      } 
     }, 
     {name:'amount', index:'amount',width:100,editable:true,search:false,editrules:{number:true,maxlength:10}, 
      editoptions: { 
       dataInit: function (elem) { $(elem).focus(function() { this.select(); }) }, 
       dataEvents: [ 
        { 
         type: 'keydown', 
         fn: function (e) { 
          var key = e.charCode || e.keyCode; 
          if (key == 13)//enter 
          { 
           var grid = $('#purchasedetailsgrid'); 
           //Save editing for current row 

           grid.jqGrid('saveRow', selIRow, false, sitepath + 'purchase/purchase_grid'); 
           selIRow++; 
           //If at bottom of grid, create new row 
           //if (selIRow++ == grid.getDataIDs().length) { 
            grid.addRowData(selIRow, {}); 
           //} 
           //Enter edit row for next row in grid 
           grid.jqGrid('editRow', selIRow, false, sitepath + 'purchase/purchase_grid'); 
          } 
         } 
        } 
       ] 
      } 
     } 
    ], 
    pager: '#purchasedetailstoolbar', 
    rowNum:10, 
    rowList:[10,20,30], 
    sortname: 'inventory_id', 
    sortorder: 'desc', 
    viewrecords: true, 
    rownumbers: true, 
    gridview: true, 
    multiselect: false, 
    autoresize:true, 
    autowidth: true, 
    editurl: sitepath + 'purchase/purchase_grid', 
    toolbar: [true,"top"], 
    gridComplete: function() 
    { 
     var grid = jQuery("#purchasedetailsgrid"); 
     var ids = grid.jqGrid('getDataIDs'); 
     if(ids == '') 
     { 
      grid.addRowData(selIRow, {}); 
      grid.jqGrid('editRow', selIRow, false, sitepath + 'purchase/purchase_grid'); 
     } 
     for (var i = 0; i < ids.length; i++) 
     { 

     } 
    }, 
    caption: 'Purchase List', 
}); 
jQuery("#purchasedetailsgrid").jqGrid('navGrid','#purchasedetailstoolbar',{view:false,edit:false,add:false,del:false,search: false}); 
jQuery("#purchasedetailsgrid").jqGrid('inlineNav','#purchasedetailstoolbar'); 
jQuery("#purchasedetailsgrid").jqGrid('filterToolbar',{stringResult:false,searchOnEnter : false},{autosearch: true}); 
var temp_purchase = $("#purchasedetailsgrid_header").html(); 
$("#t_purchasedetailsgrid").html(temp_purchase); 
$("#refresh_purchasedetailsgrid").attr('title',"Reload Grid"); 

現在，任何人都可以建議我怎麼會從一列獲得價值並將其分配另一個？

任何建議，將不勝感激。

Thnx預先

Answer 1

您目前的代碼有很多問題。例如，您寫到您需要的金額將根據數量和費率計算，但您在「費率」和「金額」列中定義了一些dataEvents，而不是「數量」和「費率」列。下一個問題，您直接在gridComplete內使用editRow方法。因此inlineNav工具欄中的按鈕將保持錯誤狀態。還有一個問題是，您需要重新計算基於'數量'和'費率'的'金額'，不僅是從'數量'和'費率'的重點損失，而且還保存在輸入的值。

爲了使上述問題更容易解決，我寫了the demo，您可以修改它以符合您的確切要求。演示中最重要的部分可以在下面找到：

var editingRowId = undefined, 
    recomputeAmount = function() { 
     var rate = $("#" + editingRowId + "_rate").val(), 
      qty = $("#" + editingRowId + "_qty").val(), 
      newAmount = parseFloat(rate) * parseFloat(qty); 
     $("#" + editingRowId + "_amount").val(isFinite(newAmount) ? newAmount : 0); 
    }, 
    myEditParam = { 
     keys: true, 
     oneditfunc: function (id) { 
      editingRowId = id; 
     }, 
     afterrestorefunc: function (id) { 
      editingRowId = undefined; 
     }, 
     aftersavefunc: function (id) { 
      var $this = $(this), 
       rate = $this.jqGrid("getCell", id, "rate"), 
       qty = $this.jqGrid("getCell", id, "qty"), 
       newAmount = parseFloat(rate) * parseFloat(qty); 
      $this.jqGrid("setCell", id, "amount", newAmount); 
      editingRowId = undefined; 
     } 
    }, 
    numInput = { 
     type: 'keydown', 
     fn: function (e) { 
      var key = e.which; 
      // allow only '0' <= key <= '9' or key = '.', Enter, Tab, Esc 
      if ((key < 48 || key > 57) && key !== $.ui.keyCode.PERIOD && 
       key !== $.ui.keyCode.TAB && key !== $.ui.keyCode.ENTER && key !== $.ui.keyCode.ESCAPE) { 
       return false; 
      } 
     } 
    }, 
    recompute = { 
     type: 'focusout', 
     fn: function (e) { 
      recomputeAmount(); 
     } 
    }; 
$("#purchasedetailsgrid").jqGrid({ 
    colModel: [ 
     ... 
     {name:'qty', index:'qty',editable:true,width:85,search:false,editrules:{number:true,maxlength:5}, 
      editoptions: { 
       dataInit: function (elem) { $(elem).focus(function() { this.select(); }) }, 
       dataEvents: [ numInput, recompute ] 
      } 
     }, 
     {name:'rate', index:'rate',width:100,editable:true,search:false,editrules:{number:true,maxlength:10}, 
      editoptions: { 
       dataInit: function (elem) { $(elem).focus(function() { this.select(); }) }, 
       dataEvents: [ numInput, recompute ] 
      } 
     }, 
     {name:'amount', index:'amount',width:100,editable:true,search:false,editrules:{number:true,maxlength:10}} 
    ], 
    loadComplete: function() { 
     var gridIdSelector = '#' + $.jgrid.jqID(this.id); 
     if (this.rows.length > 1) { 
      //$(this).jqGrid('editRow', this.rows[1].id, myEditParam); 
      $(this).jqGrid('setSelection', this.rows[1].id, true); 
      setTimeout(function() { 
       // we should simulate click of the button not after the grid is loaded, but 
       // after the toolbar with the cliked button will be created by inlineNav 
       $(gridIdSelector + "_iledit").click(); 
      }, 100); 
     } else { 
      setTimeout(function() { 
       // we should simulate click of the button not after the grid is loaded, but 
       // after the toolbar with the cliked button will be created by inlineNav 
       $(gridIdSelector + "_iladd").click(); 
      }, 100); 
     } 
    } 
}); 
jQuery("#purchasedetailsgrid").jqGrid('navGrid','#purchasedetailstoolbar', 
    {view:false,edit:false,add:false,del:false,search: false, refreshtitle: "Reload Grid"}); 
jQuery("#purchasedetailsgrid").jqGrid('inlineNav','#purchasedetailstoolbar', 
    {edit: true, add: true, editParams: myEditParam, addParams: {addRowParams: myEditParam}}); 

如果需要的話，我可以評論不清楚的部分代碼。