如何使用 phonegap 作为复选框列表显示从 android 设备获取的联系人？答案

【问题标题】：How to display the fetched contacts from android device using phonegap as a checkbox list?如何使用 phonegap 作为复选框列表显示从 android 设备获取的联系人？
【发布时间】：2015-04-09 06:08:57
【问题描述】：

我已从设备中获取联系人，但它们完全列在单个控件中。我必须在复选框控件的循环结构中列出它们。下面是我的脚本

<script type="text/javascript" charset="utf-8">
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        alert("welcome");
                    var options = new ContactFindOptions();
                    options.filter="";
                    options.multiple=true;
                    var fields = ["*"];
                    navigator.contacts.find(fields, onSuccess, onError, options);                      
                }
    function onSuccess(contacts) 
    {
        alert('Total Contacts '+contacts.length);
               for (var i = 0; i < contacts.length; i++) 
               {
                   contacts = contacts.sort(compare);                           
                   if(contacts[i].phoneNumbers)
                    {
                     document.getElementById("demo").innerHTML += "</br>" + contacts[i].displayName;
                     for( var j = 0; j < contacts[i].phoneNumbers.length; j++)
                        {
                         document.getElementById("demo").innerHTML += " - " +contacts[i].phoneNumbers[j].value;
                     // document.getElementById("demo").innerHTML += " - " +contacts[i].phoneNumbers[j].type;
                        }  
                      }
               }
     }
    function compare(a,b) {  
         if (a.displayName > b.displayName)
            return 1;
          if (a.displayName < b.displayName)
             return -1;    
         // return 0;
        }
    function onError()
    {
    alert("Some Error Occured");
    }
</script>

下面是html正文结构

<body>
<h1>Example</h1>
<p >Create Contact</p>
<p id="demo"> </p><p id="demo_no">no.</p></body>

请帮帮我..提前谢谢

【问题讨论】：

您希望最终列表是什么样的？
我想在一个新的复选框上显示每条记录。这样我就可以选择多个并创建组。我还需要将此数据从 index.js 发送到新创建的页面，即contact.html。现在你得到我想要的了吗？

标签： android jquery-mobile phonegap-plugins

【解决方案1】：

将您的演示元素更改为 jQM controlgroup：

<h1>Example</h1>
<p >Create Contact</p>         
<div id="demo" data-role="controlgroup"></div>

然后在你的脚本中，

您只需要对联系人进行一次排序，因此将排序调用移到 for 循环之外。

为每个带有电话号码的联系人，创建一个复选框输入和一个标签。

最后将所有复选框和标签添加到控制组的container元素，告诉jQM到enhance复选框，然后刷新控制组：

var html = '';
contacts = contacts.sort(compare); 
for (var i = 0; i < contacts.length; i++) 
{
    if(contacts[i].phoneNumbers)
    {
        html += '<input type="checkbox" name="chk' + i + '" id="chk' + i + '">';
        html += '<label for="chk' + i + '">' + contacts[i].displayName;
        for( var j = 0; j < contacts[i].phoneNumbers.length; j++)
        {
            html += " / " + contacts[i].phoneNumbers[j].value;
        }
        html += "</label>";
    }
}
$("#demo").controlgroup("container").empty().append(html);    
$("#demo").enhanceWithin().controlgroup( "refresh" );

工作DEMO

【讨论】：