如何使用 jQuery.tmpl 在

发布于 2024-11-09 08:55:26 字数 1194 浏览 0 评论 0原文

我正在 中插入绑定到 JSON 对象的行。表中的单元格包含需要包含对象数量的

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

编辑：我添加了示例数据和标记。根据这些数据，我想将 3 个 (1-3) 添加到 DisplayOrder 选择的 option>。

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>

原文

I'm inserting rows in a <table> that are bound to a JSON object. A cell in the table contains a <select> that needs to contain the number of objects, so 7 objects would produce 7 <option>s, 1-7.

Can this be done in the template definition?

Edit: I've added sample data and markup. From this data, I would want to add 3 <option>s (1-3) to the DisplayOrder <select> and have the appropriate <option> selected for each <select>.

Example: 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

从此见与不见 2024-11-16 08:55:26

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

定义一个 {{for}} 标签，迭代数字 0 到 n：

$.extend(jQuery.tmpl.tag, {
    '为了'： {
        打开：“for(var $i = 0; $i < $1; $i++) {”,
        关闭： ”}”
    }
});

在模板中使用新标签：

<脚本类型=“text/html”id=“row-tmpl”>
    {{每行}}
    
        ${标题}
        ${描述}
        
            <选择>
                {{对于 $data.TotalObjects}}
                <选项>${$i}
                {{/为了}}
            
        
    
    {{/每个}}

调用方式：

var rows = {
    对象总数：5，
    行：[{
        标题：“测试行”，
        描述：“测试行描述”
    },
    {
        标题：“另一行”，
        描述：“另一行描述”
    }]
};

在工作示例中最佳演示： http: //jsfiddle.net/xgE3Y/

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

I'm not sure exactly what you mean without some sample data and markup, but I think the main part of your question deals with looping through numbers and rendering an option tag for each number. You could do this by creating an array containing "N" elements and then using {{each}}, but I think that using a custom template tag works well here:

Define a {{for}} tag that iterates through numbers 0 to n:

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

Use the new tag in a template:

<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>

Called with:

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

Best demonstrated in a working example: http://jsfiddle.net/xgE3Y/

Your situation might be even simpler, but my answer should enable you to at least use a simple for loop in a template and act on each iteration's value.

回复收藏 0 原文

西瑶 2024-11-16 08:55:26

也许是这样的：

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

Maybe something like this:

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

回复收藏 0 原文

~没有更多了~

关于作者

千笙结

暂无简介

0 文章

0 评论

629 人气

关注发私信

友情链接

文江博客

如何使用 jQuery.tmpl 在

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如何使用 jQuery.tmpl 在 中呈现 X？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如何使用 jQuery.tmpl 在

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。