kendo-template绑定中row-template中的多行

Posted 2021-04-15

我需要一个使用kendo绑定的表结构，我有一个行模板和项模板，因为我有红色telrik（kendo）文档，它说行模板中只允许一行。要求是我想拥有在row-template中有多行。但是只要我添加多行，它就只为第一行呈现。

<script type="text/kendo-template" id="tableEditRows">
 <tr class="tableRow"  data-bind="source:cells" data-template="tableEditCell"></tr>
    <tr> 
        <td >testsal</td>
    </tr> 
  </script>
<script type="text/kendo-template" id="tableEditCell">
    <td class="tableCell" align="center">
        <p>value</p>
    </td>
</script> 
<div  id="numeric" ></div>
<script>
  var table = $('<table class="tableEdit"  style="width:200px">' +
                '<tbody align="center" data-bind="source:rows"  data-template="tableEditRows">');
                $("#numeric").append(table);
var viewModel = kendo.observable( {
  rows:[{
        cells:[{
                Id:1,
            Value:"asas"
      }]
  },{
        cells:[{
                Id:1,
            Value:"asas"
      }]
  }]
});

kendo.bind（$（“＃numeric”）。get（0），viewModel）;这里有一个链接http://dojo.telerik.com/ifoBA/3到我试图做的。有没有办法在行模板中实现多行

答案

我能够通过使用静态模板来解决这个问题，因为我有一组固定的行。我创建了一个html模板，在其中我为每一行使用了for循环，对于每一行，我在<tr>中调用了一个item-template标签。除此之外，我还有一个额外的行模板来了解更多details.below是一个代码片段，以显示我所做的事情。

        <script type="text/html" id="testTemplate" > 
         #for(var i=0;i<rows.length;i++){#
           <tr class="tableRow" data-bind="source:rows[#=i#].cells" data-template='tableEditCell'></tr>
           #if(rows[i].index==0){#
            <tr  >
                <td class="tableCell" >
                       some value
                </td>
            </tr>
              #}#
            #}#
        </script>    

这里是模板的编译和附加

var table = $('<table class="elvi"><tbody  align="center"></tbody></table>');
    var template = kendo.template($("#testTemplate").html());
      var itemHtml = template(self.viewModel);
                table.append(itemHtml);
                table.appendTo($(self.element));