如何动态设置网格 post 参数并使用新的 URL 触发重新加载？

Question

我有以下 jQgrid Free（版本：4.15.2）定义：

$(document).ready(function () {
    var $load_form = $("#load_form"),
        $form_id = sessionStorage.getItem('form_id') === null ? 1 : sessionStorage.form_id,
        $questions_grid = $("#questions");

    $(document).on("click", $load_form, function (ev) {
        // get the new form_id value and reload the grid by passing 
        // the new form_id as post parameter for the AJAX request
    });

    $questions_grid.jqGrid({
        url: '/ajax/questions/get/' + $form_id,
        datatype: "json",
        colNames: ['id', 'grid_id', 'seq', 'type', 'text'],
        colModel: [
            {name: 'field_id', index: 'id', width: 100, editable: false, editoptions: {readonly: true, size: 10}},
            {name: 'grid_id', index: 'grid_id', width: 50, editable: false, editoptions: {readonly: true, size: 10}},
            {name: 'field_seq', index: 'seq', width: 45, editable: true, editoptions: {size: 10}},
            {name: 'type', index: 'type', width: 125, editable: false, editoptions: {readonly: true, size: 10}},
            {
                name: 'field_name',
                index: 'text',
                width: 585,
                editable: true,
                edittype: "textarea",
                editoptions: {rows: "5", cols: "45"}
            }
        ],
        autowidth: true,
        iconSet: "fontAwesome",
        rowNum: 100,
        guiStyle: "bootstrap",
        pager: 'questions_pager',
        pgbuttons: false,
        pginput: false,
        sortname: 'seq',
        viewrecords: true,
        caption: "Questions",
        width: 100,
        height: "auto",
        editurl: 'ajax/questions/edit',
        multiselect: true,
        subGrid: false,
        subGridUrl: 'ajax/questions/get_options',
        subGridModel: [{name: ['id', 'text', 'is required'], width: [55, 200, 20]}],
        gridComplete: function () {
            // Don't need the +1 because it includes ".jqgfirstrow"
            var seq_number = this.rows.length;
            $("#next_seq_num").val(seq_number);

            $("#field_seq").empty();
            $("#grid_field_seq").empty();
            for (var i = 1; i <= seq_number; i++) {
                var sel = (i == seq_number) ? 'selected' : null;
                $("#field_seq").append("<option " + sel + ">" + i + "</option>");
                $("#grid_field_seq").append("<option " + sel + ">" + i + "</option>");
            }

            $(window).trigger('resize');
        },
        onSelectRow: function (ids) {
            if (ids !== null) {
                $("#option_field_id").val(ids);
                $(".field_seq_section").hide();

                $.ajax({
                    type: "POST",
                    url: "ajax/questions/get_grid_example/" + ids,
                    success: function (msg) {
                        if (msg !== "") {
                            jQuery('#options_ids').empty();
                        }

                        jQuery('#grid_cells_example').html(msg);
                    }
                });

                edit_question("<?php echo site_url('ajax/questions/get_by_id') ?>/" + ids, false);
            }
        }
    }).jqGrid('hideCol', 'cb');
});

在某些时候，我动态地为 $("#load_form") 设置属性 data-formid 的值。由于 $("#load_form") 是一个按钮（见下面的定义），我想使用新的 $formid 值触发 reloadGrid 事件，这样我就可以从数据库中获得新的数据。

<button type="submit" class="btn btn-default" data-formid="" id="load_form">
   Load form
</button>

几个合乎逻辑的步骤：

设置 data-formid
点击按钮
用 $("#load_form").data("formid")

reloadGrid

我发现了这个：how to set postData in jqgrid AFTER it has been constructed?但我不确定如何应用到我的场景中。

我怎样才能做到这一点？

Answer 1

如果我对您的理解正确，您想要更改 url 参数。单击事件处理程序的代码可能接近于以下内容：

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

如何动态设置网格 post 参数并使用新的 URL 触发重新加载？

How to set grid post param dynamically and trigger reload with the new URL?

javascript

jquery

jqgrid

free-jqgrid