jqGrid - 将表单数据提交到 jqGrid 并让 jqGrid 使用这些参数获取数据
jqGrid - Submit form data to jqGrid and have jqGrid fetch data using those params
我有一个 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"
希望这对其他人有帮助。干杯!
我有一个 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"
希望这对其他人有帮助。干杯!