在slickgrid上调用sort

时间:2012-03-13 04:18:23

标签: slickgrid

在slickgrid中,我可以使用grid.SetSortColumn(colName,true/false)设置排序列及其排序方向。这仅设置排序标志符号,但不进行排序。有没有办法调用sort事件处理程序。我已经将排序处理程序定义为grid.onSort.subscribe(function(){});

10 个答案:

答案 0 :(得分:11)

您正在观察的行为是正确的。

    grid.setSortColumn(columnId, isAsc);

仅更新排序列上的字形。 在您的情况下,您最初需要对数据进行排序,然后使用setSortColumn更新sortColumn上的字形。您可以重复使用onSort事件中使用的排序器,如下所示:

   var gridSorter = function(columnField, isAsc, grid, gridData) {
       var sign = isAsc ? 1 : -1;
       var field = columnField
       gridData.sort(function (dataRow1, dataRow2) {
              var value1 = dataRow1[field], value2 = dataRow2[field];
              var result = (value1 == value2) ?  0 :
                         ((value1 > value2 ? 1 : -1)) * sign;
              return result;
       });
       grid.invalidate();
       grid.render();
   }
   var grid = new Slick.Grid($gridContainer, gridData, gridColumns, gridOptions);

   //These 2 lines will sort you data & update glyph while loading grid     
   //columnField is field of column you want to sort initially, isAsc - true/false
   gridSorter(columnField, isAsc, grid, gridData);

   //I had the columnField, columnId same else used columnId below
   grid.setSortColumn(columnField, isAsc); 

   grid.onSort.subscribe(function(e, args) {
        gridSorter(args.sortCol.field, args.sortAsc, grid, gridData);
   });

我是如何达成此解决方案的?

在这里阅读评论。 https://github.com/mleibman/SlickGrid/issues/325

答案 1 :(得分:3)

dataView.fastSort完成这项工作。然后,您可以使用setSortColumn设置排序字形。

答案 2 :(得分:3)

我启用了多列排序,我不得不更改函数以传递正确的排序列。

grid.onSort.subscribe(function(e, args) {
    gridSorter(**args.sortCols[0].sortCol.field**, **args.sortCols[0].sortAsc**, grid, gridData);
});

答案 3 :(得分:2)

您可以在列标题上触发点击事件...进行排序

我解决了这个问题......

$('.slick-header-columns').children().eq(0).trigger('click'); // for first column

答案 4 :(得分:1)

我受到了Mr.Hunts回答的启发,但我采用了稍微不同的方法将当前grid.setSortColumn(columnId, isAsc)扩展为grid.setInitialSortColumn(columnId, isAsc)。这将应用排序并完成grid.setSortColumn所做的一切。

    var thisGrid = { //Your grid obj
        columns: , // Your columns object
        grid: , // new Slick.Grid....
    }



    thisGrid.grid.onSort.subscribe(function (e, args) { // ar  var cols = args.sortCols;]
            thisGrid.grid.customSort(args);
        });

    thisGrid.grid.customSort = function (args) {
        var cols = args.sortCols;
        thisGrid.dataView.sort(function (dataRow1, dataRow2) {
                if (cols) {
                    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;
            });
    }
    thisGrid.grid.setInitialSortColumn = function (columnId, ascending) {
        thisGrid.grid.setInitialSortColumns([{
                    columnId: columnId,
                    sortAsc: ascending
                }
            ]);
    };
    thisGrid.grid.setInitialSortColumns = function (cols) {
        sortColumns = cols;
        $.each(sortColumns, function (i, col) {
                var columnIndex = thisGrid.grid.getColumnIndex(col.columnId);
                var column = thisGrid.columns[columnIndex];
                if (col.sortAsc == null) {
                    col.sortAsc = true;
                }
                var args = {
                    grid: thisGrid.grid,
                    multiColumnSort: true,
                    sortCols: [{
                            sortCol: column,
                            sortAsc: col.sortAsc
                        }
                    ]
                }
                thisGrid.grid.setSortColumn(col.columnId, col.sortAsc);
                thisGrid.grid.customSort(args);

            });
    };

    // Trigger 
    thisGrid.grid.setInitialSortColumn("dateDue", true);

答案 5 :(得分:1)

由于声誉,我无法发表评论,这是最合适的地方,但是,我的答案是关于@Premshankar Tiwari和@Siddharth的答案。

我更喜欢Siddharth的答案中的dataView.fastSort选项,除了IE7和8之外,它适用于所有浏览器。我没有在IE9或更高版本中测试它。不幸的是,由于遗留应用程序的兼容性问题,我网络上的大多数都运行IE7或8。但是,Premshankar的答案适用于IE7和8。

所以,我最终做了这样的事情:

if (msie > 0) {
    $(".slick-header-columns").children().eq(5).trigger("click");
    $(".slick-header-columns").children().eq(4).trigger("click");
} else {
    dataView.fastSort('process','unit');
}

其中列索引(5)=&#39; unit&#39;和列索引(4)=&#39;进程&#39;。请注意,这是dataView.fastSort方法中的相反顺序。我还使用了一个检测IE浏览器版本的功能,并将其分配给msie

我唯一关于使用.trigger方法的抱怨是,如果您将网格设置为动态隐藏/显示列,则索引功能可能会对非预期列进行排序,除非您在隐藏时仅在初始化时调用它显示能力存在。

答案 6 :(得分:0)

也许it会帮助你。看起来SlickGrid会触发自我排序 - 所以你可以手动触发它。如果你想要的话。

答案 7 :(得分:0)

我正在使用多列排序,并在初始化网格时加载已保存的排序数据。

正如预期的那样,setSortColumns设置了排序,但实际上没有应用它,而dataView.reSort()或.fastSort()似乎没有帮助,无论加载到什么点我称它们 (我一定错过了什么,但是无法让它发挥作用)。

最后,这对我有用。我从ajax调用中填充dataView后立即调用它。 它可能不是最简单的,很高兴在船上收集反馈!

function forceResort() {

    var sortColumns = grid.getSortColumns();
    var cols = [];
    $.each(sortColumns, function(index, value) {
        var columnId = value.columnId;
        var sortAsc = value.sortAsc;
        var sortCol = { field: columnId };
        var col = { sortCol: sortCol, sortAsc : sortAsc};
        cols.push(col);
    });

    dataView.sort(function (dataRow1, dataRow2) {

        var sortResult = 0;
        for (var i = 0, l = cols.length; i < l; i++) {
            if (sortResult !== 0) {
                break;
            }

            var field = cols[i].sortCol.field;
            var sign = cols[i].sortAsc ? 1 : -1;
            var value1 = dataRow1[field] || ''; //handle nulls - otherwise erratic sorting
            var value2 = dataRow2[field] || ''; //handle nulls - otherwise erratic sorting

            if ($.inArray(field, dateTypeColumns) > -1) {
                sortResult = compareDates(value1, value2) * sign;
            } else {
                if ($.inArray(field, numericColumns) > -1) {
                    sortResult = compareSimple(value1, value2) * sign;
                } else {
                    sortResult = compareAlphaNumeric(value1, value2) * sign;
                }
            }
        }
        return sortResult;
    });

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

答案 8 :(得分:0)

更干净的解决方案不是依赖于onSort的参数,而是调用getSortColumns:

  function gridSorter() {
     var scol=grid.getSortColumns();
     if (scol.length===0) return;
     var scolId=scol[0].columnId, asc=scol[0].sortAsc;
     data.sort(function(a, b) {
        var result = a[scolId] > b[scolId] ? 1 : a[scolId] < b[scolId] ? -1 : 0;
        return asc ? result : -result;
     });
     grid.invalidate();
  }

然后做:

  grid.onSort.subscribe(gridSorter);

这将允许随时重新建立排序(例如在使用ajax重新加载数据后的示例),只需调用gridSorter()

答案 9 :(得分:-1)

如果您想要多列排序:

function grid_sorter(args, grid, dataView) {
    let cols = args.sortCols;
    console.log(cols)
    dataView.sort(function (dataRow1, dataRow2) {
        for (let i = 0, l = cols.length; i < l; i++) {
            let field = cols[i].sortCol.field;
            let sign = cols[i].sortAsc ? 1 : -1;
            let value1 = dataRow1[field], value2 = dataRow2[field];
            let result = (value1 === value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
            if (result !== 0) {
                return result;
            }
        }
        return 0;
    });
    grid.invalidate();
    grid.render();
}

grid_sorter(default_sorting, grid_2, dataView_2);

cols是这样的对象:

- sortCols {
  - length: 2
  - 0 : {
       "sortAsc: true,
       "sortCol": {
           "field: column_id
        }
      }
  - 1: {..}
}