我有一个常见的问题需要解决(使用我熟悉的其他网格控件很容易完成)。在jqgrid中,我很困惑。我有一个启用了内联编辑的jqgrid。我想添加一些脚本,以便在编辑一行(或添加新行)时,ColumnC的值自动计算为默认值columnna * ColumnB。用户可以随时更改任何列中的值。我希望这个值在用户输入时就被计算出来,而不是等到数据被保存。
到目前为止,我的方法是将类型为"change"的dataEvent附加到columnna和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 ?虽然这显然不会削减它对我来说,因为它只会显示数据,用户不能更新它。
如有任何帮助,不胜感激。
UPDATE:在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()
循环用于查找匹配的行节点。我可以看到,当网格有数千行时,这个速度很慢。是否有更好/更有效的方法来找到行节点?我已经有行号了
从答案看演示。它使用单元格编辑,但同样的技术也适用于内联编辑。只需单击"金额"列中的任何单元格并修改数值。您将看到,在单元格仍处于编辑模式期间,"Total"行(页脚)中的值将被动态更改。我想这正是你所需要的。
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);
}