如何获取json格式的KendoGrid显示数据？答案

【问题标题】：How to get the displayed data of KendoGrid in json format?如何获取json格式的KendoGrid显示数据？
【发布时间】：2012-05-06 15:54:49
【问题描述】：

我有一个kendoGrid，我想在过滤和排序后从中取出JSON 我该如何实现？

类似以下，

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 )

非常感谢任何帮助！

【问题讨论】：

小提琴会有所帮助，但这能让你到任何地方吗？ console.log( $("#grid").data("kendoGrid").dataSource.options.data );

标签： javascript jquery json kendo-ui kendo-grid

【解决方案1】：

我想你正在寻找

var displayedData = $("#YourGrid").data().kendoGrid.dataSource.view()

然后将其字符串化如下：

var displayedDataAsJSON = JSON.stringify(displayedData);

希望这会有所帮助！

【讨论】：

完美！！！谢谢！！！ :) 在我的应用程序中通过 api 挖掘查看您的示例后，我使用了 $("#YourGrid").data().kendoGrid.dataSource.data() 和 $("#YourGrid").data().kendoGrid。 dataSource.at(index) :)
如何获取应用了当前过滤器的数据源（所有页面）？
你不能，你可以通过$('#YourGrid').data().kendoGrid.dataSource.total()来获取所有记录的数量，当有分页应用的记录只是获取该特定页面。
嗨，我无法获得剑道网格的显示数据。在我的情况下，我有三个级别的网格。在第二和第三级网格数据源中，如果我使用 .toJSON() 分配数据，则网格数据源不会更新。如果我不使用 .toJSON() 那么我在取消期间我无法恢复更改。你能告诉我解决方案吗

【解决方案2】：

如果你想得到过滤数据的所有页面你可以使用这个：

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;

确保在尝试应用过滤器之前检查是否存在过滤器，否则 Kendo 会抱怨。

【讨论】：

有什么更新可以更有效地获取这些数据吗？在处理大型数据集 (+5k) 时，运行这样的查询时会出现明显的延迟。我认为由于已经为当前页面计算了视图，因此它应该可以随时用于所有页面
很好，这完全适合我。我只是在拉数据源，想知道为什么当我在网格中查看我的记录时它只显示 1 条记录，但是当我从我的数据源查看相同的记录时它显示 5。这让它工作了！谢谢楼主！
很高兴它有帮助。

【解决方案3】：

获取网格中所有行的计数

$('#YourGridName').data("kendoGrid").dataSource.total()

获取特定的行项目

$('#YourGridName').data("kendoGrid").dataSource.data()[1]

获取网格中的所有行

$('#YourGridName').data("kendoGrid").dataSource.data()

Json 到网格中的所有行

JSON.stringify($('#YourGridName').data("kendoGrid").dataSource.data())

【讨论】：

非常喜欢。会参考这个。
如何选择和获取特定的行项？

【解决方案4】：

类似这样，仅显示当前正在查看的数据。还扩展了网格以在整个应用程序中提供这些功能。

 /**
 * 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;
    }
}

【讨论】：

【解决方案5】：

对于 JSON 部分，有一个辅助函数可以帮助提取 JSON 格式的数据：

var displayedData = $("#YourGrid").data().kendoGrid.dataSource.view().toJSON()

编辑：由于剑道网格行为导致上述方法出现一些错误后，我发现这篇文章解决了这个问题： Kendo DataSource view not always return observablearray

【讨论】：