如何避免jQgrid初始AJAX请求? [英] How to avoid jQgrid initial AJAX request?
问题描述
我在jqgrid上玩得很开心，但是现在我需要实现被我称为高级"的东西，因为我什至不知道这是一个废话还是无法解决，但在这里我们继续
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.
让我们考虑一个页面，其中包含一个SELECT元素，稍后将变为Select2JS，还包含一个正常的INPUT元素，该元素将用于执行搜索.参见下图(输入未显示，因为这是WIP).
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).
该页面还包含一个网格(jQgrid)，如上图所示.我想:
The page contains also a grid (jQgrid) as you can see on the pic above. I would like to:
- 首先加载网格而不需要进行任何AJAX调用，因为数据将取决于用户使用Select2JS或INPUT进行搜索的操作.
- 在Select2元素的select事件上，我需要动态更改URL，以便网格重新加载来自服务器的数据.
- 如果我单击搜索按钮并在输入中输入一些文本，将会发生同样的事情.
我认为(2)和(3)可以使用此处所述的方法来完成-如果我错误-但是(1)呢?如何避免由网格进行的初始AJAX调用来填充数据?
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?
这是网格定义:
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");
推荐答案
我认为您在创建过程中应在网格中使用datatype: "local"而不是datatype: "json".选项datatype: "local"将阻止Ajax请求，并忽略url选项.在Select2元素的select事件上的另一个事件上或在事件处理程序$(document).on("click", $load_form, ...内部，您应该再添加一行，将其重置为datatype至"json".例如，可以将旧答案中的代码修改为
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");
});
这篇关于如何避免jQgrid初始AJAX请求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
