Jquery -从SQLite生成嵌套列表

Question

我试图使用通过SQLite检索的数据在jquery中创建一个组可折叠列表视图。

我的数据如下所示：

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>');
        });

}

但是现在我很困惑如何在每个标题下插入“数字”子项？还是我走错路了？

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();

演示