Question

我正在基于我从网络服务调用中获得的一些json构建一个列表视图，其中包含嵌套的列表视图。下面的代码显示了我是如何尝试构建第一个列表视图的，但是我没有获得应该在创建时显示的图标。另外，我想要为每个客户添加每个都带有属性的列表项，但是无法让它们追加。如果有人能看到这个，看看我错过了什么，我会很感激。

这是在ajax成功事件中：

var customerList = data.adminCustomerList;
                $.each(customerList, function(i, value) {
                    $('#custList').append('<li id=" + value.custCode + InfoList" data-role="collapsible" data-iconpos="right" data-inset="false"><h2>' + value.custCode + '</h2></li>');
                    $('#cust' + value.custCode).append('<ul id="' + value.custCode + 'Properties" data-role="listview"></ul>');
                    $.each(customerList, function(i, value) {
                        //TODO: add each customer property in an append.
                    });
                });
                $('#custList').listview('refresh');

HTML：

<div data-role="page" id="pgIndex">
<div data-role="header" class="text-center">
    Customer Index
</div>
<div data-role="main" class="ui-content" id="mainDiv">
    <ul data-role="listview" id="custList">

    </ul>
</div>

从Web服务返回的示例json代码：

  "adminCustomerList": [
{
  "custId": xxxxx,
  "custCode": "customer name",
  "custName": "even more text",
  "custDescr": "more text",
  "createdDate": "text",
  "custUserList": [{...}]
}

Answer 1

对于dom元素id，您不能有空格，因此请确保custCode永远不会有空格，或者改为使用custId。

在这一行：

'<li id=" + value.custCode + InfoList" ...

你错过了一些引用。它应该是

'<li id="' + value.custCode + 'InfoList" ...

在这一行

$('#cust' + value.custCode).append('<ul id=

您正在构建不同的选择器。是value.custCode +'InfoList'还是'cust'+ value.custCode？

在外部listview和listview（“refresh”）上调用.enhanceWithin（），以便增强内部列表和可折叠内容。

代码应该是这样的：

var customerList = data.adminCustomerList;
$.each(customerList, function(i, value) {
    $('#custList').append('<li id="cust' + value.custId + '" data-role="collapsible" data-iconpos="right" data-inset="false"><h2>' + value.custCode + '</h2></li>');
    $('#cust' + value.custId).append('<ul id="' + value.custId + 'Properties" data-role="listview"></ul>');
    var $ul = $('#' + value.custId + 'Properties')
    var customerProps = value.custUserList;
    $.each(customerProps, function(idx, cval) {
        $ul.append('<li>' + cval.prop + '</li>');
    });
});
$('#custList').listview('refresh').enhanceWithin();

<强> DEMO

以编程方式构建jqm listview，每个列表项的图标不填充

1 个答案: