SlickGrid在排序時排除slick-group（組標題）行

Question

我使用SlickGrid進行分組，並且需要對每個組內的數據進行排序，但將分組（組標題行）保留爲默認順序。

排序似乎對列數據進行排序，然後對每個數據重新排列分組標題。
有沒有人做過這個或我有一個選項/參數設置不正確？

感謝

Answer 1

這裏是我的分組排序+的例子。請注意，當我想對它進行排序時，它會對您正在分組的列進行排序，除非是按列分組，否則我無法排序其他任何列（儘管您可以播放與）

<select id="slc_groupby" name="slc_groupby" onchange="groupByColumn(this.value)"> 
    <option value="">...</option> 
    <option value="assy_number">Assy Number</option> 
</select> 
<span id="span_group_btn" style="position:absolute; display:none; margin-left:5px; margin-top:20px;"> 
    <!-- Group sorting, I show this button only after a grouping column is chosen --> 
    <img src="/images/b_updownarrow2.gif" id="img_sorting" border="0" onclick="groupByColumn($('#slc_groupby').val())" /> 
</span> 

和這裏來進行分組+排序的JavaScript函數，需要注意的是，每當你點擊排序按鈕（最上面的一個與HTML ID = img_sorting），它具有重組和訴諸的作用通過groupByColumn（）函數（因爲我使用的是onclick事件），儘管它發生得太快，以至於你不能真正看到它再次進行分組......但這就是我在所有瀏覽器中都能正常工作的方式（Chrome包括）

function groupByColumn(column) { 
    // sorting direction, if undefined just inverse the current direction of the global sortdir var (sortdir is defined as global variable in slickgrid) 
    sortdir = ((sortdir == 1) ? -1 : 1); 

    dataView1.groupBy(
     column, 
     function (g) { 
      return g.value + " <span style='color:green'>(" + g.count + " items)</span>"; 
     }, 
     function (a, b) { 
      var a1 = a.value; 
      var b1 = b.value; 

      // string sorting 
      return sortdir * (a1 == b1 ? 0 : (a1 > b1 ? 1 : -1)); 
     } 
    ); 

    // display the button for group sorting 
    $('#span_group_btn').css("display", "inline"); 
} 

Answer 2

因爲U沒有提供源代碼，所以我可以猜測你的問題是使用排序方法，它只按選定的列排序，所以你必須首先按分組列排序。

比方說，你是通過用戶名進行分組，並有排序的列標題，您的onSort方法應類似於此：

grid.onSort.subscribe(function (e, args) { 
    sortdir = args.sortAsc ? 1 : -1; 
    sortcol = args.sortCol.field; // Title column 

    var comparer = function (a, b) { 
    var x = a['UserName'], y = b['UserName']; 
    if (x != y) 
    { 
    return (x < y ? 1 : -1) * sortdir; 
    } 
    else 
    { 
    x = a[sortcol]; 
    y = b[sortcol]; 
    return (x == y ? 0 : (x > y ? 1 : -1)); 
    } 
    }; 

    dataView.sort(comparer, args.sortAsc); 
}); 

Answer 3

比方說，你用4分不同的列編組 - 部門，教師，當然，學期。雖然排序，您手動翻轉比較功能

function comparer(a, b) { 
    return (x == y ? 0 : (x > y ? 1 : -1)); 
} 

grid.onSort.subscribe(function(e, args) { 
     $(e.target).parents(".slick-header-columns").find(
       ".slick-header-column").removeClass(
       "slick-header-column-sorted"); 
     var currentCol = $(e.target).hasClass("slick-header-column") ? $(e.target): $(e.target).parents(".slick-header-column"); 
     currentCol.addClass("slick-header-column-sorted"); 
     currentCol.find(".slick-sort-indicator").removeClass(args.sortAsc ? "desc" : "asc").addClass(args.sortAsc ? "asc" : "desc"); 
     var sortdir = args.sortAsc ? 1 : -1; 
     var sortcol = args.sortCol.field; 
     var items = dataView.getItems(); 
     items.sort(function(a, b) { 
      var deptCompare = a.department == b.department ? 0 : (a.department < b.department ? -1 : 1); 
      if (deptCompare === 0) { 
       var facultyCompare = a.faculty == b.faculty ? 0 : (a.faculty < b.faculty ? -1 : 1); 
       if (facultyCompare === 0) { 
        var courseCompare = a.course == b.course ? 0 : (a.course < b.course ? -1 : 1); 
        if (courseCompare === 0) { 
         var semesterCompare = a.semester == b.semester ? 0 : (a.semester < b.semester ? -1 : 1); 
         if (semesterCompare === 0) { 
          var fieldCompare = comparer(a[sortcol], b[sortcol]); 
          return fieldCompare * sortdir; 
         } else { 
          return semesterCompare; 
         } 
        } else { 
         return courseCompare; 
        } 

       } else { 
        return facultyCompare; 
       } 
      } else { 
       return deptCompare; 
      } 
     }); 
     dataView.refresh(); 

    }); 

的結果比較這些列始終按升序或降序進行排序（無論是在開始的時候你的默認順序），對於其他使用排序方向等欄目實現這一目標的第二種方法是在分組級別的用戶比較器。 您定義組比較器，

function groupComparer(a, b) { 
    var x = a.groupingKey 
    var y = b.groupingKey; 
    return (x == y ? 0 : (x > y ? 1 : -1)); 
} 



dataView.setGrouping([ 
    { 
     getter : "department", 
     collapsed : false, 
     formatter : function(g){ 
      return g.value; 
     }, 
     comparer : groupComparer 
    },{ 
     getter : "faculty", 
     collapsed : false, 
     formatter : function(g){ 
      return g.value; 
     }, 
     comparer : groupComparer 
    },{ 
     getter : "course", 
     collapsed : false, 
     formatter : function(g){ 
      return g.value; 
     }, 
     comparer : groupComparer 
    },{ 
     getter : "semester", 
     collapsed : false, 
     formatter : function(g){ 
      return g.value; 
     }, 
     comparer : groupComparer 
    } 
]); 

而且用戶經常整理

grid.onSort.subscribe(function (e, args) { 
    dataView.sort(function(a,b){ 
     var x = a[args.sortCol.field]; 
     var y = b[args.sortCol.field]; 

     return (x == y ? 0 : (x > y ? 1 : -1)); 
    }, args.sortAsc); 
});