Как мне визуализировать X <option>s в <select>, используя jQuery.tmpl? - PullRequest
Новая
       3

Как мне визуализировать X <option>s в <select>, используя jQuery.tmpl?

0 голосов
/ 25 мая 2011

Я вставляю строки в <table>, которые связаны с объектом JSON. Ячейка в таблице содержит <select>, который должен содержать количество объектов, поэтому 7 объектов будут производить 7 <option> s, 1-7.

Можно ли это сделать в определении шаблона?

Редактировать: я добавил образцы данных и разметку. Исходя из этих данных, я бы хотел добавить 3 <option> с (1-3) к DisplayOrder <select> и выбрать соответствующий <option> для каждого <select>.

Пример: http://jsfiddle.net/4SxTS/

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>

Ответы [ 2 ]

1 голос
/ 25 мая 2011

Я не совсем уверен, что вы имеете в виду, без каких-либо примеров данных и разметки, но я думаю, что основная часть вашего вопроса связана с циклическим просмотром чисел и отображением тега option для каждого числа.Вы можете сделать это, создав массив, содержащий элементы «N», а затем используя {{each}}, но я думаю, что использование настраиваемого тега шаблона здесь хорошо работает:

  1. Определить {{for}}тег, который перебирает числа от 0 до n: 

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

  2. Использовать новый тег в шаблоне: 

    <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 вшаблон и действовать на значение каждой итерации.

0 голосов
/ 25 мая 2011

Может быть что-то вроде этого: 

$(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>
...