在html表中呈现kendo模板

时间:2017-04-25 22:11:23

标签: javascript kendo-ui

是否可以以任何方式使用kendo模板呈现表的表行?

以下是的外观,但它不会呈现表格中的行,因为<table>不允许<span><script>代码在里面

 <table class="table-striped">
     <span data-template="myTable" data-bind="source: numbers"></span>
     <script id="myTable" type="text/x-kendo-template">
         <tr>
             <td>
                 <span data-bind="text:number"></span>
             </td>
         </tr>
     </script>
 </table>


 <script>
     var numbers = [{number:1},{number:2},{number:3}]
 </script>

2 个答案:

答案 0 :(得分:1)

你可以这样做:

   <table id="output" class="table table-striped"></table>


  var tablerows = '';
  var template = kendo.template("<tr><td><span>#: number #</span></td></tr>");
  var numbers = [{number:1},{number:2},{number:3}];
  for (var i=0; i<numbers.length; i++){
    tablerows += template(numbers[i]);
  }
  $("#output").empty().append(tablerows);

<强> DEMO

您也可以将循环放在模板中......

答案 1 :(得分:1)

我能够通过在表格外部放置模板的<script>标记并通过在表格中添加<table>标记从<tbody>绑定来解决此问题:

<table class="table-striped">
    <tbody data-template="myTable" data-bind="source: numbers"></tbody>
</table>

<script id="myTable" type="text/x-kendo-template">
    <tr>
        <td>
            <span data-bind="text:number"></span>
        </td>
    </tr>
</script>