尝试通过单击按钮来筛选分组网格布局列表视图

Question

我正在学习 WinJs，但我的应用程序有问题。我有一个分组列表视图，显示在网格布局中。我使用模板，在模板的标题中，有三个按钮。 在我的 Javascript 中，我有一个函数，可以按关键性过滤列表，然后对其进行分组。 当我单击按钮时，我会传递临界，然后在过滤器中使用它。 我遇到的问题是，当单击按钮但显示没有变化时，会调用进行过滤和分组的函数。

我搜索了该网站，发现了一些我认为可能会有所帮助的主题，但它们都是针对Android应用程序的主题。

谁能告诉我我做错了什么？

代码片段：

[数据.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);

[默认.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>

[默认.js] 包含标准默认代码

Answer 1

快速扫描，所以你可能不得不玩这个，但我认为这是在球场上......

您需要使用新的数据源更新列表视图。 你现在连接的方式是，你将列表绑定到myList.dataSource，它实际上是groupedJobs。 单击按钮时，将创建新的数据排序，但 createGroup 会创建一个全新的对象，因此不会向 ListView 发出某些更改的通知 - ListView 仍绑定到旧对象。 叫

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

在您的列表末尾我认为数据函数可以解决问题。