web-dev-qa-db-ja.com

JSON形式でKendoGridの表示データを取得する方法は？

私は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 )

どんな助けも大歓迎です！

javascriptjqueryhtmljsonkendo-ui
27
user677607

あなたが探していると思う

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

次に、次のように文字列化します。

var displayedDataAsJSON = JSON.stringify(displayedData);

お役に立てれば！

57
Petur Subev

フィルタリングされたデータのすべてのページを取得したい場合、これを使用できます：

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からエラーが発生します。

19
carter

グリッド内のすべての行のカウントを取得するには

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

特定の行アイテムを取得するには

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

グリッド内のすべての行を取得するには

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

グリッド内のすべての行に対するJSON

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

現時点で表示されているデータのみを表示するこのようなもの。また、グリッドを拡張して、アプリ全体にこれらの機能を提供しました。

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

JSONパートには、JSON形式でデータを抽出するためのヘルパー関数があります。

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

編集：剣道グリッドの動作による上記の方法でのいくつかのエラーの後、私は問題を解決するこの記事を見つけました： Kendo DataSourceビューは必ずしもobservablearrayを返しません

1
AkerbeltZ