JQuery模板填充表问题。需要帮助

我有使用$ .ajax从db来的表数据。数据不是正确的。有人可以修复代码吗？JQuery模板填充表问题。需要帮助

这是JavaScript文件

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

下面是MVC3剃刀页。问题是“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>

来源

2011-06-12 Pirzada

计数器应该这样做，究竟是什么？你实际上并没有在任何地方使用它，只是声明，初始化，立即增加它，然后将它分配给它自己（这当然不是正确的做法）。 – 2011-06-12 19:14:47

@Matt Ball，其实我只是在测试它。我需要柜台而不是其价值来使物品独一无二。我很抱歉在发布之前没有清理过代码。 – Pirzada 2011-06-12 19:40:33

模板应该不包含任何逻辑 - 尽可能让它们哑。将数字放入传递给'.tmpl（）'的数据中。 – 2011-06-12 19:42:47

我不知道该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>

来源

2011-06-13 02:23:20

尝试在num值传入模板的设置它代替。

此外，您的table中间不应有span。请使用tbody标签。

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

来源

2011-06-12 19:17:08

你的答案是完美的。除了传递的num值没有显示以外，一切正常。我显示它像$ {num}，但没有显示出来。 – Pirzada 2011-06-12 19:55:52

请帮助我。 $ {num}没有显示任何内容。 – Pirzada 2011-06-12 22:19:48

这是因为它不是每行，而是一个字段 – jgauffin 2011-06-13 06:21:04

您可以将一个函数作为模板选项：

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

来源

2011-06-13 06:56:10 jgauffin

JQuery的模板救援...内置功能的做这件事情！

${$index + 1}

来源

2011-12-31 17:20:04 user1011144

JQuery模板填充表问题。需要帮助

回答

相关问题