0

我有一个像这样的小型 SQL 数据库：

id        name      category
------------------------------
1         name1     category1
2         name2     category2
3         name3     category1
4         name4     category1

我想像这样使用javascript和html格式化数据库：

<ul>
    <li>category1
        <ul>
            <li>name1</li>
            <li>name3</li>
            <li>name4</li>
        </ul>
    </li>
    <li>category2
        <ul>
            <li>name2</li>
        </ul>
    </li>
</ul>

因为我不能嵌套 SQL 执行，所以我被卡住了。我发现了如何显示类别，但我没有走得更远。这是我的javascript：

var db = openDatabase('dbname', '1.0', 'DB Name', 2 * 1024);

db.transaction(function (tx) {
    tx.executeSql('SELECT DISTINCT category FROM list', [], function (tx, results) {
        if (results.rows.length > 0) {
            for (var i = 0; results.rows.length > i; i++) {
                $('ul').append('<li>' + results.rows.item(i).category + '</li>');
            }
        }
    });
});

非常感谢您的帮助！

编辑： 我终于可以嵌套两个 SQL 执行并获得正确的变量。但不知何故，我得到了每个类别的第一名，然后我得到了名字（按正确的顺序）。我检查代码一百次，找不到错误...

db.transaction(function (tx) {
    tx.executeSql('SELECT DISTINCT category FROM list', [], successCallback);
});

function successCallback(tx, results) {
    if (results.rows.length > 0) {
        for (var i = 0; results.rows.length > i; i++) {
            var result = results.rows.item(i);
            alert('Next Category: '+result.category);
            tx.executeSql('SELECT name FROM list WHERE category = "'+result.category+'"', [], successCallbackTwo);
        }
    }
}

function successCallbackTwo(tx, results) {
    for (var i = 0; results.rows.length > i; i++) {
        alert(results.rows.item(i).name);
    }
}
4

1 回答 1

0

当然你可以“嵌套 SQL 执行”，只需将第二个查询放在第一个查询的成功回调中。但这可以通过单个查询来完成。

db.transaction(function (tx) {
    // query (might want to add some ORDER BY clause)
    // updated to include nameurl column as suggested
    tx.executeSql('SELECT category, name, nameurl FROM list', [], function (tx, results) {
        // group results based on category
        var grouped = {};
        if (results.rows.length > 0) {
            for (var i = 0; results.rows.length > i; i++) {
                var record = result.rows.item(i);
                if(!(record.category in grouped)) {
                    grouped[record.category] = [];
                }
                grouped[record.category].push({
                    name: record.name,
                    nameurl: record.nameurl
                });
            }
        }

        // build tree from categories and names
        var $tree = $('<ul />');
        $.each(grouped, function(category, records) {
            var $leaves = $('<ul />');
            $.each(records, function(ix, record) {
                var $leaf = $('<li />');
                var $leaflink = $('<a />', {
                    text: record.name,
                    href: record.nameurl
                });
                $leaf.append($leaflink);
                $leaves.append($leaf);
            });
            var $branch = $('<li />', {
                text: category
            });
            $branch.append($leaves);
            $tree.append($branch);
        });

        // insert tree into page
        $(document.body).append($tree);
    });
});
于 2013-03-13T15:37:14.670 回答