【问题标题】:With the Kendo UI Grid, how do you access the filtered and sorted data?使用 Kendo UI Grid,您如何访问过滤和排序的数据?
【发布时间】:2013-02-19 20:17:46
【问题描述】:

我有一个可排序和可过滤的剑道网格。导出时,我想导出当前可见的所有数据,而不仅仅是当前页面。

$("#grid").data("kendoGrid").dataSource -> 似乎是未排序和未过滤项目的原始列表。在 Chrome 开发者工具中,_data_pristine 似乎是一样的。

还有dataSource.view,但它只是当前页面上可见的10个项目。

有没有办法访问排序列表和/或过滤列表?

更新: 我在剑道论坛上找到了这个答案,看看它是否有帮助。 http://www.kendoui.com/forums/framework/data-source/get-filtered-data-from-paged-grid.aspx

【问题讨论】:

  • 我满足了将过滤后的数据导出为csv的相同要求,如果您设法从网格中获取过滤和排序的数据,请与我们分享,谢谢
  • 奇怪的是在我的系统中 $("#grid").data("kendoGrid").dataSource 只包含当前页面的记录。我的配置是 MVC,数据是从服务器获取的。我怀疑这是差异来源。

标签: kendo-ui kendo-grid


【解决方案1】:

以下是您访问过滤数据的方式:

 var dataSource = $("#grid").data("kendoGrid").dataSource;
        var filteredDataSource = new kendo.data.DataSource({
            data: dataSource.data(),
            filter: dataSource.filter()
        });

        filteredDataSource.read();
        var data = filteredDataSource.view();

然后你就可以遍历数据了:

 for (var i = 0; i < data.length; i++) {
            result += "<tr>";

            result += "<td>";
            result += data[i].SiteId;
            result += "</td>";

            result += "<td>";
            result += data[i].SiteName;
            result += "</td>";

            result += "</tr>";
  }

【讨论】:

  • 我尝试了您的解决方案,但它对我不起作用。 dataSource 仅包含当前页面上显示的记录。也就是说,如果我有 480 条记录显示在 48 页中,每页 10 条,我只得到当前页面上显示的 10 条记录。
  • 您能否发布代码以显示您的网格初始化。
  • 您也可以在网格初始化期间添加的filter 事件上使用它(它将过滤器作为函数中的参数传递)。但是不要使用filter: dataSource.filter(),而是使用filter: arg.filter 将其设置为当前选择的过滤器。
【解决方案2】:

仅查看内存中的本地数据时,大多数答案都适用于 Kendo Grid。如果您使用的是远程数据(例如,您的网格绑定到 ODATA 源) - 您将需要遍历所有页面以获取过滤后的数据。

但是,这样做并不像我想象的那么简单。

我想出了以下几点:

      var filteredRows = [];

      function getResults() {

        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;            

        var totalRowCount = parseInt(dataSource.total().toString());
        var totalPages = Math.ceil(totalRowCount / dataSource.pageSize());

        PageTraverser(dataSource, 1, totalPages, filters, function () {
                        $('#pResults').text('Got ' + filteredRows.length + ' rows of filtered data.');              
        });            
      }

      function PageTraverser(dataSource, targetPage, totalPages, filters, completionFunction) {

        dataSource.query({
          page: targetPage,
          pageSize: 20,
          filter: filters
        }).then(function () {
          var view = dataSource.view();
          for (var viewItemId = 0; viewItemId < view.length; viewItemId++) {
            var viewItem = view[viewItemId];
            filteredRows.push(viewItem);
          }
          targetPage++;
          if (targetPage <= totalPages) {
            PageTraverser(dataSource, targetPage, totalPages, filters, completionFunction);
          } else {
            completionFunction();
          }
        });
      }   

这里的工作示例:http://dojo.telerik.com/@JBoman32768/Ucudi

【讨论】:

    【解决方案3】:

    这是我们目前的做法,尽管有多种选择:

    var myData = new kendo.data.Query(dataSource.data()).filter(dataSource.filter()).data;
    

    您只需调用一个新查询并应用网格已应用的当前过滤器,这将返回与网格完全相同的结果。

    【讨论】:

    • 创建一个。谢谢!
    • 这似乎返回与网格相同的数据。例如,我有 300 行,它们以 10 页的形式显示。当我使用您的示例创建新的myData 时,我只能获取前 10 行数据。问题是我需要能够使用当前过滤器访问所有行。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-10-27
    • 1970-01-01
    • 2016-07-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多