的 DEMO

Question

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

我的数据看起来像这样：

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

我想要一个可折叠的每个标题组的'Letter'，以及各个对应的'Number'作为每个组的子节点。 标题和后续子项都应按升序排序（各自组中的子项）。

基本上，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>

我首先尝试创建标题，查询不同的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>');
        });

}

但现在我很难过如何在每个标题下插入'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();

Jquery - 从SQLite生成嵌套列表

1 个答案:

的 DEMO