如何更改 jqgrid 寻呼机中的值
how to change values in jqgrid pager
高级开发人员。我是新开发者,对jqgrid不是很了解。
非常感谢您的帮助。
我担心在 jqgrid 中查询大量数据时性能下降。所以我们只从DB中取出rowNum select Box值的数据,以及数据的总计数和个数。
I want to change the values of the pager according to the response
data after querying the condition. (pager value of jqgrid - total,
records...).
服务器响应对象的结构是
data: {
page: {
totalRowCount,
currentPage,
displayRowCount,
totalPage
},
fileInfoDtoList
}
就是这样。
totalRowCount 和 fileInfoDtoList 大小不一样。
fileInfoDtoList 仅包含当前页面 table 中显示的数据。
totalRowCount为实际条件查询时将产生的数据总数。
我尝试使用 setGridParam 更改 lastpage、records、total 并通过使用 getGridParam 将 jsonReader 分配给变量来更改内部值,但实际的 pagerUI 值没有改变。
fileDataGrid.jqGrid({
url: setUrl(),
mtype: "GET",
datatype: "json",
colModel: [
{
label: 'date', name: 'baseDate',
formatter: function (cellValue, options, rowdata) {
let fixedValue = cellValue.substr(0, 4) + "-" +
cellValue.substr(4, 2) + "-" +
cellValue.substr(6, 2);
return $.fn.fmatter.call(this, "date", fixedValue, options, rowdata);
},
formatoptions: {
newformat: "Y-m-d"
}
, align: 'center'
},
{label: 'aa', name: 'diseaseName', align: 'right'},
{label: 'bb', name: 'fileName', align: 'right'},
{label: 'cc', name: 'fileSize', align: 'right'},
{label: 'dd', name: 'fileStateName', align: 'center'},
],
jsonReader: {
records: 'page.totalRowCount',
total:'page.totalPage',
root: 'fileInfoDtoList',
page: 'page.currentPage',
repeatitems: false
},
rowNum: 10,
viewrecords: true,
rownumbers: true,
emptyrecords: 'No Datas',
loadonce: false,
sortable: 'true',
pager: '#pager',
rowList: [10, 20, 30],
//paging event area
onPaging: function (pgButton) {
console.log(pgButton);
setTimeout(function () {
$.ajax({
url: setUrl(),
method: 'get',
success: function (data) {
console.log(data);
let rowNum = $("#fileDataCollectJqGrid").getGridParam('rowNum');
let currentPage = $("#fileDataCollectJqGrid").getGridParam('page');
let lastPage = $("#fileDataCollectJqGrid").getGridParam('lastpage');
let totalrows = $("#fileDataCollectJqGrid").getGridParam('totalrows');
console.log(" rowNum : " + rowNum + " currentPage : " + currentPage + " lastPage : " + lastPage + " totalrows : " + totalrows );
fileDataGrid.jqGrid('clearGridData');
let jsonReader = fileDataGrid.jqGrid('getGridParam', 'jsonReader');
console.log(jsonReader);
jsonReader.total = 999;
console.log(fileDataGrid.jqGrid('getGridParam', 'jsonReader'));
fileDataGrid.jqGrid("setGridParam", {
datatype: "local",
data: data.fileInfoDtoList,
lastpage: data.page.totalPage,
records: data.page.totalRowCount,
});
fileDataGrid.trigger('reloadGrid');
}
})
}, 0);
}
});
按钮事件区
$("#searchButton").click(function () {
$.ajax({
url: setUrl(),
method: "get",
success: function (data) {
console.log(setUrl());
console.log(data);
let $fileDataCollectJqGrid = $('#fileDataCollectJqGrid');
$fileDataCollectJqGrid.jqGrid('clearGridData');
$fileDataCollectJqGrid.jqGrid("setGridParam", {
datatype: "local",
data: data.fileInfoDtoList,
totalRows: data.page.totalPage,
});
$fileDataCollectJqGrid.trigger('reloadGrid');
}
});
});
最初我设置jqgrid时,它知道pager的值是根据jsonReader的设置值来设置的。
我尝试在条件查询后设置pager的值,但是在pagerUI部分没有改值
并且我尝试用setGridParam改变寻呼机的总计(total Page Count)和记录(total Row Count),但是我改变了lastpage,totalrows等等。但是,总行数已根据列表的大小发生变化。
fileDataGrid.jqGrid("setGridParam", {
datatype: "local",
data: data.fileInfoDtoList, <<--changed total (total Page Count) value of pager as this size of list.
lastpage: data.page.totalPage,
records: data.page.totalRowCount,
});
我自己解决了问题!
当我调用数据请求方法时,刚刚将 post 数据设置为 setGridParam。
我已经在 jsonReader 中设置了寻呼机数据。这样我就可以解决我的问题了。
$('#fileDataCollectJqGrid').jqGrid('setGridParam', {
postData: {
collectId: "${collectId}",
baseDate: $('#dateInput').val(),
diseaseCode: $('#diseaseSelect').val(),
fileName: $('#fileNameInput').val(),
stateCode: $('#collectionStatus').val()
},
}).trigger('reloadGrid');
高级开发人员。我是新开发者,对jqgrid不是很了解。
非常感谢您的帮助。 我担心在 jqgrid 中查询大量数据时性能下降。所以我们只从DB中取出rowNum select Box值的数据,以及数据的总计数和个数。
I want to change the values of the pager according to the response data after querying the condition. (pager value of jqgrid - total, records...).
服务器响应对象的结构是
data: {
page: {
totalRowCount,
currentPage,
displayRowCount,
totalPage
},
fileInfoDtoList
}
就是这样。
totalRowCount 和 fileInfoDtoList 大小不一样。
fileInfoDtoList 仅包含当前页面 table 中显示的数据。
totalRowCount为实际条件查询时将产生的数据总数。
我尝试使用 setGridParam 更改 lastpage、records、total 并通过使用 getGridParam 将 jsonReader 分配给变量来更改内部值,但实际的 pagerUI 值没有改变。
fileDataGrid.jqGrid({
url: setUrl(),
mtype: "GET",
datatype: "json",
colModel: [
{
label: 'date', name: 'baseDate',
formatter: function (cellValue, options, rowdata) {
let fixedValue = cellValue.substr(0, 4) + "-" +
cellValue.substr(4, 2) + "-" +
cellValue.substr(6, 2);
return $.fn.fmatter.call(this, "date", fixedValue, options, rowdata);
},
formatoptions: {
newformat: "Y-m-d"
}
, align: 'center'
},
{label: 'aa', name: 'diseaseName', align: 'right'},
{label: 'bb', name: 'fileName', align: 'right'},
{label: 'cc', name: 'fileSize', align: 'right'},
{label: 'dd', name: 'fileStateName', align: 'center'},
],
jsonReader: {
records: 'page.totalRowCount',
total:'page.totalPage',
root: 'fileInfoDtoList',
page: 'page.currentPage',
repeatitems: false
},
rowNum: 10,
viewrecords: true,
rownumbers: true,
emptyrecords: 'No Datas',
loadonce: false,
sortable: 'true',
pager: '#pager',
rowList: [10, 20, 30],
//paging event area
onPaging: function (pgButton) {
console.log(pgButton);
setTimeout(function () {
$.ajax({
url: setUrl(),
method: 'get',
success: function (data) {
console.log(data);
let rowNum = $("#fileDataCollectJqGrid").getGridParam('rowNum');
let currentPage = $("#fileDataCollectJqGrid").getGridParam('page');
let lastPage = $("#fileDataCollectJqGrid").getGridParam('lastpage');
let totalrows = $("#fileDataCollectJqGrid").getGridParam('totalrows');
console.log(" rowNum : " + rowNum + " currentPage : " + currentPage + " lastPage : " + lastPage + " totalrows : " + totalrows );
fileDataGrid.jqGrid('clearGridData');
let jsonReader = fileDataGrid.jqGrid('getGridParam', 'jsonReader');
console.log(jsonReader);
jsonReader.total = 999;
console.log(fileDataGrid.jqGrid('getGridParam', 'jsonReader'));
fileDataGrid.jqGrid("setGridParam", {
datatype: "local",
data: data.fileInfoDtoList,
lastpage: data.page.totalPage,
records: data.page.totalRowCount,
});
fileDataGrid.trigger('reloadGrid');
}
})
}, 0);
}
});
按钮事件区
$("#searchButton").click(function () {
$.ajax({
url: setUrl(),
method: "get",
success: function (data) {
console.log(setUrl());
console.log(data);
let $fileDataCollectJqGrid = $('#fileDataCollectJqGrid');
$fileDataCollectJqGrid.jqGrid('clearGridData');
$fileDataCollectJqGrid.jqGrid("setGridParam", {
datatype: "local",
data: data.fileInfoDtoList,
totalRows: data.page.totalPage,
});
$fileDataCollectJqGrid.trigger('reloadGrid');
}
});
});
最初我设置jqgrid时,它知道pager的值是根据jsonReader的设置值来设置的。 我尝试在条件查询后设置pager的值,但是在pagerUI部分没有改值
并且我尝试用setGridParam改变寻呼机的总计(total Page Count)和记录(total Row Count),但是我改变了lastpage,totalrows等等。但是,总行数已根据列表的大小发生变化。
fileDataGrid.jqGrid("setGridParam", {
datatype: "local",
data: data.fileInfoDtoList, <<--changed total (total Page Count) value of pager as this size of list.
lastpage: data.page.totalPage,
records: data.page.totalRowCount,
});
我自己解决了问题! 当我调用数据请求方法时,刚刚将 post 数据设置为 setGridParam。 我已经在 jsonReader 中设置了寻呼机数据。这样我就可以解决我的问题了。
$('#fileDataCollectJqGrid').jqGrid('setGridParam', {
postData: {
collectId: "${collectId}",
baseDate: $('#dateInput').val(),
diseaseCode: $('#diseaseSelect').val(),
fileName: $('#fileNameInput').val(),
stateCode: $('#collectionStatus').val()
},
}).trigger('reloadGrid');