Question

我对jQgrid有一些乐趣，但现在我需要实现一些我称之为“高级”的东西，因为我甚至不知道这是否是无意义的，或者是否无法完成但是我们去了

让我们在具有SELECT元素的页面中进行思考，该元素稍后将变为Select2JS，并且还将使用将用于执行搜索的普通INPUT元素。见下图（INPUT尚未显示，因为这是WIP）。

该页面还包含一个网格（jQgrid），如上图所示。我想：

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

我认为（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元素的select事件或事件处理程序$(document).on("click", $load_form, ...内部，您应该再添加一行重置为datatype到"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");
});

如何避免jQgrid初始AJAX请求？

1 个答案: