本地数据集上的jqgrid triggerToolbar的替代方法 [英] alternative to jqgrid triggerToolbar on a local dataset

问题描述

我有一个jqgrid显示大量的数据。数据通过jquery ajax调用（jqgrid逻辑之外）从服务器定期检索。将检索到的数据与先前重试的数据进行比较（并将其作为js中的var存储，作为jqgrid的数据）。如果不同，则刷新本地数据，然后触发jqgrid重新加载。 jqgrid数据类型是jsonstring。

这个解决方案工作得很好，除非用户在过滤器工具栏中有一个过滤器值。因为我设置了一个计时器0.1秒来触发loadcomplete事件过滤器，整个网格刷新时，有一个过滤器字符串看起来像这样：

• 在jqgrid中最初显示了20条记录（因为用户正在过滤某列中的某个值）
  
• 刷新了jqgrid，因为从服务器通过分离的ajax调用与存储在浏览器中的不同


• jqgrid将在很短的时间内显示所有新数据
  
• jqgrid过滤器被触发在loadcomplete内。屏幕再次显示20条记录。

它在技术上仍然有效。但有没有办法在网格可视化之前重新应用jsonstring上的本地过滤器？换一种方式，jqgrid只能显示一次，这两个都会加载新的jsonsting，并同时应用放置在过滤器框中的过滤器吗？

感谢
casbby

更新：

我试过Oleg的解决方案之一在重新加载网格时进行过滤。这是演示。只要数据类型是本地的，它就可以很好地工作。我的页面实际上使用数据类型jsonstring重新加载网格。这段代码的功能似乎适用于jsonstring。我希望在外部jquery ajax成功地从服务器获取数据后调用这样的函数。
$ b $ pre $
var searchFiler = $（＃filter）。val（），f;

if（searchFiler.length === 0）{
grid [0] .p.search = false;
$ .extend（grid [0] .p.postData，{filters：}）;
}
f = {groupOp：OR，rules：[]};
f.rules.push（{field：name，op：cn，data：searchFiler}）;
f.rules.push（{field：note，op：cn，data：searchFiler}）;
grid [0] .p.search = true;
$ .extend（grid [0] .p.postData，{filters：JSON.stringify（f）}）;
grid.trigger（reloadGrid，[{page：1，current：true}]）;
}

有人能帮我吗？非常感谢。

解决方案 使用数据类型：jsonstring与使用数据类型：local比较。您可以比较代码的相应部分这里。一个来自数据类型：本地的代码的差异是 addLocalData 和 populateVisible 函数。最后一个函数（ populateVisible ）仅用于虚拟滚动（ scroll：1 或 scroll：true ）。在你的情况下，数据类型：jsonstring和数据类型：local之间的重要区别是调用<$ c在$ 数据类型：local。

的情况下，$ c> addLocalData addLocalData 应用分组和过滤本地数据（请参阅 here ）。此外，它将显示的行的列表剪切到当前页面（参见数据类型：local而不是数据类型：jsonstring。您应该使用 data 来代替 datastr 。您可以使用 localReader 而不是 jsonReader （请参阅 rel =nofollow noreferrer code> localReader 。
$ b

更新：另一个答案我描述过，并包含了演示如何使用 localReader 。

您可以选择将输入数据从服务器返回到标准格式（或以格式从服务器返回数据）。 data 参数应该是具有像 colMode 中列名的属性的命名对象的数组。所以你可以做的仅仅是通过 rows 数组的简单循环，并创建jqGrid所需格式的另一个数组。相应的代码可能如下：
$ b

//让我们使用myImput来获得myImput。行
//你有cm，你用它作为colModel参数的值
var mydata = []，input = myImput.rows，l = input.length，
cmLength = cm。 length，i，j，inputItem，item;
for（i = 0; i inputItem = input [i];
item = {id：inputItem.id};
inputItem = inputItem.cell;
for（j = 0; j item [cm [j] .name] = inputItem [j];
}
mydata.push（item）;

转换后，可以使用 mydata 数组作为 data 参数的值。

I have a jqgrid displaying a large amount data. The data is retrieved from the server periodically via a jquery ajax call (outside of the jqgrid logic). The retrieved data is compared to the data previously retried ( and stored as a var in js. it is served as the data for the jqgrid). if they are different the local data is refreshed, then trigger the jqgrid to reload. the jqgrid datatype is jsonstring.

This solution is working quite well, except when the user have a filter value in the filter toolbar. because i set a timer for 0.1 sec to trigger filter in the loadcomplete event, the whole grid refresh when there is a filter string looks like this:

• 20 records were displayed in the jqgrid originally (because the user is filtering on a certain value in a column)
• jqgrid is refreshed, because the data polled from the server by the separated ajax call is different than the one stored in the browser
• jqgrid will show all the new data for a very short period of time
• jqgrid filter is triggered within loadcomplete. and the screen is showing 20 records again.

it is technically still working. but is there a way to re-apply the filter locally on the jsonstring before the grid is visualised? put in a different way, can the jqgrid to visualise only once, which will both load the new jsonsting and apply the filter that was placed in the filter box before at the same time?

thanks casbby

update:

I have tried one of Oleg's solution to apply filter while reloading the grid. this is demo. it worked perfectly as long as the the datatype is local. my page actually use the datatype jsonstring to reload the grid. This function from the code does seem to apply to jsonstring. i was hoping to call such a function after a external jquery ajax successfully retrieved the data form the server.

function filter() {
            var searchFiler = $("#filter").val(), f;

            if (searchFiler.length === 0) {
                grid[0].p.search = false;
                $.extend(grid[0].p.postData,{filters:""});
            }
            f = {groupOp:"OR",rules:[]};
            f.rules.push({field:"name",op:"cn",data:searchFiler});
            f.rules.push({field:"note",op:"cn",data:searchFiler});
            grid[0].p.search = true;
            $.extend(grid[0].p.postData,{filters:JSON.stringify(f)});
            grid.trigger("reloadGrid",[{page:1,current:true}]);
        }

can someone please help me out? many thanks.

解决方案

There are small differences in the usage of datatype: "jsonstring" in comparing with the usage of datatype: "local". You can compare the corresponding parts of the code here. One from the differences in the code of datatype: "local" is the usage of addLocalData and populateVisible functions. The last function (populateVisible) will be used only in case of virtual scrolling (scroll: 1 or scroll: true). In your case important difference between datatype: "jsonstring" and datatype: "local" is the call of addLocalData in case of datatype: "local".

The function addLocalData apply grouping and filtering of local data (see here). Moreover it cut the list of displayed rows to the current page (see here).

So if the server returns unfiltered data and you need display filtered data then you should use datatype: "local" instead of datatype: "jsonstring". Instead of datastr you should use data. You can need to use localReader instead of jsonReader (see the documentation) or just convert manually the data returned from the server to the format which could be read by default localReader.

UPDATE: In another answer I described and included the demo which shows how localReader can be used.

What you can alternatively do is to convert your input data returned from the server to the standard format (or return the data from the server in the format). The data parameter should be array of named objects with properties like the column names in colMode. So what you can do is just a simple loop through rows array and creating another array in the format which jqGrid required. The corresponding code could be about the following:

// let us you have myImput with myImput.rows
// and you have cm which you use as the value of colModel parameter
var mydata = [], input = myImput.rows, l = input.length,
    cmLength = cm.length, i, j, inputItem, item;
for (i = 0; i < l; i++) {
    inputItem = input[i];
    item = {id: inputItem.id};
    inputItem = inputItem.cell;
    for (j = 0; j < cmLength; j++) {
        item[cm[j].name] = inputItem[j];
    }
    mydata.push(item);
}

After such conversion you can use mydata array as the value of data parameter.

这篇关于本地数据集上的jqgrid triggerToolbar的替代方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！