0

私はこれに似た構造を持つこのjsonオブジェクトを取得しました:

vendor have name, phone, fax, contacts
contacts have firstName, lastName, title, phone, email

テーブルに最初のレベルを作成しましたが、ネストされた 2 番目のレベルを作成する方法がわかりませんでした

function getData(vType) {
                $.getJSON('/LocalApp/VendorController', {
                    vendorType : vType,
                    time : "2pm"
                }, function(vendorsJson) {
                    $('#vendors').find("tr:gt(0)").remove();

                    var vendorTable = $('#vendors');

                    $.each(vendorsJson, function(index, vendor) {
                        $('<tr>').appendTo(vendorTable).append(
                                $('<td>').text(vendor.name)).append(
                                $('<td>').text(vendor.phone)).append(
                                $('<td>').text(vendor.fax)).append(
                                '<table class="contactTable"><tr><th>First Name</th><th>Last Name</th><th>Title</th><th>Phone</th><th>E-Mail</th></tr></table>');

                    });
                });
            }

では、jQuery コードで入れ子になったテーブルとして vendor.contacts を追加するにはどうすればよいですか? 私は自分のコードがきれいではないことを知っています.jqueryはJavaと比較して混乱しています.

4

2 に答える 2

0

ページで送信できる量に非常に制限されていない限り (つまり、K 個のデータすべてが不利になる場合)、jQuery はこの種のものには適していないと思います。

JSON + 何か => HTML をテンプレートと考えているので、通常はハンドルバーなどの JavaScript テンプレート ツールを使用してそのようなことを行います。より自然なフィット感です。さらに、 Try Handlebars.jsのようなサイトで今すぐ試して、サンプル JSON の一部を取得し、必要な HTML を出力するテンプレートをインタラクティブに作成することもできます。

おそらく、内部に別の {{#each}} を含む {{#each}} は、ネストされた JSON から目的の HTML への変換を処理できる可能性があります。

于 2012-07-18T20:49:55.523 に答える
0

ベンダーのセルにテーブルが必要かどうかはわかりませんが、次のようなことを試してください...

var contactTableHtml = '<table class="contactTable"><tr><th>First Name</th><th>Last Name</th><th>Title</th><th>Phone</th><th>E-Mail</th></tr></table>';

var vendorTableContent = $.map(vendorsJson,function (index, vendor) {

    var contactTableContentHtml = $.map(vendor.contacts,function (index, contact) {
        return "<tr><td>" + contact.firstName + "</td><td>" + contact.lastName + "</td><td>" + contact.title + "</td><td>" + contact.phone + "</td><td>" + contact.email + "</td></tr>";
    }).join("");

    return '<tr>' +
        '<td>' + vendor.name + '</td>' +
        '<td>' + vendor.phone + '</td>' +
        '<td>' + vendor.fax + '</td>' +
        '<td>' + contactTableHtml + contactTableContentHtml + '</td>' +
        '</tr>';

}).join("");

vendorTable.append(vendorTableContent);

まず、サブテーブルを文字列として作成し、それをメイン テーブルに追加します。また、大きな html 文字列を 1 つ作成し、DOM に一度追加することもお勧めします。これは、毎回 $('...') を呼び出すよりもはるかに高速です。

PS。テストできませんでしたが、エラーが発生した場合はお知らせください。

于 2012-07-18T20:21:09.910 に答える