使用artTemplate渲染表格

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>

时间: 2024-11-05 11:35:53

使用artTemplate渲染表格的相关文章

Vue - ElementUI中循环渲染表格,控制字段的显示与隐藏 v-if与v-for同时使用

在Vue中使用v-for循环一个数组/对象时,如果再使用v-if,那么会提示使用计算属性(能正常使用),因为Vue中是不提倡v-for与v-if同时使用的.在我的项目中也遇到了问题不过翻看文档解决了修改前: <el-table-column v-for="(item, index) in columns" :prop="item.prop" :key="index" align="center" :width="

LayUI-Table表格渲染

记项目中又一表格使用方法,项目首选是使用BootstrapTable的,但是经过多番查证与调试,始终没有把固定列的功能调试成功,找到的成功的例子原样照搬都不行,文件引入也都没有问题,实在搞不懂了,如果有哪位大神知道BootstrapTable列固定如何实现,望不吝赐教. 言归正传,依据项目表格展示需求,剥去业务,需要一个具有每行具有复选框,多级表头,表头信息动态获取,列固定,点击单元格数据可查看详情的这样一个表格,所以因为没能搞定BootstrapTable渲染表格列固定问题没有搞定(满足其他需

JS表格分页组件:fupage的设计思路和具体用法(未来考虑开源,争取在2015年)

一.背景         之前在秒针工作的时候,某js高级工程师写了很多自己的组件,其中一套是分页组件,叫做st-grid.不过在我看来,bug太多,我经常给他反馈bug,我也不清楚为啥别人没有发现.    回到武汉工作后,我自己利用业余实践完善自己的官网,从前端到后端,都是自己一个人亲自搞定.    第1个分页的需求是,文章下方的评论,异步加载.第2个需求是,表格管理,比如后台管理系统,经常需要列出user.log等表的记录.   二.实例 <table class="table tab

JqueryEasyUI常用的数据表格,以及如何展示图片!

1:DataGrid 效果图: 引入需要的文件: 渲染表格: 2:TreeGrid 效果图: 渲染TreeGrid 3:DataGrid显示图片 效果图: 渲染方法: formatter方法

js表格按某一列排序

//本质就是对象按某个属性排序 //这里采用先排序后台返回的json数据再渲染的方式 /*排序*/function getSortFun(order, sortBy) { var ordAlpah = (order == "asc") ? ">" : "<"; var sortFun = new Function("a", "b", "return a." + sortBy

JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemplate. 项目之初用的是BaiduTemplate引擎,项目完成后发布到互联网,发现数据量大时,加载速度慢了点,就考虑换其它模板引擎是否能提高渲染效率,在网上查找.对比后发现ArtTemplate更好一点,就深入了解与学习了下,两个引擎语法有点差别,但结果是一至的,下面具体介绍一下两个引擎的使用情

编辑 Ext 表格(一)——— 动态添加删除行列

一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除. (1) 动态添加表格的行  gridStore.add({}); (2) 动态删除表格的行 gridStore.removeAt(gridStore.count() - 1); 二.动态增删列 在 ext 表格中,动态添加列主要通过修改表格绑定的 column 元素, 通过对 column 元素集进行添加或删除,然后重新渲染表格,就能实现表

artTemplate高性能数据模板引擎

相信数据模板引擎这个东西对于前端还是后台程序员来说都不陌生.我个人也非常讨厌用字符串拼接,字符串拼接用多了就会使代码看起来很乱,而且后期维护起来很不方便.现在前端数据渲染中出现了很多更好的方案,前端主流的mvc,mvvm框架如angular,vue,react等都自带响应式数据渲染功能,因此很多时候对前端开发者来说用框架渲染再合适不过了.但有些时候就不需要框架别的功能,只需要数据渲染的话就那这些框架来渲染不太合适了.这个时候后我们需要一些具有数据渲染能力的轻型引擎.artTemplate就是一个

用js实现表格多条件模糊查询,可兼容分页

需求如下: 实现姓名.职位.直属上级.用户类型四个条件模糊查询,查询到的结果分页展示. 实现逻辑: 定义两个数组,其中vm.nowallUserLists为原始数据.vm.nowallUserFilter为筛选后数据.最终循环vm.nowallUserFilter来渲染表格. 筛选前,将vm.nowallUserLists的值赋给vm.nowallUserFilter,表格渲染全部数据. 筛选时,先初始化vm.nowallUserFilter为空数组,将筛选得到的内容推到这个数组中.此时表格渲染