光滑网格组分页中的所有行

Question

启用分页后，光滑网格会考虑该页面中的行以进行分组。是否可以对所有行进行分组并在分组后应用分页。

例如，请考虑此链接http://mleibman.github.io/SlickGrid/examples/example-grouping。在该单击50K按钮以填充50K行。它显示50K行，持续时间0有一些项目。现在启用页面大小为100的分页。现在持续时间0组可能有一些项目，或者可能不是因为它正在对该页面中的行进行分组（被认为是第100行）

如何使用或更改SlickGrid将Duration 0显示为第一组，并显示考虑分页的所有行。基本上它应该考虑分组和聚合的所有行，然后应用分页？

Answer 1

问题描述

您遇到的问题是由于演示未完成。

如果你查看＆＃34;按持续时间分组＆amp;按价值排序＆＃34;按钮onClick事件，它调用groupByDuration()函数，该函数位于第163行的example-grouping.html文件源中。

如果我们仔细检查这个功能，我们可以快速确定它没有按钮标题所承诺的一件事，那就是：排序。

概念证明

在您拥有linked的演示页面上，按照以下步骤实现预期目标：

1. 点击按钮＆＃34; 50k行＆＃34;。
2. 点击持续时间标题行，使列值排序。
3. 点击按钮＆＃34;按持续时间分组＆amp;按值排序＆＃34;。
4. 在网格的右下角将页面大小切换为100。
5. 导航至第9页，确定此方法有效。

算法化到有效的JavaScript演示代码

// You can skip this step if you have the large volume data already loaded
loadData(50000); 

// No other way around this, since the onSort events are handled natively in SlickGrid
$('.slick-header-columns').children().eq(2).trigger('click'); 

groupByDuration();

dataView.setPagingOptions({ pageSize: 100 }); // see results on page 9 

我还深入研究了这个问题，并找到了一种更简单的网格排序方法。

SlickGrid DataView包含一个名为fastSort()的函数，其签名为：

  

function fastSort（field，ascending）

您需要提供的参数：

• field（string）：您要排序的字段名称，在演示中声明为duration。
• ascending（boolean）：确定排序顺序是升序还是降序。

总结排序

而不是我的示例代码中的hackish jQuery调用，

$('.slick-header-columns').children().eq(2).trigger('click')

您现在可以使用，

dataView.fastSort("duration", true);