How to avoid jQgrid initial AJAX request?

问题

I am having some fun with jQgrid but now I need to achieve something that I am calling "advanced" since I don't even know if this is a non-sense or if it can't be done but here we go.

Let's think in a page with a SELECT element which will turn into a Select2JS later on and also with a normal INPUT element which will be used to perform a search. See image below (the INPUT isn't show yet cause this is WIP).

The page contains also a grid (jQgrid) as you can see on the pic above. I would like to:

Load the grid without the need to make any AJAX call at first because the data will depend on the actions performed by users using the Select2JS or the INPUT for a search.
On the select event of the Select2 element I need to change the URL dynamically so the grid gets reloaded with the data coming from the server.
Same thing will happen if I click on a search button and having some text on the input.

I think (2) and (3) can be done using the approach described here - correct me if I am wrong - but what about (1)? How I can avoid the initial AJAX call made by the grid for fulfill the data?

Here is the grid definition:

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");

回答1:

I think that you should use datatype: "local" instead of datatype: "json" in the grid during creating. The option datatype: "local" will prevent Ajax request and ignore url options. On the other on the select event of the Select2 element or inside of the event handler $(document).on("click", $load_form, ... you should add one more line which reset to the datatype to "json". For example the code from the old answer could be modified to

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

来源：https://stackoverflow.com/questions/48271049/how-to-avoid-jqgrid-initial-ajax-request

标签

javascript

jquery

jqgrid

free-jqgrid