jqgrid에서 편집하는 동안 열 값을 계산하는 방법

Question

나는 잘 알고있는 다른 표 컨트롤로 쉽게 해결할 수있는 일반적인 문제가 있습니다. jqgrid에서, 나는 아주 곤란하다. 인라인 편집이 가능한 jqgrid가 있습니다. 행을 편집 할 때 (또는 새 행을 추가 할 때) ColumnC의 값이 ColumnA * ColumnB로 자동 계산되도록 스크립팅을 추가하고 싶습니다. 사용자는 언제든지 모든 열의 값을 변경할 수 있습니다. 사용자가 데이터를 저장하고 데이터가 저장 될 때까지 기다리지 않고 즉시이 값을 계산하기를 원합니다.

내 접근 방식은 지금까지 COLUMNA 및 COLUMNB에 유형 "변화"에 의해 DataEvent를 연결하고있다 - 실제로 이미 값하지만 전체 셀 내용을 반환하지 않는

분명히

dataEvents: [ 
       { type: 'change', fn: function(e) { 
        var rowid = $("#myGrid").jqGrid('getGridParam','selrow'); 
        var rowData = $("#myGrid").getRowData(rowid); 
        var cell1 = rowData['ColumnA']; 
        var cell2 = rowData['ColumnB']; 
        var newValue = cell1 * cell2; 
        $("#myGrid").jqGrid('setCell', rowid, 'ColumnC', newValue); 
        } 
       }, 
      ] 

, CELL1 & CELL2 다른 사용자가 여기에서 발견했습니다 How to get a jqGrid cell value. 셀 값을 얻는 유일한 방법은 해당 값을 제거하는 사용자 정의 정규식 사용자 함수를 사용하는 것입니다. 그 외에도, 내가 원하는 것을 성취 할 수있는 더 나은 방법이 있습니까? jqGrid - How to calculated column to jqgrid?과 같은 간단한 것만으로도 데이터를 표시하고 사용자가 업데이트 할 수 없기 때문에 분명히 저를 감당할 수 없습니다.

도움을 주시면 감사하겠습니다.

업데이트 : : 올레그 (Oleg)의지도 후, 내가 필요한 것을 지원하기 위해 getTextFromCell을 확장 할 수있었습니다.

  function getTextFromCell(cellNode) { 
      var cellValue; 
      //check for all INPUT types 
      if (cellNode.childNodes[0].nodeName == "INPUT") {    
       //special case for handling checkbox 
       if (cellNode.childNodes[0].type == "checkbox") {    
        cellValue = cellNode.childNodes[0].checked.toString(); 
       } 
       else { 
        //catch-all for all other inputs - text/integer/amount etc 
        cellValue = cellNode.childNodes[0].value;    
       } 
      } 
      //check for dropdown list 
      else if (cellNode.childNodes[0].nodeName == "SELECT") {   
       var newCell = $("select option:selected", cellNode); 
       cellValue = newCell[0].value; 
      } 
      return cellValue;    
     } 

     function getCellNodeFromRow(grid,rowId,cellName) { 
      var i = getColumnIndexByName(grid, cellName); 
      var cellValue; 
      //find the row first 
      $("tbody > tr.jqgrow", grid[0]).each(function() { 
       //The "Id" column in my grid is at index 2... 
       var idcell = $("td:nth-child(2)", this); 
       var currRowId = getTextFromCell(idcell[0]) 
       if (currRowId == rowId) { 
        cellValue = getTextFromCell($("td:nth-child(" + (i + 1) + ")", this)[0]); 
        return false; 
       } 
      }); 
      return cellValue; 
     } 

getCellNodeFromRow의 코드가 가장 효율적이지 않습니다. 일치하는 행 노드를 찾으려면 .each() 루프가 있습니다. 그리드에 수천 개의 행이있을 때 속도가 느린 것을 볼 수 있습니다. 행 노드를 찾는 더 좋고/더 효율적인 방법이 있습니까? 이미 행 ID가 있습니다.

Answer 1

the demo을 the answer에서 확인하십시오. 셀 편집을 사용하지만 동일한 기술이 인라인 편집에도 적용됩니다. "금액"열의 아무 셀이나 클릭하고 숫자 값을 수정하십시오. 셀이 편집 모드에있을 때 "전체"행 (꼬리말)의 값이 동적으로 변경된다는 것을 알 수 있습니다. 나는 그것이 당신이 필요로하는 것이라고 생각합니다.

Answer 2

you can achieve this using onCellSelect event of jqgrid as below 



//global section 
var columnA; 
var ColumnB; 
var ColumnC; 
var currentRow; 

// 

onCellSelect: function (rowid, iCol, aData) { 

       currentRow = rowid; 
       var ColumnA = $('#grid').getCell(rowid, 'MyCol'); 
       var ColumnB = $('#grid').getCell(rowid, 'MyCol'); 

       $("#grid").jqGrid('editRow', rowid, true); 
       $("#myMenu").hide(); 
       if (rowid && rowid !== lastsel) { 
        if (lastsel) jQuery('#grid').jqGrid('restoreRow', lastsel); 
$("#grid").jqGrid('editRow', rowid, true); 
        lastsel = rowid; 
       } 
       else if (rowid && rowid === lastsel) 
       { $("#grid").jqGrid('editRow', rowid, true); } 

       //if it is in editable mode 
       // when you view the html using firebug it will be like the cell id change to      
       //format like "rowid_ColumnName" 
       $('#' + currentRow + '_ColumnC').val(ColumnA*ColumnB); 

       // or you can use achieve this using following jqgrid method at 
       //appropriate place 
       $("#myGrid").jqGrid('setCell', rowid, 'ColumnC', ColumnA*ColumnB); 



}