Question

我有一个像这样的小型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);
    }
}

Answer 1

当然，您可以“嵌套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);
    });
});

WebSQL：按列排序并打印关联的行

1 个答案: