Kendo UI Grid，将页面设置为 1 没有双重回发答案

【问题标题】：Kendo UI Grid, setting page to 1 without double postbackKendo UI Grid，将页面设置为 1 没有双重回发
【发布时间】：2015-11-13 23:29:33
【问题描述】：

我在页面上有以下代码。

问题在于，当单击“MainSearchSubmit”按钮时，“RefreshGrid()”方法会导致对服务器进行 2 次后续 ajax 调用。我发现这是因为对“datasource.read()”和“datasource.page(1)”的调用都在回发到服务器（它们都在运行 dataSource 的 read() 方法）。

单击搜索按钮时，我仍然需要将网格页面设置为 1，因为否则有人可以在第 3 页，然后单击搜索按钮，获取更新的结果，但仍然在第 3 页。他们需要单击搜索按钮时重置到第 1 页。

另外我还需要运行read()，否则更新的参数没有传递，数据也没有刷新。

我发现了类似的帖子，有些人建议使用 .query() 方法。我试过了（代码在“RefreshGrid()”方法中注释掉了），但这也导致了 2 个帖子到服务器。

关于如何解决此问题的任何想法？

代码：

    <script>
         $(document).ready(InitializeNDCMapping);

         function InitializeMainMapping() {
             $("#MainSearchSubmit").click(function (e) {
             RefreshGrid();
             e.preventDefault();
         });
      }

        function RefreshGrid() {
             $("#MainListGrid").data("kendoGrid").dataSource.read();
             $("#MainListGrid").data("kendoGrid").dataSource.page(1);

             //Defunct code
             //var dataSource1 = $("#NDCListGrid").data("kendoGrid").dataSource;

             //dataSource.query({
             //   read: dataSource1.read(),
             //   page: dataSource1.Page(1),
             //   pagesize: dataSource1.PageSize(25)
             //});
         }
    </script>

    <div class="search-buttons">
         <input type="submit" value="Search" id="MainSearchSubmit" />
         <input type="button" value="Reset" onclick="ResetMainSearch()" />
    </div>
    <div>
        @(Html.Kendo().Grid<BackOffice.ViewModels.NDCItem>()
                .Name("MainListGrid")
                .Filterable()
                .Pageable(p => p.PageSizes(new int[] { 25, 50, 100 }).Input(true)
                                .Messages(m=>m.Empty("No Main-Ingredient found")).Numeric(false))
                .Sortable()
                .Navigatable()
                .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
                .Columns(columns =>
                {
                    columns.Bound(l => l.NDCCode).Title("NDC Code").Width("5%")
                        .ClientTemplate(@Html.DialogFormLink("#=NDCCode#", Url.Action("NDCMappingEdit", new { NDCCode = "#=NDCCode#", mainMultumDrugCode = "#=MainMultumDrugCode#", drugId = "#=DrugId#", isMapped = "#=IsMapped#" }), "NDC Mapping", "", "", "NDCDialogLink", "1100", "600", "").ToHtmlString());
                    columns.Bound(l => l.Name).Title("Generic Name").Width("15%");
                    columns.Bound(l => l.MainCode).Hidden();
                    columns.Bound(l => l.MainId).Hidden();
                    columns.Bound(l => l.MainDescription).Title("Main Description").Width("15%");
                    columns.Bound(l => l.MainIngredientCode).Hidden();
                    columns.Bound(l => l.MainIngredient).Title("Main Ingredient").Width("15%");
                    columns.Bound(l => l.MainNumAmount).Title("Main Qty").Width("5%");
                    columns.Bound(l => l.MainNum).Title("Main Unit").Width("5%");
                    columns.Bound(l => l.MainDenomAmount).Title("Main Denom").Width("5%");
                    columns.Bound(l => l.MainDenom).Title("Main Denom Unit").Width("5%");
                    columns.Bound(l => l.IsMapped).Title("Mapped").Width("5%").Filterable(false).Sortable(false)
                        .ClientTemplate("<input type='checkbox' name='selected_#=MainCode#' class='chkbx select'" + "#= IsMapped ? 'checked' : ''#" + " />")
                        .HtmlAttributes(new { @class = "center", @onclick = "return false" })
                        .HeaderHtmlAttributes(new { @class = "center" });                                
                })
                .AutoBind(false)
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .ServerOperation(false)
                    .Read(read => read.Action("MainList_Read", "Drug").Data("getRouteParams"))
                    .Model(model =>
                    {
                        model.Field(f => f.MainCode).Editable(false);
                        model.Field(f => f.MainName).Editable(false);
                        model.Field(f => f.MainDCCode).Editable(false);
                        model.Field(f => f.MainId).Editable(false);
                        model.Field(f => f.MainDescription).Editable(false);
                        model.Field(f => f.MainIngredientCode).Editable(false);
                        model.Field(f => f.MainIngredient).Editable(false);
                        model.Field(f => f.MainNumAmount).Editable(false);
                        model.Field(f => f.MainNum).Editable(false);
                        model.Field(f => f.MainDenomAmount).Editable(false);
                        model.Field(f => f.MainDenom).Editable(false);
                        model.Field(f => f.IsMapped).Editable(false);
                    })
                    .PageSize(25)
                    .Events(events => events.Error("MainRead_Error"))

                )
            )
    </div>

【问题讨论】：

标签： kendo-grid kendo-datasource

【解决方案1】：

过去，当我遇到类似问题时，几乎总是因为单击处理程序注册了两次，即使用户单击了一次按钮，处理程序也执行了两次。

在哪里调用 InitializeMainMapping()？另外，我不确定这是否是复制和粘贴错误，但 InitializeMainMapping() 缺少结束 }。当用户单击按钮时，您是否收到任何 javascript 错误？

只需一些想法即可帮助您入门。

【讨论】：

感谢您回复我。 InitializeMainMapping() 上缺少的括号是复制粘贴错误，我修复了它。当我只做 $("#MainListGrid").data("kendoGrid").dataSource.read() 时，只对服务器进行一次 ajax 调用。当额外的 $("#MainListGrid").data("kendoGrid").dataSource.page(1) 完成时，它会进行第二次 ajax 调用。但我仍然需要设置该页面。
很高兴您能够找到解决方案。 :)

【解决方案2】：

我能够找到解决方案。如果页面已经设置为 1 并且您运行...

grid.dataSource.page(1);

这会导致读取。否则，如果页面尚未设置为 1，并且您运行上面的代码，则不会导致读取。所以问题的解决方案如下。

if (grid.dataSource.page() != 1) {
    grid.dataSource.page(1);
}

grid.dataSource.read( {parameter: "value"} );

在这里找到了这个解决方案：

KendoUI: resetting grid data to first page after button click

【讨论】：