Jqgrid自定义表单和自定义函数

Question

我有以下问题。我正在为Jqgrid使用自定义表单，问题是我无法解决如何在add/编辑/删除中为submit按钮使用不同的函数。你能帮帮我吗?我可以用delfunc和succes。如何从del表单向按钮submit添加delfunc，从add表单添加函数addfunc以提交按钮。

$('#jqGrid').navGrid("#jqGridPager", {
    edit: true, 
    add: true,
    del: true, 
    refresh: true, 
    view: false,
    addfunc : function(){
       var angajat = new Object();
       angajat.id = null;
       angajat.firstName = "andrei"  //jQuery("#jqGrid").jqGrid('getRowData');
       angajat.lastName = " chivu " //jQuery("#jqGrid").jqGrid('getRowData');
    console.log(angajat);

     $.ajax({
         type: "POST",
         url: "rest/user/add",
         data: JSON.stringify(angajat),
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         contentType: "application/json",
         success: function (data) {
         $("#response").html(JSON.stringify(data));
         }

     });

    },
    delfunc : function (id){

        $.ajax({
            type:"DELETE",
            url:"rest/user/delete",
            data:JSON.stringify(id),
            dataType: "json",
            contentType: "application/json",

        }).done(function( msg ) {
            alert("Content Deleted: " + id);},
            jQuery("#jqGrid").trigger("reloadGrid"));
         },

          editCaption: "Update Employee",
            template: template,
            //onClick: alert("alaaaaa"),
             errorTextFormat: function (data) {
                 return 'Error: ' + data.responseText
             }
         },
         // options for the Add Dialog
         {
            addCaption: "Add new Employee",
            template: template,
            sData: alert("alaaaaa"),
            errorTextFormat: function (data) {
                 return 'Error: ' + data.responseText
             }
         },
         // options for the Delete Dialog

{    
             caption: "Delete the Employee",
             msg: "Are you sure ? ",
             beforeSubmit: alert("alaaaaa"),

             errorTextFormat: function (data) {
                 return 'Error: ' + data.responseText
             },

         });

})；

Answer 1

在大多数情况下，不需要使用delfunc、addfunc、editfunc或viewfunc。该函数是delGridRow、editGridRow和viewGridRow的替代品，但是要替换代码不太小的方法，必须详细了解代码。

我试着解释一下你的问题我是怎么理解的。我将从delfunc的用法开始。您要做的是使用HTTP调用URL rest/user/delete。因此，我假设后端有RESTful服务。要使用HTTP，您需要将已删除项的id附加到URL中，使用DELETE操作，并确保HTTP中没有其他信息(如oper参数)。因此，您可以使用现有的delGridRow选项。

重要的是要理解navGrid只是在导航条中添加一些按钮，如果用户单击相应的按钮，它就调用方法delGridRow、editGridRow和viewGridRow。navGrid的选项看起来就像

$("#gridid").jqGrid('navGrid','#gridpager', {parameters},
    prmEdit, prmAdd, prmDel, prmSearch, prmView);

(见文献资料)。parameters部件是navGrid的实际选项，它通知navGrid应该在导航条上包含哪些按钮。其他选项是delGridRow、editGridRow、searchGrid和viewGridRow方法的选项，用户单击相应的导航条按钮时应该使用这些选项。要配置Delete按钮的行为，我们需要指定prmDel参数。参数的值应该是带有delGridRow方法的属性和回调的对象。见文献资料。

同样，如果使用formatter: "actions"或inlineNav，则会添加另一个按钮，其中一个必须使用相应的选项来指定应该使用的delGridRow选项。我发现navGrid的选项很难理解。正因为如此，我在免费jqGrid中引入了指定jqGrid中delGridRow在formDeleting of jqGrid options中使用的默认选项的替代方法。因此，最免费的jqGrid看起来像演示。它使用formEditing、formViewing、jqGrid的searching选项，而navGrid的调用要么没有任何参数，要么具有少量的选项集。现在回到你的主要问题。有关详细信息，请参阅维基。

如果主要的逻辑是明确的，那么我们就可以清楚地知道如何配置jqGrid来删除您所需要的内容。要做到这一点，您应该指定mtype: "DELETE"选项和ajaxDelOptions: {...}来指定Ajax调用的其他选项。要将id附加到URL中，可以使用onclickSubmit或beforeSubmit回调(参见答案)，但在免费jqGrid中，可以使用定义为函数的url (参见答案)，并具有更多的可读性代码。因此，我建议您使用值为formDeleting的选项

{
    mtype: "DELETE",
    url: function (rowid) {
        return "/rest/user/delete/" + rowid;
    },
    ajaxDelOptions: { contentType: "application/json" },
    serializeDelData: function () {
        return "";
    },
    reloadGridOptions: { fromServer: true },
}

如果删除成功，网格将自动重新加载，因为reloadAfterSubmit: true是delGridRow的默认选项(参见这里)。在使用reloadGridOptions的loadonce: true选项时，最后一个选项jqGrid是有用的。它将强制从服务器重新加载网格。

按照配置Add和Edit按钮的相同方式，您可以使用formEditing选项jqGrid的值

{
    url: function (id, editOrAdd) {
        return "/rest/user/" + (editOrAdd === "add" ? "add" : "edit");
    },
    mtype: function (editOrAdd) {
        return editOrAdd === "add" ? "POST" : "PUT";
    }, 
    serializeEditData: function (postData) {     
        return JSON.stringify(postData);
    },
    serializeEditData: function (postData) {
        var dataToSend = $.extend({}, postData); // make copy of data
        // don't send any id in case of creating new row or to send `0`:
        if (dataToSend.id === "_empty") {
            delete dataToSend.id; // or dataToSend.id = 0; 
        }
        return JSON.stringify(dataToSend);
    },
    ajaxEditOptions: { contentType: "application/json" },
    reloadGridOptions: { fromServer: true }
}