Jquery - 从SQLite生成嵌套列表

Question

我想在jQuery的移动使用通过SQLite检索的数据创建一个组可折叠列表视图。

我的数据看起来是这样的：

Letter | Number 
A  | 1 
A  | 2 
B  | 3 
B  | 4 
C  | 5 

我想每个标题组是可折叠一个“信”，以及各种相应的“数字”是各组的孩子。 标题和随后的孩子都应该按照升序排列（孩子在他们各自的群体中）。

所以基本上最终结果以HTML会是这个样子：

<div data-role="collapsible-set" id="LetterList" data-filter="true" data-filter-reveal="false"> 

<div data-role="collapsible" class="collapseclass"> 
<h2>A</h2> 
<ul data-role="listview"> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
</ul> 
</div> 

<div data-role="collapsible" class="collapseclass"> 
<h2>B</h2> 
<ul data-role="listview"> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
</ul> 
</div> 

<div data-role="collapsible" class="collapseclass"> 
<h2>C</h2> 
<ul data-role="listview"> 
<li><a href="#">5</a></li> 
</ul> 
</div> 

</div> 

我试图首先创建头，通过查询信件的不同列表，然后插入的div：

function querySuccessDistinctLetter(tx, result) { 

     $('#LetterList').empty(); 
     $.each(result.rows, function (index) { 
      var row = result.rows.item(index); 
      $('#LetterList').append('<div data-role="collapsible" class="collapseclass"><h2>' + row['Letter'] + '</h2></div>'); 
     }); 

} 

但是现在我难以理解如何在每个标题下插入'Number'子元素？还是我以错误的方式去做这件事？

Answer 1

你可以用一个查询来做到这一点。确保通过信然数排序查询所以结果看起来是这样的：

var result = { 
    rows: [ 
    {Letter: "A", number: 1}, 
    {Letter: "A", number: 2}, 
    {Letter: "B", number: 3}, 
    {Letter: "B", number: 4}, 
    {Letter: "B", number: 5}, 
    ] 
}; 

通过行步进，看到然后建立HTML标记时字母改变：

var curLetter; 
    var html = ''; 
    $('#LetterList').empty(); 
    for (var i=0; i < result.rows.length; i++){ 
    var row = result.rows[i]; 
    var letter = row.Letter; 
    var number = row.number; 

    if (letter != curLetter){ 
     if (i > 0) html += '</ul></div>'; 
     curLetter = letter; 
     html += '<div data-role="collapsible" class="collapseclass"><h2>' + letter + '</h2><ul data-role="listview">'; 
    } 
    html += '<li><a href="#">' + number + '</a></li>'  
    } 
    $('#LetterList').append(html).enhanceWithin(); 

DEMO