我有一个jqGrid,可从Java Spring后端使用JSON数据加载。我们已经为某些jqGrid进行了此操作,但是我已经将分组添加到了这个新的网格中。到目前为止,它只是将一个级别分组,并且在初始负载下可以做到这一点。
稍后,我们将允许用户连续更改一个字段,除此之外,我们不需要进行其他编辑,这将是一个弹出窗口,其中列出了可供选择的值。
当用户输入新的搜索参数并单击搜索按钮时,问题就会出现-系统获取参数并返回一个新的数据集,然后我希望它像第一个数据集一样出现在(或)网格中做。我的第一个小测试数据集是3条记录,我一直在测试的搜索返回9条记录;网格所做的是在三个原始记录出现的地方显示九个记录中的三个。我注意到分组仍然存在,然后又出现了错误,即分组不再反映数据。
我终于在jqGrid设置参数上设置了grouping:false;那么3条记录正确显示而不进行分组,而9条记录也正确显示。我尝试在将搜索到的数据放入网格中之前将grouping:false设置为网格,然后再将其设置回去,但这仍然使我显示了9条记录中的3条。所以我现在正在做的是:
function processSearchSubmit() {
// show the dialog indicating a new search is underway.
$(".progressDialog").dialog({
bgiframe: true,
title: 'Progress Dialog',
modal: true,
width: "550px",
autoOpen: false,
closeOnEscape: false,
dialogClass: 'dlg-no-close'
});
$(".progressDialog").dialog('open');
setTimeout(function() { // we set a timeout so that IE will display the progress dialog just opened
$.ajax({
url: "/blah/blah/getDataList",
type:'POST',
data: {searchDetails:getSearchDetails()},
dataType: 'json',
emptyrecords: "No records to view",
loadtext: "Loading...",
async: false,
error: function(xhrInstance, status, e){
//alert("error data got back; status ==>" + status);
console.log("error data got back; status ==>" + status);
console.log("error data got back; e ==>" + e);
$(".progressDialog").dialog('close');
return false;
},
//process the response. send event to parent to refresh the whole screen.
success: function(gridData){
var listGrid = $('#listGrid');
$('#listGrid').clearGridData(true);
$('#listGrid').jqGrid('setGridParam', {grouping: false});
$('#listGrid').jqGrid('setGridParam', {data: gridData.rows});
$('#listGrid').trigger('reloadGrid');
listGrid.jqGrid('groupingGroupBy', "salesManager",
{
groupColumnShow: [true]
,groupText: ["<b>{0}</b>"]
,groupOrder: ["asc"]
,groupSummary: [true] // will use the "summaryTpl" property of the respective column
,groupCollapse: false
,groupDataSorted: true
,formatDisplayField: [function(curValue, srcValue, colModelOption, grpIndex, grpObject) {
return srcValue.toFixed(2);
}]
}
);
$('#listGrid').jqGrid('setGridParam', {grouping: true});
$('#listGrid').jqGrid('setGridParam', {userData:gridData.userdata}); // set filterText into param on grid
// because 'search' is implemented as an ajax call returning its 'gridData', the
// "filter text description" (a string describing search parameters, such as "Last 60 days, created by rcook")
// is obtained from that data with the following statement. When the list page is loaded
// with the initialization of the grid itself ($("#listGrid").jqGrid(getGridSettings());, where
// getGridSettings() uses a URL to obtain JSON data to load the grid), we use the jqGrid 'userData'
// parameter to store the filter text, and therefore other code loads this string differently.
$("#filterTextDesc").html(gridData.filterTextDesc);
$(".progressDialog").dialog('close');
}
});
}, 1);
当然,这也是对初始jqGrid设置的分组规范的补充。
我正在寻找的是一种更简单的方法。这样,我将不得不重复分组设置,一次是在jqGrid设置中,另一次是在数据更改时。我真的很想在一个地方可以将JSON数据放入网格中-现在,我第一次加载网格时返回一个JSON结构,而当用户进行搜索时返回一个JSON结构。但是,如果有空的话,我会针对分组问题采取一个更简单的解决方案。
我已经尝试过从奥列格(Oleg)的评论中找到解决方案,并且发现了同样的事情。第一次加载网格时,它具有3条记录,按我的预期进行分组。当我使用后端进行新搜索并尝试用新数据重新加载网格时,摸索的标题保留在原处,并且这三个记录被JSON中返回的9条记录中的3条替换为'success'选项。 Ajax呼叫。我尝试了两件事进行重新加载:
var listGrid = $('#listGrid');
var params = listGrid.jqGrid("getGridParam");
params.data = gridData.rows;
listGrid.trigger("reloadGrid");
和
var listGrid = $('#listGrid');
listGrid.jqGrid("setGridParam", {datatype: 'local', data: gridData.rows}, true);
listGrid.trigger("reloadGrid");
它们彼此具有相同的效果,并且与我错误地使用“ setGridParam”时获得的效果相同。我欢迎其他想法。
也:在“ setGridParam”调用之后停止在Firefox JS调试器中,gridData显示为具有“ rows”和“ userdata”字段的对象,而rows字段则显示一个由9个对象组成的数组。 gridData.rows [0]显示包含新加载的信息的行。当我经过“ clearGridData()”时,浏览器上的网格为空,而当我经过“ reloadGrid”时,旧数据将显示在网格上。