尝试通过单击按钮过滤 Grouped GridLayout Listview答案

【问题标题】：Trying to filter a Grouped GridLayout Listview by clicking a button尝试通过单击按钮过滤 Grouped GridLayout Listview
【发布时间】：2012-12-13 22:58:13
【问题描述】：

我正在学习 WinJs，但我的应用程序出现问题。我有一个在 Gridlayout 中显示的 Grouped ListView。我使用模板，在模板的标题中，有三个按钮。在我的 Javascript 中，我有一个按关键性过滤列表然后对其进行分组的函数。当我单击按钮时，我传递了临界值，然后在过滤器中使用它。我遇到的问题是，当单击按钮但显示没有改变时，会调用执行过滤和分组的函数。

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

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

代码sn-p：

[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] //包含标准默认代码

【问题讨论】：

标签： listview windows-8 filter winjs

【解决方案1】：

快速扫描，因此您可能需要稍微尝试一下，但我认为这是在球场上......

您需要使用新的 dataSource 更新 ListView。按照现在的连接方式，您将 List 绑定到 myList.dataSource，这实际上是 groupedJobs。当您单击一个按钮时，您会创建一个新的数据排序，但 createGrouped 会创建一个全新的对象，因此不会向 ListView 通知某些内容已更改 - ListView 仍然绑定到旧对象。调用

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

在你的 listData 函数的末尾会做我认为的伎俩。

【讨论】：