在列表視圖中對分組項目進行排序

Question

我需要按組對各個項目進行排序。 Listview API讓我創建排序的組或排序整個列表。 我需要對各組中的項目進行排序。

可能嗎？

Answer 1

這是可能的。 ObservableCollection不提供排序選項，因此您必須創建一個新的集合，該集合按所選屬性排序。請參閱以下示例代碼。有關其他排序選項，請閱讀博客文章here和another stackoverflow thread。

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

Answer 2

我在同一個問題上掙扎，既沒有找到有用的例子，也沒有提示。然後我開始將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>