【问题标题】:Getting Value from listview from Mobile Service DataSource从移动服务数据源的列表视图中获取价值
【发布时间】:2026-02-03 15:55:01
【问题描述】:

我正在使用 WinJS.Binding.List() 将 Azure 移动服务数据绑定到 Listview。 如何从列表视图中获取所选内容的值和索引?

//Javascript
var table = client.getTable('PatientInfo');
var birthCertData = function () {
            table.read().done(function (results) {
                   birthCert = new WinJS.Binding.List(results);
                   listItems.winControl.itemDataSource = birthCert.dataSource;
               });
        };

function selectionChangedHandler() {
//what should I type here to get the selectedCell Value and index?
        }

        listItems.addEventListener("selectionchanged", selectionChangedHandler, false);

这是我的html

<div id="TemplateItem" data-win-control="WinJS.Binding.Template" style="display: none">
   <div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
      <div style="-ms-grid-column: 2; margin-left: 5px; height: 40px; text-align: center; vertical-align: middle">
        <h3 data-win-bind="innerText: birthcert"></h3>
      </div>
   </div>
</div>

<div id="listItems" class="win-selectionstylefilled" 
     data-win-control="WinJS.UI.ListView"
     data-win-options="{ itemTemplate: select('#TemplateItem'), 
     layout: {type: WinJS.UI.ListLayout}, 
     selectionMode: 'single', 
     tapBehavior: 'directSelect'}">
</div>

 <div style="margin: 5px 0px 0px 72px; -ms-grid-column: 2">
    <input type="text" id="textInput" />
 </div>

截图:http://i.stack.imgur.com/Di0BP.png

谢谢

【问题讨论】:

    标签: javascript html listview windows-8 winjs


    【解决方案1】:

    通过 ListView 的 selection 属性

    function selectionChangedHandler(e) {
        var numItemsSelected = listItems.selection.count;
        var indicesSelected = listItems.selection.getIndices();
        var itemsSelected = listItems.selection.getItems();
        ...
    
    }
    

    ISelection 界面为您提供了可用于检测选择状态的其他选项。注意事件的详细数据(e.detail)会为null,所以如果你想通用抓取源ListView,可以通过e.srcElement获取到

    【讨论】:

    • 嗨@Jim,意思是我应该输入: var itemsSelected = listItems.selection.getItems(e.srcElement); ?
    • 不,如果您查看我粘贴的代码,该实现仅适用于 listItems DOM 元素。您将无法将相同的 selectionChangedHandler 用于可能以相同方式处理不同列表视图的多个不同列表。 IF 如果您想要更多可重用/通用代码,您可以使用 e.srcElement 来获取对导致当前事件触发的特定 listView 的引用:类似于 e.srcElement.selection。 getItems() (未经测试:))
    • 对不起@Jim,你能给我看一些通用代码吗?我尝试实现它但失败了几个小时:( getItems() 未按预期定义。:(
    • 抱歉,忘记了 winControl... 所以如果你将参数“e”传递给 selectionChanged 处理程序,所涉及的特定列表视图将位于 e.srcElement.winControl 和 e.srcElement.winControl .selection.getItems() 应该适合你。这次我测试了一下:)(使用HTML ListView Essentials sample
    • 非常感谢@Jim。你的提示对我帮助很大!但是 getItems() 只返回指定列表索引的对象对键/数据对,它不返回值。但是我尝试了不同的方法。我使用 index = e.srcElement.winControl.selection.getIndices() 来获取所选项目的列表视图的索引。然后 value.[key] = listview.getAt(index);获得价值。非常感谢。
    【解决方案2】:

    这与实际问题无关,但可能对您有所帮助。 目前,您正在等待读取 WAMS 表的全部内容,然后才将列表视图的数据源设置为整个读取表。 相反,我建议您创建一个本地 WinJS.Binding.List,立即将列表视图的数据源设置为它,然后当您读取 WAMS 表时,迭代生成的数组并将结果推送到绑定列表中。 结果将与您所拥有的功能相同,但它会是一个更好的模式,并且允许在实际数据调用之前完成一些工作。

    【讨论】:

    • 感谢您的解释。有了它,它真的为我节省了大量的网络资源。
    【解决方案3】:
     function selectionChangedHandler(e) {
    
                    // get the index of the selected listview item
                    var index= e.srcElement.winControl.selection.getIndices();
                    // get the object of the selected index
                    var odata = birthcert.getAt(test);
                    //odata.[key] is the value of the selected listview's item.
    
                }
    
                listItems.addEventListener("selectionchanged", selectionChangedHandler, false);
    

    【讨论】: