jqGrid-将表单数据提交到jqGrid并让jqGrid使用这些参数获取数据

Question

I've got a jqGrid in which I have a custom button like:

.jqGrid('navButtonAdd', '#pager', {
        caption: "", buttonicon: "ui-icon-note",
        onClickButton: function () {

            //Show Modal Dialog Form
            $('#selectParams').dialog().show();

            //Load Grid
            $("#grid").setGridParam({ datatype: 'json' }).trigger('reloadGrid', [{ page: 1 }]);

        }, position: "last", title: "Specify Parameters", cursor: "pointer"

And a modal dialog that looks like:

<div id="selectParams" hidden="hidden">
    <form action="/Controller/Action" method="get">
        Start Date <input type="date" name="startDate" /><br/>
        End Date <input type="date" name="endDate" /><br/>
        Value 1 <input type="text" name="val1" /><br/>
        Value 2 <input type="text" name="val2" /><br/>
        <input type="submit" value="Submit" />
    </form>
</div>

Instead of the form making a request to the server, I need to have it pass these parameters (startDate, endDate, va1, val2) to the jqGrid somehow and have the grid make a request to the server passing these values (ideally as a POST request).

Just as a side note, the grid is initially loaded with datatype: 'local' so it doesn't fetch anything. When the form values are selected and submitted, the grid is reloaded with datatype: 'json' to fetch values from the server.

Any leads on how to go about doing that would be really appreciated. Thanks!

Answer 1

Figured it out. Perhaps not in the best way but it does work well enough to suit my needs:

I changed the form to:

<div id="selectParams" hidden="hidden">
    <form>
        Start Date <input type="date" id="startDateId"/><br/>
        End Date <input type="date" id="endDateId" /><br/>
        Value 1 <input type="text" id="val1Id" /><br/>
        Value 2 <input type="text" id="val2Id" /><br/>
    </form>
</div>

Added some global javascript variables:

//Global Variables
var startDate;
var endDate;
var val1;
var val2;

And changed the custom button as follows:

.jqGrid('navButtonAdd', '#pager', {
            caption: "", buttonicon: "ui-icon-note",
            onClickButton: function () {

                $('#selectParams').dialog({
                    modal: true,
                    draggable: false,
                    resizable: false,
                    title: 'Specify Parameters',
                    width: 225,
                    height: 325,
                    buttons: {
                        "Submit": function () {
                            //Get values and pass them as parameters with the jqGrid AJAX request
                            startDate = $('#startDateId').val();
                            endDate = $('#endDateId').val();
                            val1 = $('#val1Id').val();
                            val2 = $('#val2Id').val();
                            $('#grid').setGridParam({ postData: { startDate: startDate, endDate: endDate, val1 : val1, val2: val2 } });

                            $(this).dialog("close");
                        }
                    },
                    close: function () {
                        //Load grid if parameters are filled out
                        if (startDate != undefined && endDate != undefined && val1 != undefined && val2 != undefined) {
                            $("#grid").setGridParam({ datatype: 'json' }).trigger('reloadGrid', [{ page: 1 }]);
                        }
                    }
                }).show();

            }, position: "last", title: "Specify Parameters", cursor: "pointer"

Hopefully this helps someone else. Cheers!