Question

我有一个应用程序列出了任何特定日期发生的事件。应用程序显示DateTimePicker，用户选择日期。如果当天有事件，则会显示一个网格列出找到的记录。

如果之后用户选择了另一个日期，我必须销毁前一个网格，以支持下一个可能需要出现的网格，如果找到了这个新选择日期的事件记录。

执行以下操作是不够的，我需要知道我缺少什么来获得所需的行为：

var grid = $("#grid").data("kendoGrid");
grid.destroy();

Answer 1

根据http://docs.kendoui.com/api/web/grid#methods-destroy，应该从网格中删除所有事件处理程序等之后，您只需要从DOM中删除它，即

$("#grid").remove(); http://jsfiddle.net/giltnerj0/JFy2C/

Answer 2

您既不需要销毁Grid也不需要销毁DataSource。相反，捕获日期的任何更改并调用DataSource.read。

步骤：

根据您的需要定义DateTimePicker（或仅限DatePicker或Calendar）。

HTML：

<input id="date"/>

JavaScript的：

var evDate = $("#date").kendoDateTimePicker({
    value : new Date(),
    change: function () {
        ds.read();
    }
}).data("kendoDateTimePicker");

定义用于从服务器检索事件的DataSource。为了避免处理请求的url是GetEvents，它在请求中收到一个名为date的参数，该参数是事件的日期。示例GetEvents?date=Mon+Jul+15+2013+19%3A44%3A55+GMT%2B0200+(CEST)

JavaScript：

var ds = new kendo.data.DataSource({
    transport: {
        read: {
            url : "GetEvents.php",
            data: function () {
                return { "date": evDate.value() }
            }
        }
    },
    schema   : {
        model: {
            id    : "id",
            fields: {
                event: { type: "string" },
                date : { type: "date" }
            }
        }
    },
    pageSize : 10
});

使用以前的DataSource定义网格：

的JavaScript

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : false,
    pageable  : true,
    columns   : [
        { field: "id", width: 60, title: "#" },
        { field: "date", width: 140, title: "Date", format: "{0:yyyy-MM-dd HH:mm}" },
        { field: "event", width: 400 }
    ]
}).data("kendoGrid");

所以诀窍是在change中定义DateTimePicker事件处理程序：每次更改日期时，它都会触发change事件，您可以在其中调用grid.read()。

网格transport.read定义为参数（transport.read.data）date加上从DateTimePicker读取的值。

如何显示/隐藏网格？

2 个答案: