在jqgrid中編輯時如何計算列值

Question

我有一個應該解決的常見問題（與我熟悉的其他網格控件輕松完成）。 在jqgrid中，我很困惑。 我有一個啟用了內聯編輯的jqgrid。 我想添加一些腳本，以便在編輯一行（或添加新行）時，默認情況下自動將ColumnC的值計算為ColumnA * ColumnB。 用戶可以隨時更改任何列中的值。 我希望用戶輸入后立即計算該值，而不要等到數據保存后再計算。

到目前為止，我的方法是將類型為change的dataEvent附加到ColumnA和ColumnB上-

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實際上並不返回該值，而是整個單元格內容，如其他用戶在此處已獲得的如何獲取jqGrid單元格值 。 獲取單元格值的唯一方法似乎是使用自定義的regex用戶函數來去除該值。 除此之外，是否有更好/替代的方法來實現我所需要的？ 像jqGrid一樣簡單-如何計算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

從答案看演示 。 它使用單元格編輯，但是相同的技術也可以用於內聯編輯。 只需單擊“金額”列中的任何單元格，然后修改數值。 您將看到，在單元格仍處於編輯模式期間，“總計”行（頁腳）中的值將動態更改。 我認為這就是您所需要的。

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



}