首页 > 其他 > 详细

使用artTemplate渲染表格

时间:2017-08-23 12:46:34      阅读:469      评论:0      收藏:0      [点我收藏+]

1.首先引入jQuery文件和template.js文件:

  <script src=‘jQuery-2.1.4.min.js‘></script>
  <script src=‘template.js‘></script>

2.渲染表格数据为json格式:

  

    var data1 = {
      headname:[‘星期‘,‘年‘,‘月‘,‘日‘],
      list : [{"tags1":‘英语‘,
      "tags2":‘语文‘,
      "tags3":‘数学‘,
      "tags4":‘政治‘
      },
      {
      "tags1":‘地理‘,
      "tags2":‘体育‘,
      "tags3":‘英语‘,
      "tags4":‘历史‘
      }]
    };

3.渲染代码如下:

    <script>
      $(function(){
        var data1 = {
        headname:[‘星期‘,‘年‘,‘月‘,‘日‘],
        list : [{"tags1":‘英语‘,
        "tags2":‘语文‘,
        "tags3":‘数学‘,
        "tags4":‘政治‘
          },
      {

      "tags1":‘地理‘,
      "tags2":‘体育‘,
      "tags3":‘英语‘,
      "tags4":‘历史‘
      }]
      };


    var html = template("art3",data1);
    $("#content").append(html);
    })
    </script>
    <script id="art3" type="text/html">
    <div>
    <table border=1>
      {{include ‘art5‘ $value}}
    </table>
    </div>
  </script>

   <script id="art5" type="text/html">

    <thead>
      <tr>
      {{each headname}}
      <th>{{$value}}</th>
      {{/each}}
      </tr>
    </thead>
  <tbody>
  {{each list}}
    <tr>
      <td>{{$value.tags1}}</td>
      <td>{{$value.tags2}}</td>
      <td>{{$value.tags3}}</td>
      <td>{{$value.tags4}}</td>
    </tr>
  {{/each}}
  </tbody>
  </script>

 

使用artTemplate渲染表格

原文:http://www.cnblogs.com/datouxiaoming/p/7417585.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!