Làm thế nào để có được dữ liệu được hiển thị của KendoGrid ở định dạng json?

Question

Tôi có một số kendoGrid và tôi muốn lấy số JSON trong số đó sau khi lọc và sắp xếp làm cách nào để đạt được điều này?

một cái gì đó như sau,

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) 

Cảm ơn sự giúp đỡ nào được đánh giá cao!

Answer 1

Tôi nghĩ rằng bạn đang tìm kiếm

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

Sau đó stringify nó như sau:

var displayedDataAsJSON = JSON.stringify(displayedData); 

Hope this helps!

Answer 2

Nếu bạn muốn để có được tất cả các trang dữ liệu đã lọc bạn có thể sử dụng này:

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; 

Hãy chắc chắn để kiểm tra xem bộ lọc tồn tại trước khi cố gắng áp dụng chúng hoặc Kendo sẽ phàn nàn.

Answer 3

Để có được số lượng của tất cả các hàng trong lưới

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

Để có được sản phẩm hàng cụ thể

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

Để có được tất cả các hàng trong lưới

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

Json để tất cả các hàng trong lưới

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

Answer 4

Đối với phần JSON, có một chức năng helper để trích xuất các dữ liệu ở định dạng JSON có thể giúp:

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

EDIT: sau khi một số lỗi với các phương pháp trên do hành vi lưới kendo, tôi thấy bài viết này giải quyết vấn đề: Kendo DataSource view not always return observablearray

Answer 5

Điều gì đó như thế này, để chỉ hiển thị dữ liệu đang được xem tại thời điểm này. Ngoài ra mở rộng lưới điện để cung cấp các chức năng này trên tất cả các ứng dụng.

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