jqgrid自定义窗体和自定义函数

Question

我有以下问题。我正在为 Jqgrid 使用自定义表单，问题是我无法弄清楚如何在 add/edit/delete 中为提交按钮使用不同的功能。你能帮助我吗？我可以成功地使用 delfunc。如何将 delfunc 添加到从 del 表单提交的按钮，以及从 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 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 中介绍了通过 formDeleting of jqGrid options 中的 delGridRow 指定 jqGrid 中使用的默认选项的替代方法。因此，最免费的 jqGrid 看起来像 the demo. It uses formEditing, formViewing, searching options of jqGrid and the call of navGrid is either without any parameters or with the small set of options. Now back to your main problems. See the wiki 以获取更多信息。

如果主要逻辑很清楚，那么就会很清楚如何配置 jqGrid 来执行删除操作。为此，您应该指定 mtype: "DELETE" 选项和 ajaxDelOptions: {...} 来指定 Ajax 调用的其他选项。要将 id 附加到 URL，您可以使用 onclickSubmit 或 beforeSubmit 回调（请参阅 the answer), but in free jqGrid and can use url defined as function (see ）并获得更易读的代码。因此，我建议您使用 formDeleting 选项和值

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

网格将在成功删除后自动重新加载，因为 reloadAfterSubmit: true 是 delGridRow 的默认选项（请参阅 here）。最后一个选项 reloadGridOptions 在使用 jqGrid 的 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自定义窗体和自定义函数

Jqgrid custom form and custom function

jqgrid