可以slickgrid页面并显示json

Question

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

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

Answer 1

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>

Answer 2

我编写了一个分页器插件，SlickGrid 增强分页器，它使 SlickGrid 分页使用起来更加容易。完全支持json。请参阅 github 上的这个项目。

Answer 3

//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]);
}

Answer 4

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

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();
});

Answer 5

我已经用 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();
    };
});

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

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