0

我正在尝试在我网站的弹出窗口中显示来自 Web API 的结果。结果需要格式化为弹出窗口内的表格，其中可以设置列数（在下面的示例中设置为 2 列）。我正在使用 $.each 语句来遍历数据并构建 html 表，但会出现错误（请参阅下面的注释）。此外，我的弹出窗口期待内容的字符串值（请参阅下面的变量“内容”），因此不确定如何最好地使用表值创建字符串。请参阅下文了解我遇到的问题 - 感谢您的帮助，如有问题请告诉我。谢谢。

我的数据样本：

[
    {
        "var1": 1,
        "var2": "foo"
    },
    {
        "var1": 2,
        "var2": "bar"
    },
    {
        "var1": 3,
        "var2": "etc"
    }
]

获取样本数据并在弹出窗口中显示的函数：

 function GetData() {

        var html = true;
        var numCols = 2; //assign the number of columns to build

        $.ajax({
            url: 'http://my/api/call',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                debugger;
                var content = "";

                var i = data.length;
                $.each(data, function (key, val) {
                if (!(i % numCols)) tRow = $('<tr>');
                    tCell = $('<td>').html("<span class=\"content-big\">" + val.var1+ "</span><span class=\"content-small\"> " + val.var2+ "</span> ");
                    content = $('table').append(tRow.append(tCell)); //ERROR: tRow is not defined

                $('.popup').popover({
                    content: content,
                    html: html
                });

            },
            error: function (x) {
                alert(x);
            }
        });
    }

更新：

对于 2 列布局，应该看起来像

--------------
1 foo | 3 etc
2 bar | 
--------------
4

1 回答 1

0

目前还不是 100% 清楚你想要做什么，但据我猜测，看起来你让这件事变得比它需要的复杂得多。

1) 你不应该在循环中与 DOM 交互。性能受到很大影响。我不确定您的数据集有多大，但无论如何，这只是一个最佳实践。请参阅：http: //jsperf.com/jquery-append-multiple-times-vs-array-vs-html-once/2

因此，考虑到这一点，而不是依赖 jQuery 来追加等，只需构建一个字符串并用它填充您的 popover html：

var table = '';

table = '<table><tbody>';

for (var i = 0; i < data.length; i++) {
    var row = data[i];
    table += ('<tr><td class="content-big">' + row.col1 + '</td><td class="content-small">' + row.col2 + "</td></tr>");
}

table += '</tbody></table>';

$('.popup').popover({
    content: table,
    html: true
});

http://jsfiddle.net/CZ5zW/

更新：

好的，如果您无法修改数据结构，这是您的解决方案：

var data = [
    {
        span1: 1,
        span2: "foo"
    },
    {
        span1: 2,
        span2: "bar"
    },
    {
        span1: 3,
        span2: "etc"
    }
];

var numberOfColumns = 2;

var table = '<table><tbody>';

var currentColumnNumber = 1;

for (var i = 0; i < data.length; i++) {
    var td = data[i];    
    if(currentColumnNumber === 1) {
        table += '<tr>';
    }
    table += ('<td><span class="content-big">' + td.span1 + '</span><span class="content-small">' + td.span2 + "</span></td>");

    currentColumnNumber ++;    
    if(currentColumnNumber > numberOfColumns) {
        table += '</tr>'; 
        currentColumnNumber = 1;        
    }    
}

//make sure the final "</tr>" is added
if (currentColumnNumber > 1) {
    table += '</tr>';   
}

table += '</tbody></table>';

http://jsfiddle.net/56FFx/1/

于 2013-07-22T20:45:58.763 回答