Question

当我在“au”我的网格上进行服务器过滤并更改页面时，会多次调用控制器：

第一个有0个过滤，
第二个用“a”过滤，
第三个用“au”过滤。

我的表加载了大量数据，因此第一次调用比其他调用更长。我看到网格首先显示第三个调用结果，然后是第二个，最后是第一个调用（此顺序对应于我的控制器由于过滤器参数的响应时间）

为什么要进行所有控制器调用？用我的总过滤器“au”不能只调用我的控制器一次？我该怎么办？

这是我的网格：

$("#" + gridId).kendoGrid({
            selectable: "row",
            pageable: true,
            filterable:true,
            scrollable : true,
            //scrollable: {
            //    virtual: true //false // Bug : Génère un affichage multiple...
            //},
            navigatable: true,
            groupable: true,
            sortable: {
                mode: "multiple", // enables multi-column sorting
                allowUnsort: true
            },
            dataSource: {
                type: "json",
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                serverGrouping:false, // Ne fonctionne pas...
                pageSize: '@ViewBag.Pagination',
                transport: {
                    read: {
                        url: Procvalue + "/LOV",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8"
                    },
                    parameterMap: function (options, type) {
                        // Mise à jour du format d'envoi des paramètres 
                        // pour qu'ils puissent être correctement interprétés côté serveur.
                        // Construction du paramètre sort : 
                        if (options.sort != null) {
                            var sort = options.sort;
                            var sort2 = "";
                            for (i = 0; i < sort.length; i++) {
                                sort2 = sort2 + sort[i].field + '-' + sort[i].dir + '~';
                            }
                            options.sort = sort2;
                        }
                        if (options.group != null) {
                            var group = options.group;
                            var group2 = "";
                            for (i = 0; i < group.length; i++) {
                                group2 = group2 + group[i].field + '-' + group[i].dir + '~';
                            }
                            options.group = group2;
                        }
                        if (options.filter != null) {
                            var filter = options.filter.filters;
                            var filter2 = "";
                            for (i = 0; i < filter.length; i++) {
                                // Vérification si type colonne == string.
                                // Parcours des colonnes pour trouver celle qui a le même nom de champ.
                                var type = "";
                                for (j = 0 ; j < colonnes.length ; j++) {
                                    if (colonnes[j].champ == filter[i].field) {
                                        type = colonnes[j].type;
                                        break;
                                    }
                                }

                                if (filter2.length == 0) {
                                    if (type == "string") { // Avec '' autour de la valeur.
                                        filter2 = filter2 + filter[i].field + '~' + filter[i].operator + "~'" + filter[i].value + "'";
                                    } else { // Sans '' autour de la valeur.
                                        filter2 = filter2 + filter[i].field + '~' + filter[i].operator + "~" + filter[i].value;
                                    }
                                } else {
                                    if (type == "string") { // Avec '' autour de la valeur.
                                        filter2 = filter2 + '~' + options.filter.logic + '~' + filter[i].field + '~' + filter[i].operator + "~'" + filter[i].value + "'";
                                    }else{
                                        filter2 = filter2 + '~' + options.filter.logic + '~' + filter[i].field + '~' + filter[i].operator + "~" + filter[i].value;
                                    }
                                }
                            }
                            options.filter = filter2;
                        }
                        var json = JSON.stringify(options);
                        return json;
                    }
                },
                schema: {
                    data: function (data) {
                        return eval(data.data.Data);
                    },
                    total: function (data) {
                        return eval(data.data.Total);
                    }
                },
                filter: {
                    logic: "or",
                    filters:filtre(valeur)
                }
            },
            columns: getColonnes(colonnes)
        });

这是我的控制器：

[HttpPost]
    public ActionResult LOV([DataSourceRequest] DataSourceRequest request)
    {
        return Json(CProduitsManager.GetProduits().ToDataSourceResult(request));
    }

Answer 1

3对应于初始加载（无过滤）以及在过滤条件中键入的以下内容，类似于kendoAutocomplete但在kendoAutocomplete中有几个选项（时间和控制何时发送请求的最小长度（我在网格中找不到类似的东西）。

如果您的问题是加载了大量数据，我建议您使用pageSize定义中的DataSource来限制传输数据的大小。但是，显然，如果执行查询需要很长时间，这不是解决方案。

Answer 2

在这种情况下，建议创建输入延迟，从而在用户停止输入时执行请求（除非他的输入速度比常规输入慢）。

为了制造延迟，我可以建议您：

    <script type="text/javascript">        
    var globalTimeout = null;
    $('#searchInput').keyup(function () {
        if (globalTimeout != null) clearTimeout(globalTimeout);
        globalTimeout = setTimeout(SearchFunc, 500);
    });   

    function SearchFunc(){  
        globalTimeout = null;
        $('#yourGridName').data('kendoGrid').dataSource.filter({ field:"theField",operator:"startswith",value:$('#searchInput').val() })
    }
    </script>

更改页面时，Web网格服务器分页会触发多个控制器调用

2 个答案: