試圖通過單擊按鈕過濾分組的GridLayout列表視圖

我正在學習WinJs，但遇到了與我的應用程序有關的問題。我有一個Grouped ListView，我在Gridlayout中顯示。我使用了一個模板，並在模板的標題中有三個按鈕。在我的Javascript中，我有一個函數按照關鍵性過濾列表，然後對它進行分組。當我點擊按鈕時，我通過了臨界點，然後在過濾器中使用它。我遇到的問題是，過濾和分組功能會在點擊按鈕時被調用，但顯示不會改變。試圖通過單擊按鈕過濾分組的GridLayout列表視圖

我搜索了該網站，發現了一些我認爲可能有幫助的主題，但它們都是針對Android應用的。

誰能告訴我什麼，我做錯了什麼？

代碼片斷：

[data.js]

(function() { 
    "use strict"; 

    var groupedItemsList; 
    var jobStatusCriticality = ""; 
    var groupedJobs, filteredDataList; 

    var dataList = new WinJS.Binding.List(); 

    function listData() { //removed for web} 

    WinJS.Namespace.define("JobGroup.Functions", { 
    setupJobGroup: function setupGroup(jsc) { 
     if (jsc != "") { 
      filteredDataList = dataList.createFiltered(
       function (dataItem) { 
        if (dataItem.jobCriticality == jsc) { 
         return true; 
        } 
        else { 
         return false; 
        } 
       } 
     ); 
      filteredDataList.notifyReload(); 
     } 
     else { 
      filteredDataList = dataList; 
     } 

     groupedJobs = filteredDataList.createGrouped(
      function (dataItem) { 
       return dataItem.jobStatus; 
      }, 
      function (dataItem) { 
       return { status: dataItem.jobStatus }; 
      }, 
      function (first, second) { 
       return first.charCodeAt(0) - second.charCodeAt(0); 
      } 
     ); 
    } 
}); 

JobGroup.Functions.setupJobGroup(jobStatusCriticality); 
WinJS.Namespace.define("DataExample", { myList: groupedJobs }); 
WinJS.UI.processAll().then(listData);

[default.html中]

<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template"> 
    //remove for web 
</div> 

<div id="headerTemplate" data-win-control="WinJS.Binding.Template"> 
    <div id="sortType"> 
    <div id="sortAll"><span><button id="viewAllBtn" type="button" onclick="JobGroup.Functions.setupJobGroup('')">View All</button></span></div> 
    <div id="sortCritical"><span><button id="viewCriticalBtn" type="button" onclick="JobGroup.Functions.setupJobGroup('CRITICAL')">Critical</button></span></div> 
    <div id="sortWarning"><span><button id="viewWarningBtn" type="button" onclick="JobGroup.Functions.setupJobGroup('WARNING')">Warning</button></span></div> 
    </div> 
</div> 

<div id="groupedListView" 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{itemDataSource: DataExample.myList.dataSource, 
    itemTemplate: select('#mediumListIconTextTemplate'), 
    groupDataSource: DataExample.myList.groups.dataSource, 
    groupHeaderTemplate: select('#headerTemplate'), 
    layout: {type: WinJS.UI.GridLayout}}"> 
</div>

[default.js] //包含標準的默認代碼

來源

2012-12-12 Natalie R.

快速掃描，所以你可能要玩這個有點，但我認爲這是在球場...

您需要更新ListView與新的數據源。你現在有線的方式，你綁定的名單到myList.dataSource這實際上是groupedJobs。當你點擊一個按鈕，你創建一個新的數據排序，但createGrouped創建一個全新的對象，所以沒有通知到ListView有什麼改變 - ListView仍舊綁定到舊的對象。你的ListData函數結束調用

groupedListView.winControl.itemDataSource = groupedJobs.dataSource; 
groupedListView.winControl.groupDataSource = groudedJobs.groups.dataSource;

會做的伎倆，我認爲。

來源

2012-12-13 14:58:13

這工作。非常感謝你。 –

試圖通過單擊按鈕過濾分組的GridLayout列表視圖

回答

相關問題