Jquery - 从 SQLite 生成嵌套列表

Question

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

我的数据如下所示：

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

DEMO