排序时SlickGrid排除slick-group (组标题)行

Question

我正在使用带有分组的SlickGrid，需要对每个组中的数据进行排序，但将分组(组标题行)保留为默认顺序。

排序似乎是对列数据进行排序，然后按数据重新排序分组标题。

有没有人这样做了，或者我的选项/参数设置不正确？

谢谢

Answer 1

下面是我的grouping+sorting示例。请注意，当我想对它进行排序时，我不能对您分组的列进行排序，除非是grouping by列(不管怎么说，这不是我编写函数的方式，尽管您可以尝试这样做)

<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>

这里是grouping+sorting的javascript函数，请注意，每当您单击排序按钮(顶部带有html的按钮)时，它都具有通过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

由于您没有提供源，我可以猜测您的问题出在排序方法上，该方法只按选定的列排序，因此您必须首先按分组列排序。

假设您正在按UserName进行分组，并且具有可排序的列标题，那么您的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();

    });

实现这一目标的第二种方法是在分组级别进行用户比较。你为group定义了一个比较器，

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);
});