8

このSlickgridの例が機能しない理由は明らかですか。基本的に、列をクリックしてもソートされません。

        var grid;

        var columns = [
        {id:"title", name:"Title", field:"title", sortable: true},
        {id:"duration", name:"Duration", field:"duration", sortable: true},
        {id:"%", name:"% Complete", field:"percentComplete", sortable: true},
        {id:"start", name:"Start", field:"start", sortable: true},
        {id:"finish", name:"Finish", field:"finish", sortable: true},
        {id:"effort-driven", name:"Effort Driven", field:"effortDriven", sortable: true}
        ];

        var options = {
            enableCellNavigation: true,
            enableColumnReorder: false
        };

        $(function() {
            var data = [];
            for (var i = 0; i < 500; i++) {
                data[i] = {
                    id: i,
                    title: "Task " + i,
                    duration: "5 days",
                    percentComplete: Math.round(Math.random() * 100),
                    start: "01/01/2009",
                    finish: "01/05/2009",
                    effortDriven: (i % 5 == 0)
                };
            }

            var dataView = new Slick.Data.DataView();

            grid = new Slick.Grid("#myGrid", dataView, columns, options);
            function comparer(a,b) {
                var x = a[sortcol], y = b[sortcol];
                return (x == y ? 0 : (x > y ? 1 : -1));
            }

            var sortcol = "json_number";
            var sortdir = 1;
            grid.onSort.subscribe(function(e, args) {
                sortdir = args.sortAsc ? 1 : -1;
                sortcol = args.sortCol.field;

                // using native sort with comparer
                // preferred method but can be very slow in IE with huge datasets
                dataView.sort(comparer, args.sortAsc);
            });
            dataView.beginUpdate();
            dataView.setItems(data);
            dataView.endUpdate();
            grid.invalidate();
            grid.render();

            $("#myGrid").show();
        })
4

2 に答える 2

17

このリスナーを追加してみてください。これにより、行がシャッフルされたときにグリッドが再レンダリングされます。

dataView.onRowsChanged.subscribe(function(e,args) {
    grid.invalidateRows(args.rows);
    grid.render();
});

ここでの元の例：http：//mleibman.github.com/SlickGrid/examples/example4-model.html

于 2011-04-28T22:24:45.310 に答える
5

最初の質問を確実に解決する受け入れられた答えはすでにありますが、Slickgridのサブスクライブメソッドを処理する際のスタックオーバーフローの一般的な間違いを指摘したいと思います。

他のほとんどの例のように、グリッドが「grid」と呼ばれる変数にあると想像してみましょう。これは、受け入れられた回答や賛成された回答のほとんどで発生します。

dataView.onRowsChanged.subscribe(function(e,args) {
    grid.invalidateRows(args.rows);
    grid.render();
});

また

 grid.onSort.subscribe(function(e, args){
      var cols = args.sortCols;

      data.sort(function(dataRow1, dataRow2){
           for (var i = 0, l = cols.length; i < l; i++){
                var field = cols[i].sortCol.field;
                var sign = cols[i].sortAsc ? 1 : -1;
                var value1 = dataRow1[field], value2 = dataRow2[field];
                var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;

                if (result != 0) return result
           }

           return 0;
      })

      grid.invalidate()
      grid.render()
 })

この例は意図したとおりに機能しますか？はい、そうです..特定の状況下で。

SlickgridをSlickgridのリストに追加する関数を想像してみましょう。

var m_grids = []
function anyName(){
    var grid;
    //..run code
    //..run subscribe
    m_grids.push(grid)
}

では、サブスクライブ関数に可変グリッドが含まれているときに、サブスクライブ関数を呼び出そうとするとどうなりますか？サブスクライブが実行されたグリッドに関係なく、最後に割り当てられたグリッドに影響を与えるだけです。これらの関数をサブスクライブする正しい方法は、argsパラメーターを使用することです。

dataView.onRowsChanged.subscribe(function(e,args) {
    args.grid.invalidateRows(args.rows);
    args.grid.render();
});

また

 grid.onSort.subscribe(function(e, args){
      var cols = args.sortCols;

      args.grid.getData().sort(function(dataRow1, dataRow2){
           for (var i = 0, l = cols.length; i < l; i++){
                var field = cols[i].sortCol.field;
                var sign = cols[i].sortAsc ? 1 : -1;
                var value1 = dataRow1[field], value2 = dataRow2[field];
                var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;

                if (result != 0) return result
           }

           return 0;
      })

      args.grid.invalidate()
      args.grid.render()
 })

通常、同じページに複数のSlickgridが必要なため、これはマイナーなケースかもしれませんが、非常に簡単に修正できるのに、なぜそれを間違えるのでしょうか:)

于 2015-07-01T06:47:41.640 に答える