jqGrid在编辑时访问单元格数据
我目前正在使用afterSaveCell来处理手动更新网格中的某些单元格。 如果用户使用enter保存当前编辑的单元格，我可以正常工作。
不幸的是，如果他们点击或跳出单元格，他们直接编辑到另一个单元格，我不能再抓取新编辑的单元格的单元格值，因为getCell将只返回输入控件的html。
总之，即使在编辑单元格时，有没有办法访问单元格的值？
jQuery(document).ready(function () { var mydata = [ {id:"1", invdate:"2007-10-01",name:"test", note:"note", amount:"200.00",tax:"10.00",total:"210.00"}, {id:"2", invdate:"2007-10-02",name:"test2", note:"note2", amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3", invdate:"2007-09-01",name:"test3", note:"note3", amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4", invdate:"2007-10-04",name:"test", note:"note4", amount:"200.00",tax:"10.00",total:"210.00"}, {id:"5", invdate:"2007-10-05",name:"test5", note:"note5", amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6", invdate:"2007-09-06",name:"test", note:"note6", amount:"400.00",tax:"30.00",total:"430.00"}, {id:"7", invdate:"2007-10-04",name:"test7", note:"note7", amount:"200.00",tax:"10.00",total:"210.00"}, {id:"8", invdate:"2007-10-03",name:"test8", note:"note8", amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9", invdate:"2007-09-01",name:"test", note:"note9", amount:"400.00",tax:"30.00",total:"430.00"}, {id:"10",invdate:"2007-09-08",name:"test10",note:"note10",amount:"500.00",tax:"30.00",total:"530.00"}, {id:"11",invdate:"2007-09-08",name:"test11",note:"note11",amount:"500.00",tax:"30.00",total:"530.00"}, {id:"12",invdate:"",name:"TOTAL", note:"",amount:"",tax:"",total:""} ]; var grid = $("#list"); grid.jqGrid({ cellsubmit: 'remote', cellurl: '/Example/GridSave', datatype: "local", data: mydata, mtype: 'POST', colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'], colModel: [ { name: 'id', index: 'id', width: 65, sorttype: 'int', hidden: true }, { name: 'invdate', index: 'invdate', width: 120, align: 'center', formatter: 'date', formatoptions: { newformat: 'dMY' }, sortable: false }, { name: 'name', index: 'name', editable: true, width: 90, sortable: false }, { name: 'amount', index: 'amount', editable: true, width: 70, formatter: 'number', align: 'right', sortable: false }, { name: 'tax', index: 'tax', editable: true, width: 60, formatter: 'number', align: 'right', sortable: false }, { name: 'total', index: 'total', editable: true, width: 60, formatter: 'number', align: 'right', sortable: false }, { name: 'note', index: 'note', width: 100, sortable: false } ], rowNum: 1000, pager: '#pager', viewrecords: true, sortorder: "desc", caption: "afterSaveCell Issue", height: "100%", cellEdit: true, gridComplete: function () { calculateTotal(); }, afterSaveCell: function (rowid, name, val, iRow, iCol) { calculateTotal(); } }); }); function calculateTotal() { var totalAmount = 0; var totalTax = 0; var grid = jQuery("#list"); var ids = grid.jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { var id = ids[i]; if (grid.jqGrid('getCell', id, 'name') === "TOTAL") { grid.jqGrid('setRowData', id, { 'amount': totalAmount, 'tax': totalTax, 'total': totalAmount + totalTax }); } else { totalAmount += Number(grid.jqGrid('getCell', id, 'amount')); totalTax += Number(grid.jqGrid('getCell', id, 'tax')); } } }
提前致谢！
我在你的代码中看到了两个问题。 第一个是更美观，但正确的解决方案可以简化未来的许多事情。
第一个问题是您将“TOTAL”行手动添加为网格数据的一部分，并计算calculateTotal函数内的行中的值。 更好的方法是使用footerrow:true选项，它在网格底部添加额外的行， 不会与网格数据混合 。 对于基于服务器的数据，您可以使用来自服务器的JSON或XML响应的userdata部分，并使用userDataOnFooter:true ，直到将userData jqGrid参数中的数据添加到页脚行。 在“本地”数据类型的情况下，可以使用footerData方法设置（或获取）页脚中的数据。 另外，可以使用方法getCol来计算列中元素的总和。 因此，您的calculateTotal函数版本可以重写为
var grid = $("#list"); var calculateTotal = function() { var totalAmount = grid.jqGrid('getCol','amount',false,'sum'), totalTax = grid.jqGrid('getCol','tax',false,'sum'); grid.jqGrid('footerData','set',{name:'TOTAL',amount:totalAmount,tax:totalTax}); }
现在来看你的主要问题。 您使用单元格编辑模式。 如果函数calculateTotal （您的原始版本或我的简化版本）将在“amount”或“tax”的单元格中的一个处于编辑模式时被调用，则calculateTotal将被读取带有元素的HTML片段而不是带有数字的字符串，计算将失败。
我创建了一个每秒调用calculateTotal 的小型demo 。 因此，如果您点击“金额”或“税”列中的任何单元格，您将看到页脚行0将显示为总和。 因此，使用cellsubmit:'clientArray'的演示与使用cellsubmit:'remote'原始代码具有相同的问题。
要解决这个问题，可以在求和过程中使用jqGrid的data参数：
var grid = $("#list"); var calculateTotal = function() { var gridData = grid.jqGrid('getGridParam','data'), i=0,totalAmount=0,totalTax=0; for (;i
你会在这里找到相应的固定演示。 在您的最终代码中，您可以删除
setInterval(calculateTotal, 1000);
我仅用于演示目的，仅刷新afterSaveCell事件处理程序中的页脚。
更新 ：如果使用远程数据，则无法使用data参数。 因此，如果需要，必须从元素获取数据。 我创建了另一个演示 ，演示了如何做到这一点。 calculateTotal的代码会更长：
var getColumnIndexByName = function(grid,columnName) { var cm = grid.jqGrid('getGridParam','colModel'); for (var i=0,l=cm.length; i tr.jqgrow > td:nth-child("+(i+1)+")",grid[0]).each(function() { totalAmount += Number(getTextFromCell(this)); }); i=getColumnIndexByName(grid,'tax'); $("tbody > tr.jqgrow > td:nth-child("+(i+1)+")",grid[0]).each(function() { totalTax += Number(getTextFromCell(this)); }); grid.jqGrid('footerData','set',{name:'TOTAL',amount:totalAmount,tax:totalTax}); };
谢谢你，我的解决方案就是应用并改变你所放的东西
var ListTabla="ListFormatos"; var request="../../tabla_general/tabla_general_mantenimiento.php"; var getColumnIndexByName = function(grid,columnName) { var cm = $("#"+grid).jqGrid('getGridParam','colModel'); for (var i=0,l=cm.length; i tr.jqgrow > td:nth-child("+(i+1)+")",$("#"+grid)[0]).each(function() { total+= Number(getTextFromCell(this)); }); return total; } function fn_jqgrid_history_provisiones_trabajador(tra_idtra,fecha_inicio,fecha_fin) { jQuery("#"+ListTabla).jqGrid({ url:request+"?action=search_history_provisiones_trabajador&tra_idtra="+tra_idtra+"&fecha_inicio="+fecha_inicio+"&fecha_fin="+fecha_fin, async: false, datatype: 'json', colNames:['','ID','SECTOR','BASICO','ASIG. FAM','DIAS','BASE','REM. COMP.','BASE MES','P.CTS','P.GRAT.','P.VAC.','MES','ANIO','PORC.','SAL.VAC.','SAL.GRAT.'], colModel:[ {name:'act', index:'act', width:50, resizable:true, align:"center",hidden:true}, {name:'id', index:'id', width:50, resizable:true, align:"center",hidden:true}, {name:'sec_detsec', index:'sec_detsec', width:80}, {name:'hpr_suebas', index:'hpr_suebas', width:60}, {name:'hpr_asifam', index:'hpr_asifam', width:50}, {name:'hpr_numdia', index:'hpr_numdia', width:30}, {name:'hpr_bashpr',index:'hpr_bashpr', width:60}, {name:'hpr_remcom,',index:'hpr_remcom', width:60}, {name:'hpr_basmes', index:'hpr_basmes', width:60}, {name:'hpr_provcts', index:'hpr_provcts', width:60}, {name:'hpr_provgrat', index:'hpr_provgrat', width:60}, {name:'hpr_provvac', index:'hpr_provvac', width:60}, {name:'hpr_meshpr', index:'hpr_meshpr', width:30}, {name:'hpr_aniohpr,',index:'hpr_aniohpr', width:30}, {name:'hpr_salpor', index:'hpr_salpor', width:50}, {name:'hpr_salval_vac', index:'hpr_salval_vac', width:50}, {name:'hpr_salval_grat', index:'hpr_salval_grat', width:50} ], pager: '#paginacion', rowNum:10, rowList:[10,20,30], sortname: 'ID', ondblClickRow:function(rowid, iRow, iCol, e) { obj=jQuery("#"+ListTabla).jqGrid('getRowData',rowid); } , sortorder: 'desc', editurl:request, viewrecords: true, caption: 'Provisiones', //rownumbers: true, height: 250, rowheight: 280, footerrow : true, gridComplete: function () { calculateTotal(ListTabla); }, afterSaveCell: function (rowid, name, val, iRow, iCol) { //calculateTotal(ListTabla); } }).navGrid('#paginacion',{add:false,edit:false, del:false}); jQuery("#"+ListTabla).jqGrid('bindKeys', {"onEnter":function( rowid ) { obj=jQuery("#"+ListTabla).jqGrid('getRowData',rowid); } } ); }
如果您只想重新计算总数，可以使用触发器在afterSaveCell事件中重新加载网格。 像这样：
afterSaveCell: function (rowid, name, val, iRow, iCol) { jQuery("#list11").jqGrid('setGridParam',{datatype:'local',loadonce:true}).trigger('reloadGrid'); }