如何避免 jQgrid 初始 AJAX 请求？

Question

我在 jQgrid 上玩得很开心，但现在我需要实现我称之为 "advanced" 的东西，因为我什至不知道这是无意义的还是无法完成但我们开始了。

让我们在一个页面中考虑一个带有 SELECT 元素的页面，该元素稍后会变成 Select2JS，还有一个正常的 INPUT 元素将用于执行搜索。请参见下图（输入尚未显示，因为这是 WIP）。

该页面还包含一个网格 (jQgrid)，如上图所示。我愿意：

首先无需进行任何 AJAX 调用即可加载网格，因为数据将取决于用户使用 Select2JS 或 INPUT 进行搜索所执行的操作。
在 Select2 元素的 select 事件中，我需要动态更改 URL 以便网格重新加载来自服务器的数据。
如果我单击搜索按钮并在输入中输入一些文本，也会发生同样的事情。

我认为 (2) 和 (3) 可以使用描述的方法完成 - 如果我错了请纠正我 - 但是 (1) 呢？如何避免网格为完成数据而进行的初始 AJAX 调用？

网格定义如下：

var manage_form_listing_grid = $("#manage_form_listing");

$(window).on("resize", maximizeGrid(manage_form_listing_grid));

manage_form_listing_grid.jqGrid({
    colNames: ["Actions", "Form Name", "Fax Number", "FileName", "Folder"],
    colModel: [
        {name: "act", template: "actions", width: 115},
        {name: "FormName", search: true, stype: "text"},
        {name: "FaxNumber", search: true, stype: "text"},
        {name: "FormFileName", search: true, stype: "text"},
        {name: "folder", search: true, stype: "text"}
    ],
    cmTemplate: {
        width: 300,
        autoResizable: true
    },
    iconSet: "fontAwesome",
    rowNum: 25,
    guiStyle: "bootstrap",
    autoResizing: {
        compact: true,
        resetWidthOrg: true
    },
    rowList: [25, 50, 100, "10000:All"],
    toolbar: [true, "top"],
    viewrecords: true,
    autoencode: true,
    sortable: true,
    pager: true,
    toppager: true,
    cloneToTop: true,
    hoverrows: true,
    multiselect: true,
    multiPageSelection: true,
    rownumbers: true,
    sortname: "Id",
    sortorder: "desc",
    loadonce: true,
    autowidth: true,
    autoresizeOnLoad: true,
    forceClientSorting: true,
    ignoreCase: true,
    prmNames: {id: "Id"},
    jsonReader: {id: "Id"},
    url: '/ajax/forms/get',
    datatype: "json",
    actionsNavOptions: {
        uploadFormicon: "fa-upload",
        uploadFormtitle: "Upload this form",
        cloneFormicon: "fa-clone",
        cloneFormtitle: "Clone this form",
        archiveFormicon: "fa-archive",
        archiveFormtitle: "Archive this form",
        custom: [
            {
                action: "uploadForm", position: "first", onClick: function (options) {
                    alert("Upload Form, rowid=" + options.rowid);
                }
            },
            {
                action: "cloneForm", position: "first", onClick: function (options) {
                    $.ajax({
                        url: '/ajax/forms/clone_by_id',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            form_id: options.rowid
                        }
                    }).done(function () {
                        $grid.trigger("reloadGrid", {fromServer: true});
                        toastr["success"]("The form has been cloned.", "Information");
                    }).error(function (response) {
                        toastr["error"]("Something went wrong, the form could not be cloned.", "Error");
                        console.error(response);
                    });
                }
            },
            {
                action: "archiveForm", position: "first", onClick: function (options) {
                    alert("Archive Form, rowid=" + options.rowid);
                }
            }
        ]
    },
    formDeleting: {
        url: '/ajax/forms/delete',
        delicon: [true, "left", "fa-scissors"],
        cancelicon: [true, "left", "fa-times"],
        width: 320,
        caption: 'Delete form',
        msg: 'Are you sure you want to delete this form?',
        beforeShowForm: function ($form) {
            var rowids = $form.find("#DelData>td").data("rowids");

            if (rowids.length > 1) {
                $form.find("td.delmsg").html('Are you sure you want to delete all the selected forms?');
            }
        },
        afterComplete: function (response, postdata, formid) {
            if (response.responseText === "true") {
                toastr["success"]("The form was deleted successfully.", "Information");
            } else {
                toastr["error"]("Something went wrong, the form could not be deleted.", "Error");
            }
        }
    },
    navOptions: {
        edit: false,
        add: false,
        search: false
    },
    loadComplete: function () {
        var $self = $(this), p = $self.jqGrid("getGridParam");

        if (p.datatype === "json") {
            // recreate the toolbar because we use generateValue: true option in the toolbar
            $self.jqGrid("destroyFilterToolbar").jqGrid("filterToolbar");
        }
    }
}).jqGrid('navGrid').jqGrid("filterToolbar");

Answer 1

我认为您在创建时应该在网格中使用 datatype: "local" 而不是 datatype: "json"。选项 datatype: "local" 将阻止 Ajax 请求并忽略 url 选项。另一方面，在 Select2 元素的 select 事件或事件处理程序 $(document).on("click", $load_form, ... 内部，您应该再添加一行，将 datatype 重置为 "json"。例如中的代码可以修改为

$(document).on("click", $load_form, function (ev) {
    var p = $questions_grid.jqGrid("getGridParam");
    p.datatype = "json"; // !!! the new line
    p.url = "/ajax/questions/get/" + $("#load_form").data("formid");
    $questions_grid.trigger("reloadGrid");
});

如何避免 jQgrid 初始 AJAX 请求？

How to avoid jQgrid initial AJAX request?

javascript

jquery

jqgrid

free-jqgrid