EN
Dieser Inhalt ist in Ihrer Sprache leider nicht verfügbar. Im Folgenden finden Sie die englische Version.

ListView.selectionMode property

Applies to Windows and Windows Phone

Gets or sets the selection mode of the ListView.

Syntax


<div 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ selectionMode : 'value'}" >
</div>


var selectionMode = listView.selectionMode;
listView.selectionMode = selectionMode;

Property value

Type: SelectionMode

One of the values defined by the SelectionMode enumeration. The default value is multi. Do not set the TapBehavior property to "directSelect" when the SelectionMode is set to "none".

  • Applies to Windows Phone

Note  The SelectionMode value single is not supported for Windows Phone.

Examples

The following example sets the selection mode so that only a single item can be selected.


<div id="basicListView" 
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, 
    itemTemplate: mediumListIconTextTemplate, 
    selectionMode: 'single'}">
</div> 

(For the complete code that creates the ListView in this example, see the Quickstart: Adding a ListView topic.)

The next example shows how to set the selectionMode of the ListView in JavaScript.


var myListView = document.getElementById("basicListView1").winControl;
myListView.selectionMode = WinJS.UI.SelectionMode.single;

This example demonstrates how to use the selection property to select all items in a ListView, clear the selection, and display the number of items selected.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>selectionExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="selectionExample.css" rel="stylesheet" />
    <script src="selectionExample.js"></script>
    <script src="/js/data.js"></script>
</head>
<body>
        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
            <div style="width: 282px; height: 70px; padding: 5px; overflow: hidden; display: -ms-grid;">

                <!-- Displays the "picture" field. -->
                <img data-win-bind="alt: title; src: picture"
                    src="#"
                    style="width: 60px; height: 60px; margin: 5px; -ms-grid-column: 1;" />
                <div style="margin: 5px; -ms-grid-column: 2">

                    <!-- Displays the "title" field. -->
                    <h4 data-win-bind="innerText: title"></h4>

                    <!-- Displays the "text" field. -->
                    <h6 data-win-bind="innerText: text"></h6>
                </div>
            </div>
        </div>

        <div id="selectionExampleListView" data-win-control="WinJS.UI.ListView"
            data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
            itemTemplate: select('#mediumListIconTextTemplate'),
            tapBehavior: 'toggleSelect',
            layout : {type: WinJS.UI.GridLayout}}">
        </div>

        <button id="selectAllButton">Select all</button>
        <button id="clearSelection">Clear selection</button>
        <p>Items selected:</p>
        <p id="outputParagraph"></p>
</body>
</html>



(function () {
    "use strict";

    var lView;
    var outputParagraph;


    WinJS.UI.Pages.define("/pages/selection/selectionExample.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {

            lView = element.querySelector("#selectionExampleListView").winControl;
            outputParagraph = element.querySelector("#outputParagraph");
            lView.addEventListener("selectionchanged", this.selectionChanged); 

            element.querySelector("#selectAllButton").addEventListener("click", this.selectAllClicked);
            element.querySelector("#clearSelection").addEventListener("click", this.clearSelection);
            
        },

        unload: function () {
 
        },

        updateLayout: function (element, viewState, lastViewState) {
 
        },

        selectAllClicked: function (eventInfo) {
            lView.selection.selectAll();
        },

        clearSelection: function (eventInfo) {
            lView.selection.clear();
        },

        selectionChanged: function (eventInfo) {
            outputParagraph.innerText = lView.selection.count(); 
        }
    });

})();


Requirements

Minimum supported client

Windows 8 [Windows Store apps only]

Minimum supported server

Windows Server 2012 [Windows Store apps only]

Minimum supported phone

Windows Phone 8.1

Namespace

WinJS.UI

Library

Ui.js

See also

ListView
SelectionMode Enumeration
XAML ListView and GridView customizing interactivity sample (Windows)

 

 

Anzeigen:
© 2014 Microsoft