javascript 如何强制刷新充满远程数据的 Kendo UI 网格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15936258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to force a refresh on a Kendo UI Grid filled with remote data?
提问by Uriel Arvizu
I have a Kendo UI Grid filled with info from a remote source and I want to force a refresh on the information displayed after a Kendo UI Window on my website is closed.
我有一个包含来自远程源的信息的 Kendo UI 网格，我想强制刷新我网站上的 Kendo UI 窗口关闭后显示的信息。
I tried this:
我试过这个：
var grid = $("#usuariosGrid").data("kendoGrid");
grid.refresh();
But it didn't work, this is how I create the Kendo UI Grid:
但它没有用，这就是我创建 Kendo UI 网格的方式：
var ds = new kendo.data.DataSource({
transport: {
read: {
url: root_url + "/usuario/index",
dataType: "json"
}
},
schema: {
data: "Response",
total: "Count"
},
serverPaging: false,
pageSize: 2
});
$("#usuariosGrid").kendoGrid({
pageable: {
refresh: true
},
columns: [
{ field: "UsuarioId", title: "ID", width: "100px" },
{ field: "Nombre", title: "Nombre", width: "100px" },
{ field: "ApellidoP", title: "Apellido Paterno", width: "100px" },
{ field: "ApellidoM", title: "Apellido Materno", width: "100px" },
{ command: [{ text: "Editar", click: editFunction }, { text: "Eliminar", click: deleteFunction }], title: " ", width: "200px" }
],
dataSource: ds
});
I looked at the documentation but didn't come across a method to do this.
我查看了文档，但没有找到执行此操作的方法。
On a side note, I've been wondering how to display a loading animation on the Kendo UI Grid while the data is being loaded into it, it is shown after it's been loaded and I'm clicking through the pages of the grid, but when there's no data, it looks collapsed and I would like to display a loading animation to make it look filled while the info is being loaded.
附带说明一下，我一直想知道如何在将数据加载到 Kendo UI 网格中时在 Kendo UI 网格上显示加载动画，它在加载后显示并且我正在单击网格页面，但是当没有数据时，它看起来折叠了，我想显示加载动画，使其在加载信息时看起来充满。
采纳答案by OnaBai
As @NicholasButtler suggests, use ds.read()for forcing a read. Depending on your DataSourcedefinition, the result might be cached. Check thison enabling/disabling transport.read.cache.
正如@NicholasButtler 建议的那样，ds.read()用于强制读取。根据您的DataSource定义，结果可能会被缓存。检查这对启用/禁用transport.read.cache。
For replacing the loading image redefine the class .k-loading-image. Example:
对于替换加载图像重新定义类.k-loading-image。例子：
.k-loading-image {
background-image:url('http://24.media.tumblr.com/cfa55f70bbc5ce545eed804fa61a9d26/tumblr_mfpmmdCdWA1s1r5leo1_500.gif')
}
EDITIn order to guarantee that you have space enough for displaying the image add the following style definition:
编辑为了保证您有足够的空间来显示图像，请添加以下样式定义：
#grid .k-grid-content {
min-height: 100px;
}
Fiddle example here : http://jsfiddle.net/OnaBai/nYYHk/1/
回答by Mat
I had problems with the loading image not showing when loading remote data, but I noticed it was only on certain grids.
我在加载远程数据时没有显示加载图像的问题，但我注意到它仅在某些网格上。
Turns out, if you configure the grid with: scrollable: falseoption, the loading image shows as expected. There's no need to have a min-heightin the CSS and there's no need to have a scrollable grid if you're also paging.
事实证明，如果您使用以下scrollable: false选项配置网格，加载图像会按预期显示。有没有需要有一个min-height在CSS，而且也没有必要有一个滚动的网格，如果你还分页。
