Javascript 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: 'd-M-Y' }, 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'));
        }
    }
}

jQuery（文档）.ready（函数（）{
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”，note2，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“3”，invdate:“2007-09-01”，name:“test3”，note3，amount:“400.00”，tax:“30.00”，total:“430.00”}，
{id:“4”，invdate:“2007-10-04”，name:“test”，note4，amount:“200.00”，tax:“10.00”，total:“210.00”}，
{id:“5”，invdate:“2007-10-05”，name:“test5”，note5，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“6”，invdate:“2007-09-06”，name:“test”，note6，amount:“400.00”，tax:“30.00”，total:“430.00”}，
{id:“7”，invdate:“2007-10-04”，name:“test7”，note7，amount:“200.00”，tax:“10.00”，total:“210.00”}，
{id:“8”，invdate:“2007-10-03”，name:“test8”，note8，amount:“300.00”，tax:“20.00”，total:“320.00”}，
{id:“9”，invdate:“2007-09-01”，name:“test”，note9，amount:“400.00”，tax:“30.00”，total:“430.00”}，
{id:“10”，invdate:“2007-09-08”，name:“test10”，note10，amount:“500.00”，tax:“30.00”，total:“530.00”}，
{id:“11”，invdate:“2007-09-08”，name:“test11”，note11，amount:“500.00”，tax:“30.00”，total:“530.00”}，
{id:“12”，投资日期：，名称：“总计”，注释：，金额：，税款：，总计：}
];
风险值网格=$（“#列表”）；
grid.jqGrid({
cellsubmit:'远程'，
cellurl:“/Example/GridSave”，
数据类型：“本地”，
数据：mydata，
mtype:“POST”，
ColName:['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'，formattoptions:{newformat:'d-M-Y'}，sortable:false}，
{name:'name'，index:'name'，可编辑：true，宽度：90，可排序：false}，
{name:'amount'，index:'amount'，editable:true，width:70，格式化程序：'number'，align:'right'，sortable:false}，
{名称：'tax'，索引：'tax'，可编辑：true，宽度：60，格式化程序：'number'，对齐：'right'，可排序：false}，
{name:'total'，index:'total'，editable:true，width:60，formatter:'number'，align:'right'，sortable:false}，
{name:'note'，index:'note'，宽度：100，可排序：false}
],
rowNum:1000，
寻呼机：“#寻呼机”，
viewrecords：是的，
巫师：“描述”，
描述：“afterSaveCell问题”，
高度：“100%”，
是的，
gridComplete:函数（）{
计算总数（）；
},
afterSaveCell:函数（rowid、名称、val、iRow、iCol）{
计算总数（）；
}
});
});
函数计算器总计（）{
var totalAmount=0；
var totalTax=0；
var grid=jQuery（“列表”）；
var id=grid.jqGrid（'getdataid'）；
对于（变量i=0；i

---

提前谢谢

我发现您的代码中有两个问题。第一个更具装饰性，但正确的解决方案可以简化未来的许多事情

第一个问题是手动添加“总计”行作为网格数据的一部分，并在

calculateTotal

函数中计算行中的值。更好的方法是使用

footerrow:true

选项，该选项在网格底部添加额外的行，该行将与网格数据不混合。对于基于服务器的数据，您可以使用来自服务器的JSON或XML响应的

userdata

部分，并另外使用

userDataOnFooter:true

将

userdata

jqGrid参数中的数据保存到页脚行。对于“本地”数据类型，可以使用方法设置（或获取）页脚中的数据。此外，该方法还可用于计算列中元素的总和。因此，您的

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

（您的原始版本或我的简化版本）将在“金额”或“税款”单元格中的一个单元格处于编辑模式时调用，则

calculateTotal

将被读取带有

元素的HTML片段，而不是带有数字的字符串，计算将失败

我每秒创建一个调用

calculateTotal

。因此，如果您单击 “金额”或“税款”列中，您将看到页脚中的第0行将显示为总和。因此，使用

cellsmit:'clientArray'

的演示与使用

cellsmit:'remote'

的原始代码中的问题相同

要解决此问题，可在求和计算期间使用jqGrid的

数据

参数：

var grid = $("#list");
var calculateTotal = function() {
    var gridData = grid.jqGrid('getGridParam','data'),
        i=0,totalAmount=0,totalTax=0;
    for (;i<gridData.length;i++) {
        var rowData = gridData[i];
        totalAmount += Number(rowData.amount);
        totalTax += Number(rowData.tax);
    }
    grid.jqGrid('footerData','set',{name:'TOTAL',amount:totalAmount,tax:totalTax});
}

我仅用于演示，并在

afterSaveCell

setInterval(calculateTotal, 1000);

var getColumnIndexByName = function(grid,columnName) {
    var cm = grid.jqGrid('getGridParam','colModel');
    for (var i=0,l=cm.length; i<l; i++) {
        if (cm[i].name===columnName) {
            return i; // return the index
        }
    }
    return -1;
},
getTextFromCell = function(cellNode) {
    return cellNode.childNodes[0].nodeName === "INPUT"?
           cellNode.childNodes[0].value:
           cellNode.textContent || cellNode.innerText;
},
calculateTotal = function() {
    var totalAmount = 0, totalTax = 0,
        i=getColumnIndexByName(grid,'amount');
    $("tbody > 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<l; i++) {
    if (cm[i].name===columnName) {
        return i; // return the index
    }
}
return -1;
},

getTextFromCell = function(cellNode) {
return cellNode.childNodes[0].nodeName === "INPUT"?
       cellNode.childNodes[0].value:
       cellNode.textContent || cellNode.innerText;
},

calculateTotal = function(grid) {   

total_hpr_suebas = retorna_suma('hpr_suebas',grid);
total_hpr_asifam = retorna_suma('hpr_asifam',grid);
total_hpr_bashpr = retorna_suma('hpr_bashpr',grid);
total_hpr_remcom = retorna_suma('hpr_remcom',grid);
total_hpr_basmes = retorna_suma('hpr_basmes',grid);
total_hpr_provcts = retorna_suma('hpr_provcts',grid);
total_hpr_provgrat = retorna_suma('hpr_provgrat',grid);
total_hpr_provvac=retorna_suma('hpr_provvac',grid);

    $("#"+grid).jqGrid('footerData','set',{sec_detsec:'TOTAL',hpr_suebas:total_hpr_suebas,hpr_asifam:total_hpr_asifam,hpr_bashpr:total_hpr_bashpr,hpr_remcom:total_hpr_remcom,hpr_basmes:total_hpr_basmes,hpr_provcts:total_hpr_provcts,hpr_provgrat:total_hpr_provgrat,hpr_provvac:total_hpr_provvac});
};

retorna_suma=function(campo,grid)
{
    total=0;
    i=getColumnIndexByName(grid,campo);
    $("tbody > 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: function (rowid, name, val, iRow, iCol) 

        {
          jQuery("#list11").jqGrid('setGridParam',{datatype:'local',loadonce:true}).trigger('reloadGrid');
        }