Кнопка jQuery нажимает кнопку обновления jqGrid только один раз
У меня есть следующий код jQuery, который я использую для заполнения jqGrid. Он работает отлично, отправляя на мою страницу ASP.NET MVC при первом нажатии кнопки. Мой
проблема в том, что любые другие клики, предшествующие первому, похоже, запускаются через код jquery при нажатии кнопки, но никогда не попадают на страницу POST. Любые идеи, почему?
<script type="text/javascript">
$(document).ready(function() {
$('#btnSubmit').click(function() {
/* Refreshes the grid */
$("#list").jqGrid({
/* The controller action to get the grid data from */
url: '/CRA/AddPart',
data: { partNumber: "123"},
datatype: 'json',
mtype: 'GET',
/* Define the headers on the grid */
colNames: ['col1', 'col2', 'col3', 'col4'],
/* Define what fields the row columns come from */
colModel: [
{ name: 'col1', index: 'invid', width: 290 },
{ name: 'col2', index: 'invdate', width: 290 },
{ name: 'col3', index: 'amount', width: 290, align: 'right' },
{ name: 'col4', index: 'tax', width: 290, align: 'right'}],
height: 'auto',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
imgpath: '../../Scripts/jgrid/themes/steel/images',
caption: 'Core Return Authorization Contents:',
cellEdit: true
});
});
});
</script>
Ответы
Ответ 1
Причина, по которой сетка не перезагружается, заключается в том, что вы вызываете неправильный метод. Метод jqGrid делает примерно следующее:
- Изучите таблицу, чтобы увидеть, является ли она сеткой; если это так, выйдите.
- Поверните таблицу в сетку.
- Заполните первую страницу данных.
Итак, во второй раз, когда вы вызываете метод, он ничего не делает, как на шаг 1.
Вместо этого вы должны звонить $("#list").trigger("reloadGrid")
во второй и все последующие клики.
Теперь из-за вашего mtype в параметрах сетки сетка собирается сделать GET, а не POST. Поэтому, если POST поступает из самой кнопки (другими словами, это ввод типа submit), вы должны вернуть true, чтобы указать, что отправка должна продолжаться, как обычно.
Ответ 2
Вот решение:
<script type="text/javascript">
var firstClick = true;
$(document).ready(function() {
$('#btnSubmit').click(function() {
if (!firstClick) {
$("#list").trigger("reloadGrid");
}
firstClick = false;
/* Refreshes the grid */
$("#list").jqGrid({
/* The controller action to get the grid data from */
url: '/CRA/AddPart',
data: { partNumber: "123"},
datatype: 'json',
mtype: 'GET',
/* Define the headers on the grid */
colNames: ['col1', 'col2', 'col3', 'col4'],
/* Define what fields the row columns come from */
colModel: [
{ name: 'col1', index: 'invid', width: 290 },
{ name: 'col2', index: 'invdate', width: 290 },
{ name: 'col3', index: 'amount', width: 290, align: 'right' },
{ name: 'col4', index: 'tax', width: 290, align: 'right'}],
height: 'auto',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
imgpath: '../../Scripts/jgrid/themes/steel/images',
caption: 'Core Return Authorization Contents:',
cellEdit: true
});
});
});
</script>
Ответ 3
Поскольку мне нужно POST новых значений для Action для меня, это не работает "reloadGrid".
Я просто удалю все содержимое и снова создаю пустую таблицу.
В случае если я проверяю, есть ли сетка, чтобы скрыть "пустой график" div (он показывает только сообщение). В другом я просто очищаю div, который окружает таблицу, а затем снова добавляю в таблицу. Когда плагин находит пустую таблицу, он снова загружает сетку.
LoadTableData - это функция, которая имеет общую функциональность для создания и загрузки сетки.
Возможно, это решение не изящно, но когда время торопится...
$("#btnDownloadsPerFile").click(function () {
if ($('#chartContainerDownloadsPerFile .ui-jqgrid').length == 0) {
$('#chartContainerDownloadsPerFile .emptyChart').hide();
}
else {
$('#chartContainerDownloadsPerFile').empty();
$('#chartContainerDownloadsPerFile').append('<table id="downloadsPerFileGrid"></table>');
}
LoadTableData("downloadsPerFileGrid", $('#ddlportalOptionsDownloadsPerFile').val(), "downloadsPerFile", $('#ddlTimeOptionsDownloadsPerFile').val(), $('#ddlTimeValuesDownloadsPerFile').val(), $('#ddlCountries').val());
});