Question

我在<table>中插入绑定到JSON对象的行。表格中的单元格包含需要包含对象数量的<select>，因此7个对象将生成7 <option> s，1-7。

可以在模板定义中完成吗？

编辑：我添加了示例数据和标记。根据这些数据，我希望将3 <option> s（1-3）添加到DisplayOrder <select>，并为每个<option>选择适当的<select>。

var data = [{
    "Id": 1,
    "DisplayOrder": 1,
    "LabelText": "Unit On-Line Status:"},
{
    "Id": 2,
    "DisplayOrder": 2,
    "LabelText": "AGC Pct:"},
{
    "Id": 3,
    "DisplayOrder": 3,
    "LabelText": "Main Steam Heat Rate
}];

<table border="1" cellpadding="0" cellspacing="0">
    <thead><tr><th>Display Order</th><th>Label Text</th></tr></thead>
    <tbody></tbody>
</table>

<script id="attributeTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td><select name="DisplayOrder"></select></td>
        <td><input type="text" name="LabelText" value="${LabelText}" /></td>
    </tr>
</script>

Answer 1

如果没有一些示例数据和标记，我不确定你的意思，但我认为你的问题的主要部分涉及循环数字并为每个数字呈现option标记。你可以通过创建一个包含“N”元素然后使用{{each}}的数组来做到这一点，但我认为使用自定义模板标签在这里运作良好：

定义一个{{for}}标记，它遍历数字0到n：

$.extend(jQuery.tmpl.tag, {
    'for': {
        open: "for(var $i = 0; $i < $1; $i++) {",
        close: "}"
    }
});

在模板中使用新标记：

<script type="text/html" id="row-tmpl">
    {{each Rows}}
    <tr>
        <td>${Title}</td>
        <td>${Description}</td>
        <td>
            <select>
                {{for $data.TotalObjects}}
                <option>${$i}</option>
                {{/for}}
            </select>
        </td>
    </tr>
    {{/each}}
</script>

跟：

var rows = {
    TotalObjects: 5,
    Rows: [{
        Title: 'Test Row',
        Description: 'Test Row Description'
    },
    {
        Title: 'Another Row',
        Description: 'Another Row Description'
    }]
};

最好在一个工作示例中展示：http://jsfiddle.net/xgE3Y/

您的情况可能更简单，但我的答案应该使您至少可以在模板中使用简单的for循环并对每个迭代的值进行操作。

Answer 2

也许是这样的：

$(function () {

        var thisSelectObjects = 8;
        var thatSelectObjects = 2;


        $.fn.setOptions = function (options) {

            var settings = {
                'selectNum': 1
            };

            return this.each(function () {
                if (options) {
                    $.extend(settings, options);
                }
                for (i = 0; i < settings.selectNum; i++) {
                    $(this).append('<option>' + i + '<option/>');
                }
            });
        };



        $('#thisSelect').setOptions({ 'selectNum': thisSelectObjects });
        $('#thatSelect').setOptions({ 'selectNum': thatSelectObjects });

    });

HTML：

    <body>
    <select id='thisSelect'></select>
    <select id='thatSelect'></select>
</body>

如何使用jQuery.tmpl在<select>中渲染X <option>？</select> </option>

2 个答案: