在滑動網格上調用排序

Question

在滑動網格中，我可以使用grid.SetSortColumn(colName,true/false)來設置排序列和排序方向。這隻設置排序字形但不排序。有沒有辦法來調用排序事件處理程序。我已經定義了排序處理程序，如grid.onSort.subscribe(function(){});

Answer 1

也許it會幫助你。看起來像SlickGrid觸發自我排序 - 所以你可以手動觸發它，如果你想。

Answer 2

您正在觀察的行爲是正確的。

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

Answer 3

dataView.fastSort完成這項工作。然後您可以使用setSortColumn來設置排序字形。

Answer 4

我有多個列排序啓用，我不得不改變函數傳遞正確的排序列。

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

Answer 5

我被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); 

Answer 6

可以觸發列標題單擊事件......這不排序

我定這樣的問題......

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

Answer 7

我使用多列排序，並在初始化網格時加載保存的排序數據。 （我一定是錯過了一些東西，但是我不知道該怎麼回事），但是我不知道如何解決這個問題。 ，但只是不能得到它的工作）。

最後，這對我有效。我從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(); 
} 

Answer 8

我不能離開由於口碑評論，這也正是這將是最合適的，但是，我的答案是關於@Premshankar蒂瓦里和@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）= '單元' 和列索引（4）= '過程'。請注意，這是dataView.fastSort方法中的相反順序。我還使用了一種檢測IE瀏覽器版本並將其分配到msie的功能。

我對利用.trigger方法唯一的抱怨是，如果您設置網格，以動態地隱藏/顯示列，索引功能將可能排序上意外列，除非你只在初始化時調用它時，隱藏/顯示能力當下。

Answer 9

一個更清潔的解決方案是不依賴於參數的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（）