Jquery

Question

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

我的数据看起来像这样：

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

我希望每个 header 组都有一个 'Letter' 可折叠，并且各种对应的 'Number' 是每个组的 child。 header和随后的children应该升序排列（children在各自的组内）。

所以 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>

我尝试先创建 headers，方法是查询不同的 Letter 列表，然后插入 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>');
        });

}

但现在我很困惑如何在每个 header 下插入 'Number' children？还是我以错误的方式解决这个问题？

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

Jquery - 从 SQLite 生成嵌套列表

Jquery - generating nested lists from SQLite

html

sqlite

jquery-mobile

DEMO