jqGird의 열에 값을 어떻게 할당합니까?

Question

CodeIgniter 2.1.0에서 jqGrid를 사용하고 있습니다. 나를 괴롭히는 것은 특정 이벤트의 특정 열에 값을 할당하는 것입니다.

열 값에 qty와 rate를 입력하고 ..... "rate"필드에서 손실 초점을 맞춘다 고 가정합니다. ... 그물 금액을 계산하고 금액 필드에 표시해야합니다 ...

여기서해야 할 일은 금액 필드에 계산 된 값을 할당하는 것입니다 ...... 그러나 나는 어떤 생각을 가지지 않습니다. 나는 그것을합니까?

내가 아래에 주어진 무엇을했는지 :

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"); 

지금 누군가가 내가 한 열에서 값을 가져 와서 다른를 할당하는 방법을 나에게 제안 할 수 있습니다?

모든 의견을 환영합니다.

미리 Thumbnail

Answer 1

현재 코드에는 많은 문제가 있습니다. 예를 들어, 귀하는 그 금액을 수량 및 요율에 따라 계산할 필요가 있다고 썼다면, '수량'및 '요율'열 대신 '요율'및 '금액'열에서 일부 dataEvents을 정의했습니다. 다음 번에 내부에 editRow 메서드를 직접 사용하는 문제입니다. 따라서 inlineNav 도구 모음의 단추가 잘못된 상태로 유지됩니다. 또 하나의 문제는 'qty'와 'rate'의 초점을 상실했을뿐만 아니라 에을 저장하면 'qty'와 'rate'에 따라 'amount'를 재 계산해야한다는 것입니다.

위의 문제를 더 쉽게 해결할 수 있도록 수정 가능한 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}}); 

코드 불분명 한 부분을 언급 할 수 있습니다.