加载将jqGrid与新数据结合使用

时间:2018-06-21 19:59:30

标签: jquery jqgrid

我有一个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”时,旧数据将显示在网格上。

0 个答案:

没有答案