jQgrid保存后回调函数答案

【问题标题】：jQgrid after save callback functionjQgrid保存后回调函数
【发布时间】：2013-01-14 11:45:27
【问题描述】：

我创建了一个 jQgrid，并希望它在添加新行或在网格中编辑某些内容后调用回调函数

jQuery("#list1").jqGrid({
        url: '/testGrid/sample?q=5', 
        datatype: "json", 
        mtype: 'POST',
        jsonReader: {
            page: "page",
            total: "total",
            root: "rows",
            records: "records",
            repeatitems: false,
            cell: "name",
            userdata: 'userdata'
        },
        width: 775,
          colNames: ['Salaried Employees', '# of FTEs', 'Budget', 'Actuals to Date', 'Invoice Salary'],
          colModel: [
            {name:'salEmp',index:'salEmp', width:100, align: 'left', width:100,editable:false,editrules:{required:true}},
            {name:'FTE',index:'FTE', width:100, align: 'center', editable:false,required:true,editrules:{required:true,number:true}},
            {name:'Budget',index:'Budget', width:100, align: 'right', width:100,editable:false,required:true,editrules:{required:true,number:true}},
            {name:'actDate',index:'actDate', width:100, align: 'right', align:"right",editable:false,required:true,editrules:{required:true,number:true}},
            {name:'invSal',index:'invSal', width:100, align:"right",editable:true,required:true,editrules:{required:true,number:true}}                                        
           ],
            rowNum: 5,
            rowList: [5, 10, 20],
            autoencode: true,
            ignoreCase: true,
            sortable: false,
            height: '100%',
            pager: jQuery('#pager1'),
            cellEdit: false,
            cellsubmit: 'remote',
            //cellurl: '/testGrid/sample',

            //call onclick of save
            editurl:"/testGrid/sample",
            gridview: true,
            reloadAfterSubmit:true
        })
        // Pager options for Subgrid
        .navGrid('#pager1',{
            add:false,
            edit:false,
            del:true,
            search:false,
            refresh:false,
            deltext: 'Delete'
        });
$('#list1').jqGrid('inlineNav','#pager1',{
            addtext: "Add",
            edittext: "Edit",
            savetext: "Save",
            canceltext: "Cancel",                       
            addParams: { 
                position: "afterSelected"
            },
            addedrow:'last'

        });

【问题讨论】：

您发布的代码不包含任何编辑。您的问题的答案取决于您要使用哪个editing mode：单元格编辑、内联编辑或表单编辑。此外，jqGrid 提供了许多使用内联编辑和表单编辑的选项，例如inlineNav、formatter: "actions" 等。
不同类型的编辑模式和不同的实现变体，你需要的回调是不同的。所以你要先决定哪种编辑模式和哪个实现版本更符合你的项目需求。
@Oleg - 更新问题
@Oleg - 我最终将使用基于单元的编辑，这更像是探索 jQgrid 的 POC
什么是“POC”？正如我在每次编辑实现之前所写的那样，都提供回调，但回调不同。因此，如果您决定改用单元格编辑，则需要使用 another 回调。此外，您应该更准确地指定您需要回调的时间：编辑开始前、开始后直接、保存前、保存后等。

标签： javascript jquery jqgrid

【解决方案1】：

inlineNav 允许指定用于内联编辑的editRow 的回调。要指定回调，可以使用editParams 和addParams.addRowParams 选项：

var myEditOptions = {
        keys: true,
        oneditfunc: function (rowid) {
            alert("row with rowid=" + rowid + " is editing.");
        },
        aftersavefunc: function (rowid, response, options) {
            alert("row with rowid=" + rowid + " is successfuly modified.");
        }
    };

$('#list1').jqGrid('inlineNav','#pager1', {
    addtext: "Add",
    edittext: "Edit",
    savetext: "Save",
    canceltext: "Cancel",                       
    addParams: { 
        position: "afterSelected",
        addRowParams: myEditOptions
    },
    addedrow: "last",
    editParams: myEditOptions
});

【讨论】：

@Varun：我不清楚你不清楚答案的哪一部分。只有documentation 描述了inlineNav 和editRow 的选项，您可以在here 找到这两种方法的完整源代码。