sorting - SlickGrid 排序时排除 slick-group（组标题）行

Question

我将 SlickGrid 与 Groupings 一起使用，需要对每个 Group 中的数据进行排序，但将 Grouping（组标题行）保留为默认顺序。

排序似乎对列数据进行排序，然后根据数据重新排序分组标题。
有没有人这样做或者我的选项/参数设置不正确？

谢谢

Answer 1

由于U没有提供源，我猜你的问题是排序方法，它只按选定的列排序，所以你必须先按分组列排序。

假设您按 UserName 分组并具有可排序的列 Title，您的 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 2

这是我的分组+排序示例。请注意，当我想对它进行排序时，它会对您分组的列进行排序，除非它是按列分组，否则我不能对任何其他列进行排序（尽管你可以玩接着就，随即）

<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() 函数重新组合和重新排序的效果（因为我' m 使用 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 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);
});