javascript - 如何避免jQgrid初始AJAX请求？

Question

我对 jQgrid 很感兴趣，但现在我需要实现一些我称之为“高级”的东西，因为我什至不知道这是否是无意义的或者是否无法完成，但我们开始吧.

让我们考虑一个带有 SELECT 元素的页面，该元素稍后将变成 Select2JS，并且还带有一个普通的 INPUT 元素，该元素将用于执行搜索。请参见下图(输入尚未显示，因为这是 WIP)。

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

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

我认为(2)和(3)可以使用描述的方法here来完成- 如果我错了请纠正我 - 但是(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 元素的选择事件上或事件处理程序 $(document).on("click", $load_form, ... 内部，您应该再添加一行重置为将数据类型更改为“json”。例如，the old answer中的代码可以修改为

$(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");
});