0

我得到了这个 json 对象，它的结构类似于：

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

我已经在表格中创建了第一级，但我没有如何创建第二个嵌套级别

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 添加为嵌套表？我知道我的代码不干净，与 Java 相比，jquery 让我感到困惑

4

2 回答 2

0

除非您对可以随页面发送的数量非常有限（也就是说，每一个 K 数据都对您不利），否则我认为 jQuery 不适合这种事情。

我认为 JSON + something => HTML 作为模板，所以我通常使用像Handlebars这样的 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 字符串并将其添加到 DOM 一次。这比每次调用 $('...') 要快得多。

PS。无法测试它，但如果您遇到错误，请告诉我。

于 2012-07-18T20:21:09.910 回答