Question

我使用$ .ajax来自db的表数据。数据没有正确填写。有人可以修改代码。

这是在javascript文件中

var ReloadGrid = (function(){
            $.getJSON("/HeaderMenu/GetHeaderGrid", function(data) {
                $( "#gridTemplate" ).tmpl(data).appendTo( "#mytemp" );
            });
 });

下面是mvc3 razor页面。问题是“mytemp”没有填充，而是显示返回3行的标题顶部的列。 num ++不工作不知道在哪里将其作为计数器进行初始化。

<script id="gridTemplate" type="text/x-jquery-tmpl">
    <tr class="gridRow">
        <td class="numberingTd">
            var num = 1;
            num = num++

        </td>
        <td class="cellTd">
            <input id="index" name="index" class="numberField" type="text" value="${IndexOrder}" />
        </td>
        <td class="cellTd">${DisplayName}</td>
        <td class="cellTd ">${UrlName} Us</td>
        <td class="cellTd ">${Active}</td>
    </tr>

</script>

<div class="gridDiv">
<table class="gridTable" cellspacing="0" cellpadding="0">
    <tr class="gridTitleRow">
        <td class="numberingTd width36">&nbsp;</td>

        <td class="iconLink width60">Sort Order</td>
        <td class="iconLink widthAuto">Display Name</td>
        <td class="iconLink widthAuto">Url Name</td>
        <td class="iconLink widthAuto">Active</td>
    </tr>
    <span id="mytemp" ></span>
</table>
</div>

Answer 1

我不确定data对象是什么样的，但您需要为每个元素添加num属性。假设data是一个对象数组，那么这样的东西应该可以工作：

$.getJSON('/HeaderMenu/GetHeaderGrid', function(data)
{
    for (var i=0; i<data.length; i++)
    {
        data[i].num = i;
    }

    $('#gridTemplate').tmpl(data).appendTo('table.gridTable > tbody');
});

正如@Cory指出的那样，你不应该在表格中间有一个<span>。使用<tbody>。

<table class="gridTable" cellspacing="0" cellpadding="0">
    <tbody>
        <tr class="gridTitleRow">
            <td class="numberingTd width36">&nbsp;</td>
            <td class="iconLink width60">Sort Order</td>
            <td class="iconLink widthAuto">Display Name</td>
            <td class="iconLink widthAuto">Url Name</td>
            <td class="iconLink widthAuto">Active</td>
        </tr>
    </tbody>
</table>

Answer 2

尝试传递num的值，而不是在模板中设置它。

此外，您span的中间不应该有table。而是使用tbody标记。

var ReloadGrid = (function(){
            $.getJSON("/HeaderMenu/GetHeaderGrid", function(data) {
                data.num = $('#mytemp tr').length + 1;
                $( "#gridTemplate" ).tmpl(data).appendTo( "#mytemp" );
            });
 });

Answer 3

您可以将函数作为模板选项传递：

$('#gridTemplate').tmpl(jsonData, {
        getIndex: function () {
            return $.inArray(this.data, jsonData);
     }
}).appendTo( ".gridTable tbody" );

然后在你的模板中：

<script id="gridTemplate" type="text/x-jquery-tmpl">
    <tr class="gridRow">
        <td class="numberingTd">${this.getIndex()}</td>
        <td class="cellTd">
            <input id="index" name="index" class="numberField" type="text" value="${IndexOrder}" />
        </td>
        <td class="cellTd">${DisplayName}</td>
        <td class="cellTd ">${UrlName} Us</td>
        <td class="cellTd ">${Active}</td>
    </tr>
</script>

Answer 4

JQuery模板救援...内置功能，可以做到这一点！

${$index + 1}

JQuery模板填表问题。需要帮忙

4 个答案: