Kendo ui 如何显示/隐藏网格？

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

如果在这之后用户选择了另一个日期，我必须销毁前一个网格，以便在找到新选择的日期的事件记录时使用下一个网格

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

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

根据，这将从网格中删除所有事件处理程序等。
之后，您只需要将其从DOM中删除，即

---

$（“#网格”）.remove（）
您不需要破坏网格或数据源。相反，捕获日期上的任何更改并调用
数据源。读取

步骤：


根据您的需要定义日期时间选择器（或仅定义日期选择器或日历）

HTML:


定义用于从服务器检索事件的数据源。假设处理请求的
url
是
GetEvents
，它在请求中接收一个名为
date
的参数，该参数是事件的日期。示例
GetEvents？日期=周一+七月+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
});


使用以前的数据源定义网格：

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");

因此，诀窍是在
DateTimePicker
中定义一个
change
事件处理程序：每次更改日期时，它都会触发一个
change
事件，在该事件中调用
grid.read（）

网格
transport.read
定义为参数（
transport.read.data
）
date
加上从
DateTimePicker
读取的值。请不要创建和销毁网格。如果网格的结构总是相同的（从您对问题的描述中可以看出），只需更改与网格关联的数据源中的过滤条件即可。它速度更快，内存消耗更少，而且编程更容易。所以我应该“销毁”它的内部数据源吗？。。。如何做到这一点。。。如何访问内部数据源？要访问数据源，您可以执行
$（“#网格”）.data（“kendoGrid”）.datasource
，但请不要破坏任何内容，只需更改过滤条件或重新读取数据源即可。如何从服务器获取数据？您能展示一下您的网格和数据源定义吗？然后我可以告诉你如何使用你的代码。编辑包含它的原始帖子。网格必须重新显示，所以我想，正如OnaBai提到的那样，最好不要将其从DOM中完全删除。我只是想让它变得不可侵犯，主要是为了防止新选择的日期不涉及数据库的任何“事件”记录…谢谢OnaBai。。。但我在解释我的处境时可能犯了一个错误。。。应用程序已经在做这些了。我正在根据新日期获取新数据。。。一切正常。。。只是我需要知道如何干净地删除网格，使其从应用程序窗口消失，或者使用基于新日期的新数据替换为新网格。所以你说我必须用相同的DOM元素重新创建一个新的网格？不，我要说你没有犯任何错误。我知道你已经有了一些我无法得到的代码，为什么还要痴迷于破坏网格。相信我，这将导致您的问题，您的应用程序将变慢。为什么
DatePicker
的
change
事件中的
ds.read（）
对您来说不够？这将使用新日期的事件刷新网格。
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
});

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");