Javascript 如何以json格式获取KendoGrid的显示数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10324565/
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 get the displayed data of KendoGrid in json format?
提问by Petur Subev
I have a kendoGridand i would like to get the JSONout of it after filtering and sorting how do I achieve this?
我有一个kendoGrid，我想JSON在过滤和排序后摆脱它，我该如何实现？
something like the following,
类似以下内容，
var grid = $("#grid").data("kendoGrid");
alert(grid.dataSource.data.json); // I could dig through grid.dataSource.data and I see a function ( .json doen't exist I put it there so you know what i want to achieve )
Thanks any help is greatly appreciated!
感谢任何帮助，不胜感激！
回答by Petur Subev
I think you're looking for
我想你正在寻找
var displayedData = $("#YourGrid").data().kendoGrid.dataSource.view()
Then stringify it as follows:
然后将其字符串化如下：
var displayedDataAsJSON = JSON.stringify(displayedData);
Hope this helps!
希望这可以帮助！
回答by carter
If you want to get all pages of the filtered data you can use this:
如果要获取过滤数据的所有页面，可以使用以下命令：
var dataSource = $("#grid").data("kendoGrid").dataSource;
var filters = dataSource.filter();
var allData = dataSource.data();
var query = new kendo.data.Query(allData);
var data = query.filter(filters).data;
Make sure to check if filters exist before trying to apply them or Kendo will complain.
在尝试应用过滤器之前，请务必检查过滤器是否存在，否则 Kendo 会抱怨。
回答by Mahib
To get count of all rows in grid
获取网格中所有行的计数
$('#YourGridName').data("kendoGrid").dataSource.total()
To get specific row items
获取特定的行项目
$('#YourGridName').data("kendoGrid").dataSource.data()[1]
To get all rows in grid
获取网格中的所有行
$('#YourGridName').data("kendoGrid").dataSource.data()
Json to all rows in grid
Json 到网格中的所有行
JSON.stringify($('#YourGridName').data("kendoGrid").dataSource.data())
回答by Alex Arvanitidis
Something like this, to display only data that is being viewed at the moment. Also extended the grid to provide these functions all over the app.
像这样的东西，只显示当前正在查看的数据。还扩展了网格以在整个应用程序中提供这些功能。
/**
* Extends kendo grid to return current displayed data
* on a 2-dimensional array
*/
var KendoGrid = window.kendo.ui.Grid;
KendoGrid.fn.getDisplayedData = function(){
var items = this.items();
var displayedData = new Array();
$.each(items,function(key, value) {
var dataItem = new Array();
$(value).find('td').each (function() {
var td = $(this);
if(!td.is(':visible')){
//element isn't visible, don't show
return;//continues to next element, that is next td
}
if(td.children().length == 0){
//if no children get text
dataItem.push(td.text());
} else{
//if children, find leaf child, where its text is the td content
var leafElement = innerMost($(this));
dataItem.push(leafElement.text());
}
});
displayedData.push(dataItem);
});
return displayedData;
};
KendoGrid.fn.getDisplayedColumns = function(){
var grid = this.element;
var displayedColumns = new Array();
$(grid).find('th').each(function(){
var th = $(this);
if(!th.is(':visible')){
//element isn't visible, don't show
return;//continues to next element, that is next th
}
//column is either k-link or plain text like <th>Column</th>
//so we extract text using this if:
var kLink = th.find(".k-link")[0];
if(kLink){
displayedColumns.push(kLink.text);
} else{
displayedColumns.push(th.text());
}
});
return displayedColumns;
};
/**
* Finds the leaf node of an HTML structure
*/
function innerMost( root ) {
var $children = $( root ).children();
while ( true ) {
var $temp = $children.children();
if($temp.length > 0) $children = $temp;
else return $children;
}
}
回答by AkerbeltZ
For the JSON part, there's a helper function to extract the data in JSON format that can help:
对于 JSON 部分，有一个辅助函数可以帮助提取 JSON 格式的数据：
var displayedData = $("#YourGrid").data().kendoGrid.dataSource.view().toJSON()
EDIT: after some errors with the above method due to kendo grid behavior, I found this article that solves the problem: Kendo DataSource view not always return observablearray
编辑：由于剑道网格行为，上述方法出现一些错误后，我发现这篇文章解决了这个问题： Kendo DataSource view not always return observablearray
