Question

我正在使用SlickGrid和Groupings，需要对每个组中的数据进行排序，但保留默认顺序的Grouping（组标题行）。

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

由于

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没有提供源代码，我可以猜测你的问题是sort方法，它只对所选列进行排序，因此你必须先按分组列进行排序。

假设您按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();

    });

实现相同的第二种方法是分组级别的用户比较器。您为组定义了比较器，

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

排序时SlickGrid排除了slick-group（Group Header）行

3 个答案: