【问题标题】:how to invoke a ListView from a ListItem如何从 ListItem 调用 ListView
【发布时间】:2013-02-26 13:17:23
【问题描述】:

当我从右列表中的任何项目时,我想更新右 listview 此外,当我单击选择所有项目以选择右侧列表项而不是左侧项目时。

换句话说 我想要做的是,当我单击左侧列表中的任何项目时,右侧列表将根据我调用的左侧项目更改为不同的列表

这是我的 JS 代码

function selectionChangedHandler() {

    // Check for selection
    var selectionCount = listView.selection.count();
    if (selectionCount === 1) {

        // Only one item is selected, show the message
        // information for the item
        listView.selection.getItems().done(function (items) {
            // Print item data to the relevant message pane locations
            inboxMessage_Text.innerText = items[0].data.text;
            if (items[0].data.key == 1) {
                document.getElementById('listView4b2')
                        .innerHTML = '<ol><li>html2222 data</li></ol>';
            } else {
                document.getElementById('listView4b2')
                        .innerHTML = '<ol><li>html data</li></ol>';
            }
        });

    }

}
function selectAll() {
    WinJS.log && WinJS.log(" ", "sample", "status");
    listView.selection.selectAll();
}

function clearSelection() {
    WinJS.log && WinJS.log(" ", "sample", "status");
    listView.selection.clear();
}

和 HTML 代码

<div id="listView4b"
    class="win-selectionstylefilled"
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ 
        itemDataSource: myToppingsData.dataSource, 
        itemTemplate: mediumListIconTextTemplate, 
        selectionMode: 'multi', 
        tapBehavior: 'toggleSelect', 
        layout: { type: WinJS.UI.GridLayout } 
    }"
></div>

【问题讨论】:

  • 我不太确定您想要实现什么。您要更改右侧可见的项目列表,还是要突出显示(或选择)与左侧选择匹配的多个项目?
  • 是的,我想做的是,当我点击左侧列表中的任何项目时,右侧列表将根据我调用的左侧项目发生变化。

标签: javascript windows-8 visual-studio-2012 microsoft-metro winjs


【解决方案1】:

假设myToppingsData是一个WinJS.Binding.List,在左侧WinJS.UI.ListViewitemInvoked处理程序中使用createFiltered在这个列表上创建一个投影。

然后您可以将右侧列表的itemDataSource 设置为此过滤列表数据源。

【讨论】:

  • 而且每个 itemDataSource 都会有特定的动作...谢谢
猜你喜欢
  • 2017-06-07
  • 2016-01-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多