Question

我正在尝试为移动应用构建一个菜单（使用jQuery Mobile）。我有一个.asp页面，用于查询SQL以提取菜单项（现在一个，由json[0].CompanyName表示）。它作为JSON数据返回。我想将SQL中的值附加到ID为“mylist”的<ul>。这样可以将文本附加到json[0].CompanyName中，但它没有菜单的硬编码Item 1和Item 2的格式。为什么CSS的格式适用于两个硬编码的菜单项，而不是动态的？

  <div data-role="content" data-theme="b">  
     <ul id="mylist" data-role="listview" data-inset="true" data-filter="true" >
     <li><a href="item1.html" >Hard Coded Menu Item 1</a></li>
     <li><a href="item2.html" >Hard Coded Menu Item 2</a></li>
        <script type="text/javascript">
            $(document).ready(function () {
                $.getJSON("getdata.asp", function (json) {
                    // alert(json[0].CompanyName);
                    $('#mylist').append('<li><a href="#">' + json[0].CompanyName + '</a>    </li>');
                });
            });
        </script> 
     </ul>
  </div>

Answer 1

添加后，您必须刷新listview：

        $(function () {
            $.getJSON("getdata.asp", function (json) {
                $('#mylist').append('<li><a href="#">' + json[0].CompanyName + '</a>    </li>').listview('refresh');
            });
        });

这将告诉jQuery Mobile重新初始化listview元素，以便将正确的CSS类添加到正确的元素中。

可以在此处找到文档：http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html（页面底部是一个名为更新列表的部分）

有时您遇到的情况是您不确定listview是否尚未初始化，您可以使用此if/then来解决该问题：

var $myList = $('#myList');
if ($myList.hasClass('ui-listview')) {
    $myList.listview('refresh');
} else {
    $myList.listview();
}

json数据jquery.append格式化问题

1 个答案: