3

我们希望在请求页面时将数千条记录加载到客户端并显示前 25 条记录。然后，用户应该能够翻阅记录或按列重新排序列表或按各个列中的数据进行过滤。我们选择一次性将数据加载到客户端，因为我们宁愿在页面请求中加载更重的负载，并在之后查看或编辑数据时获得更快的性能。我在 SlickGrid 网站上看不到任何分页示例。SlickGrid 是否有分页功能，或者它是如此轻量级，我必须自己实现它？有没有人有任何链接或示例可以分享，可以让我领先一步？

我们将使用的数据将是 json 数据。

4

5 回答 5

9

SlickGrid/slick.dataview.js 中有分页支持

dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#myGrid", dataView, columns, options);
dataView.setPagingOptions({
   pageSize: 25,
});
var pager = new Slick.Controls.Pager(dataView, grid, $("#myPager"));

您还需要在页面上的某个位置进行渲染。

<div id="myPager"></div>
于 2011-06-01T15:16:44.310 回答
2

我编写了一个分页器插件SlickGrid Enhancement Pager，它使 SlickGrid 分页更容易使用。它完全支持json。请在 github 上查看此项目。

于 2012-10-01T07:40:14.577 回答
1

这也让我困惑了一段时间，直到我得到下面的代码：

grid = new Slick.Grid("#myGrid", data, columns, options);
grid.onSort.subscribe(function(e,args) {
    sortcol = args.sortCol;
    sortAsc = args.sortAsc;

    alert("Sort On " + sortcol.field);

    if (sortAsc == true) {
        data.sort(function (a, b) {
            var nameA = a[sortcol.field].toLowerCase(), nameB = b[sortcol.field].toLowerCase()
            if (nameA < nameB) //sort string ascending
                return -1
            if (nameA > nameB)
                return 1
            return 0 //default return value (no sorting)
        });
    } else {
        data.reverse(function (a, b) {
            var nameA = a[sortcol.field].toLowerCase(), nameB = b[sortcol.field].toLowerCase()
            if (nameA < nameB) //sort string ascending
                return -1
            if (nameA > nameB)
                return 1
            return 0 //default return value (no sorting)
        });
    }

    grid.invalidateAllRows();
    grid.render();
});
于 2011-02-02T08:02:30.477 回答
1 
//set columns
var columns = [
    {
        id: "mid",
        name: "MID",
        field: "mid",
        cssClass: "cell-title",
        sortable: true,
        sorter:comparer
    },
    {
        id: "id",
        name: "ID",
        field: "id",
        cssClass: "cell-title",
        sortable: true,
        sorter:NumericSorter
    },

在上面设置分拣机

var sortcol = "title";
var sortdir = 1;
var percentCompleteThreshold = 0;
var searchString = "";

this.grid.onSort = function(sortCol, sortAsc) {
    sortdir = sortAsc ? 1 : -1;
    sortcol = sortCol.field;
    this.dataView.sort(sortCol.sorter);
    this.grid.render();

}.bind( this );

function comparer(a,b) {
    var x = a[sortcol], y = b[sortcol];
    return sortdir * (x == y ? 0 : (x > y ? 1 : -1));
}

// Define some sorting functions
function NumericSorter(a, b) {
  return sortdir *  (a[sortcol]-b[sortcol]);
}
于 2011-08-25T21:19:55.073 回答
0

我已经用 slickgrid 编码大约一个星期了，发现我必须自己编写排序和过滤代码。查看源代码，我没有看到任何表明内置分页的内容。您将花费大量时间为其编写代码，但这似乎是值得的。

我使用 ajax/json 加载了 30,000 行数据，它在不到 1 秒的时间内加载和排序。我不知道它是否会有帮助，但这是我调用加载网格的方法。它在客户端排序并在服务器上过滤：

$.getJSON(baseUrl + '/_GetNewHires?filter=' + filter, function (data) {
    grid = new Slick.Grid($("#NewHiresGrid"), data, columns, options);

    grid.onSort = function (sortCol, sortAsc) {
        sortdir = sortAsc ? 1 : -1;
        sortcol = sortCol.field;

        if (sortAsc == true)
            data.sort(compare);
        else
            data.reverse(compare);

        grid.render();
    };
});

当调用 sort 方法时，绑定到网格（数据）的数组被重新排列，然后使用 .render() 方法重新加载网格。为了分页，您必须拥有一个包含所有数据的数组和一个显示数据的数组。

他在这里确实有一个分页示例，但是作为 javascript 业余爱好者，我很难理解。

于 2010-11-16T20:25:41.503 回答