Question

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

我搜索了该网站，发现了一些我认为可能有用的主题，但它们都适用于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] //包含标准默认代码

Answer 1

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

您需要使用新的 dataSource 更新 ListView 。您现在连接的方式是，将列表绑定到 myList.dataSource ，实际上是 groupsJobs 。当您点击某个按钮时，您会创建一个新的数据排序，但 createGrouped 会创建一个全新的对象，因此没有通知 ListView 某些内容已发生变化 - ListView 仍绑定到旧对象。致电

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

在 listData 函数的末尾，我会想到这个技巧。

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

1 个答案: