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のページネーションをはるかに簡単に使用できるページャープラグインであるSlickGridEnhancementPagerを作成しました。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 を使って約 1 週間コーディングしてきましたが、並べ替えとフィルターのコードを自分で書かなければならないことがわかりました。ソースを調べたところ、ページングが組み込まれていることを示すものは何も見つかりません。コードを書くのにかなりの時間を費やすことになりますが、それだけの価値があるようです。

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 に答える