javascript - 对列表视图中的分组项目进行排序

Question

我需要对组中的单个项目进行排序。Listview api 让我可以创建排序组或排序整个列表。我需要对各个组中的项目进行排序。

可能吗？

Answer 1

我在同一个问题上苦苦挣扎，既没有找到有用的例子，也没有找到提示。然后我开始将 SortedListProjection 和 GroupedSortedListProjection 结合起来，最终让它发挥作用。

我的用例是按字母升序排列组，但在一个组内，项目按时间戳降序排列。

以下是我在 JavaScript 文件中的设置方式：

var list = new WinJS.Binding.List(); // list gets populated later in the code
var sortedList = list.createSorted(compareItems);
var groupedList = list.createGrouped(getGroupKey, getGroupData, compareGroups);

WinJS.Namespace.define("my.stuff", {
    sortedList: sortedList,
    groupedList: groupedList
});

重要的是保持项目排序与分组同步。因此项目排序函数调用分组函数。

以下是用于排序和分组的所有四个函数：

compareItems = function (leftItem, rightItem) {
    let leftKey = getGroupKey(leftItem);
    let rightKey = getGroupKey(rightItem);
    let compare = compareGroups(leftKey, rightKey);
    if (compare == 0) { // if keys are equal compare timestamps
        return leftItem.timestamp < rightItem.timestamp ? 1
            : leftItem.timestamp > rightItem.timestamp ? -1 : 0;
    }
    return compare;
};

getGroupKey = function (item) {
    return item.name + item.category;
};

getGroupData = function (item) {
    return {
    name: item.name + " (" + item.category + ")"
    };
};

compareGroups = function (leftKey, rightKey) {
    return leftKey.toUpperCase().localeCompare(rightKey);
};

最后，ListView 的两个列表的组合声明：

<div id="dataDeliveriesList" class="hidden"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{
        itemDataSource: my.stuff.sortedList.dataSource,
        itemTemplate: select('#itemTemplate'),
        groupDataSource: my.stuff.groupedList.groups.dataSource,
        groupHeaderTemplate: select('#groupHeaderTemplate'),
        layout: {
            type: WinJS.UI.ListLayout
        }
    }">
</div>

Answer 2

这是可能的。ObservableCollection 不提供排序选项，因此您必须创建一个在选定属性上排序的新集合。请参阅下面的示例代码。有关其他排序选项，请阅读此处的博客文章和另一个 stackoverflow 线程。

// TODO: Create an appropriate data model for your problem domain to replace the sample data
var group = SampleDataSource.GetGroup((String)navigationParameter);
this.DefaultViewModel["Group"] = group;
//this.DefaultViewModel["Items"] = group.Items;

// Sort items by creating a new collection
ObservableCollection<SampleDataItem> grpSorted = new ObservableCollection<SampleDataItem>(
group.Items.OrderBy(grp => grp.Title));

this.DefaultViewModel["Items"] = grpSorted;