Question

我有以下问题。我使用Jqgrid的自定义表单，问题是我无法弄清楚如何在添加/编辑/删除时使用不同的功能提交按钮。你能帮助我吗？我可以使用delfunc取得成功。如何将delfunc添加到del表单的提交按钮，并将addfunc函数添加到add的形式提交按钮。

$('#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 DELETE调用URL rest/user/delete。因此，我认为您在后端拥有RESTful服务。要使用HTTP DELETE，您需要将已删除项的id附加到URL，使用DELETE操作并确保没有其他信息（如oper参数）放在HTTP正文中。因此，您可以使用delGridRow。

的现有选项

了解navGrid只需在导航栏中添加一些按钮，如果用户调用方法delGridRow，editGridRow和viewGridRow，这一点非常重要点击相应的按钮。 navGrid的选项看起来像

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

（见the documentation）。 parameters部分是navGrid的真实选项，它会通知navGrid例如哪些按钮应包含在导航栏中。其他选项包括delGridRow，editGridRow，searchGrid和viewGridRow方法的选项，如果用户点击导航栏的相应按钮，则会使用这些方法。要配置“删除”按钮的行为，我们需要指定prmDel参数。参数的值应该是具有属性和的对象 delGridRow方法的回调。请参阅the documentation。

同样地，如果使用formatter: "actions"或inlineNav，则会添加另一个按钮，并且必须使用相应的选项来指定，应使用delGridRow的哪个选项。我发现navGrid的选项很难理解。因此我在免费的jqGrid中引入了另外一种方法，即在jqGrid选项的delGridRow 中formDeleting指定jqGrid中使用的默认选项。因此，最自由的jqGrid看起来像the demo。它使用jqGrid的formEditing，formViewing，searching选项，navGrid的调用不带任何参数或使用少量选项。现在回到你的主要问题。有关详细信息，请参阅the wiki。

如果主要逻辑是明确的，那么将清楚如何配置jqGrid来完全删除你需要的内容。为此，您应指定mtype: "DELETE"选项和ajaxDelOptions: {...}以指定Ajax调用的其他选项。要将ID附加到网址，您可以使用onclickSubmit或beforeSubmit回调（请参阅the answer），但在免费的jqGrid中可以使用url定义为函数（请参阅{{ 3}}）并且具有更易读的代码。因此，我建议您使用值{/ p>的formDeleting选项

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

成功删除后网格会自动重新加载，因为reloadAfterSubmit: true是delGridRow的默认选项（请参阅the answer）。如果使用jqGrid的reloadGridOptions选项，则最后一个选项loadonce: true会很有用。它将强制从服务器重新加载网格。

以配置“添加”和“编辑”按钮的方式相同，您可以使用jqGrid的formEditing选项和值

{
    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 }
}

Jqgrid自定义表单和自定义功能

1 个答案: