0

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

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

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

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

2 回答 2

0

您不需要销毁 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 定义 Grid：

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().

Gridtransport.read定义为参数 ( transport.read.data)date加上从 读取的值DateTimePicker。

于 2013-07-15T17:51:52.943 回答
0

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

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

于 2013-07-15T14:25:21.623 回答