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

jqGrid - Submit form data to jqGrid and have jqGrid fetch data using those params

本文关键字：jqGrid 数据 获取 参数 表单 提交 并让      更新时间：2023-09-26

我有一个jqGrid，其中我有一个自定义按钮，如下所示：

.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"

以及如下所示的模式对话框：

<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>

而不是表单向服务器发出请求，我需要让它以某种方式将这些参数（startDate、endDate、va1、val2）传递给 jqGrid，并让网格向服务器发出请求传递这些值（理想情况下作为 POST 请求）。

作为旁注，网格最初加载了datatype: 'local'，因此它不会获取任何内容。选择并提交表单值后，将使用datatype: 'json'重新加载网格以从服务器获取值。

任何关于如何做到这一点的线索将不胜感激。谢谢！

想

通了。也许不是最好的方式，但它确实工作得很好，可以满足我的需求：

我将表单更改为：

<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>

添加了一些全局 JavaScript 变量：

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

并更改了自定义按钮，如下所示：

.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"

希望这对其他人有所帮助。干杯！

相关文章：