Question

继承了我正在尝试解决的Kendo应用程序并且真的停留在这里。我有一个绑定到数据源两次的搜索页面，无法弄清楚这一点。

这是网格代码：

@(Html.Kendo().Grid<Flex.Models.AddEntryEditModel>()
    .Name("EventGrid")
    .Columns(columns =>
    {
        columns.Command(command =>
        {
            command.Edit(); command.Destroy(); command.Custom("Copy and Create").Click("copyNAddEvent")
                        .HtmlAttributes(new {@class = "copynadd"}); 
        }).Width(169).Title("Action");
        columns.Bound(e => e.id).Hidden();
        columns.Bound(e => e.contactName).Width(180).Title("Contact Name");
        columns.Bound(e => e.contactEmail).Width(180).Title("Contact Email");
        columns.Bound(e => e.contactPhone).Width(180).Title("Contact Phone #");
    })


    .HtmlAttributes(new { style = "height:500px;" })
    .ToolBar(tools => { tools.Excel(); })
    .Excel(excel => excel
        .AllPages(true)
        .FileName("FlexData.xlsx")
        .Filterable(true)
        .ProxyURL(Url.Action("Excel_Export_Save", "Home"))
    ).Events(x => x.ExcelExport("onExcelExport"))

    .DataSource(datasource => datasource
            .Ajax()
            .ServerOperation(false)
            .Model(model => {
                model.Id(p => p.id);
                model.Field(p => p.application).Editable(false);
                model.Field(p => p.componentType).Editable(false);
                model.Field(p => p.creditedOrSupportEquipment).Editable(false);
                model.Field(p => p.driverType).Editable(false);
                model.Field(p => p.eventName).Editable(false);
                model.Field(p => p.PMinterval).Editable(false);
                model.Field(p => p.PMName).Editable(false);
                model.Field(p => p.scheduledMaintenance).Editable(false);
                model.Field(p => p.equipmentOperatingHours).Editable(false);
                model.Field(p => p.companyName).Editable(false);
                model.Field(p => p.plantName).Editable(false);
                model.Field(p => p.supportingEventDocument).Editable(false);
            })
            .Read(read => read.Action("SearchEvents", "Home").Data("FillSearchParms"))
            .Update(update => update.Action("UpdateEvent", "Home").Data("FillUpdateParms"))
            .Destroy(update => update.Action("DeleteEvent", "Home"))
            .PageSize(10)
            .Events(e => 
            { 
                e.RequestEnd("onRequestEnd");
            })
    )
)

这是我的搜索按钮的jQuery：

        $("#SearchBtn").click(function (e) {
        e.preventDefault();

        if (!validator.validate()) {
            return;
        }

        var descr = $("#Description").data("kendoEditor");
        //debugger;

        $.ajax(
            {
                type: "POST",
                url: "/Home/SearchEvents",
                datatype: "json",
                data: {
                    id: null,
                    eventDate: $("#EventDate").val(),
                    eventDateTo: $("#EventDateTo").val(),
                    application: defaultDD("Application"),
                    componentType:  defaultDD("ComponentType"),
                    creditedOrSupportEquipment: defaultDD("CreditedOrSupportEquipment"),
                    equipmentID: $("#EquipmentId").val(),
                    driverType: defaultDD("DriverType"),
                    eventName: defaultDD("EventName"),
                    make: $("#Make").val(),
                    model: $("#Model").val(),
                    PMinterval: defaultDD("PMInterval"),
                    PMName: defaultDD("PMName"),
                    scheduledMaintenance: defaultDD("ScheduledMaintenance"),
                    equipmentOperatingHours: defaultDD("equipmentOperatingHours"),
                    companyName: defaultDD("CompanyName"),
                    plantName: defaultDD("PlantName"),
                },
                success: function (result) {
                    $("#searchEventGrid").attr("style", "display: block;");
                    //debugger;
                    var grid = $("#EventGrid").data("kendoGrid");

                    grid.dataSource.read();
                    grid.refresh();
                    e.preventDefault();

                    $("#searchbar").data("kendoPanelBar").collapse($("li.k-state-active"));
                },
                error: function (xhr, txt) {
                    //debugger;
                    var err = xhr.responseText.match(/.*<body.*>([\s\S]*)<\/body>.*/);;
                    custom_alert(err, "Error!");
                }
            }
        )
    })

当我单击搜索按钮时，它第一次返回正确的记录集，然后刷新并返回整个数据集。较新的剑道，无法弄清楚第二个来电的来源。

Answer 1

您的代码存在的问题是，在点击按钮时，您正在对服务器进行 ajax 调用，以获取数据并致电grid.dataSource.read();请注意，这将再次拨打电话服务器并加载数据。这就是为什么你觉得网格有两次绑定的原因。

实际上不需要显式的 ajax 调用，因为你在配置中指定了datasource => datasource.Ajax()，因此Kendo已经这样做了。您需要做的就是定义一个函数（我希望您已经完成），它将设置您的搜索参数： -

function FillSearchParms(){
    return{
       id: null,
       eventDate: $("#EventDate").val(),
       eventDateTo: $("#EventDateTo").val(),
       ....and so on
    };
}

最后在按钮点击处理程序中，简单地调用 read 方法根据搜索参数加载网格： -

$("#SearchBtn").click(function (e) {
     var grid = $("#EventGrid").data("kendoGrid");
     grid.dataSource.read();
});

此外，请注意没有需要调用刷新方法。

剑道UI网格绑定两次

1 个答案: