后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢?

下面就是解决方案:

<h2>循环4个一组</h2>
<script type="text/html" id="temp1">
<b>
{{each rows as item i}}
{{if i%4==0}}<b>【{{/if}}
{{item.userName}}
{{if i>0 && (i-3)%4==0}}】</b>{{/if}}
{{/each}} </ul>
</script> <script>
var data={
"rows":[
{"userName":"项目1"},
{"userName":"项目2"},
{"userName":"项目3"},
{"userName":"项目4"},
{"userName":"项目5"},
{"userName":"项目6"},
{"userName":"项目7"},
{"userName":"项目8"},
{"userName":"项目9"},
{"userName":"项目10"},
{"userName":"项目11"},
{"userName":"项目12"},
{"userName":"项目13"},
{"userName":"项目14"},
{"userName":"项目15"},
{"userName":"项目16"},
{"userName":"项目17"},
{"userName":"项目18"},
{"userName":"项目19"},
{"userName":"项目20"}
]
}
var html=template("temp1",data) document.write(html) </script>

如果这篇文章对您有帮助,您可以打赏我

技术交流QQ群:15129679

 
 

art.template 循环里面分组。的更多相关文章

  1. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  2. 利用art.template模仿VUE 一次渲染多个模版

    TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...

  3. 利用art.template模仿VUE

    首先先看一下Typescript代码: import template = require('art-template/lib/template-web'); interface TemplateBi ...

  4. js 模板引擎 -Art Template

    一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  5. Ajax接收Json数据,调用template模板循环渲染页面的方法

    一. 后台接口吐出JSON数据 后台php接口中,需要写三个部分: 1.1 开头header规定数据格式: header("content-type:application/json;cha ...

  6. hdu 1712 ACboy needs your help 分组背包

    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1712 Problem ...

  7. Pandas 基础(7) - Group By 分组的相关知识

    首先, 引入这节需要的 csv 文件 (已上传) import pandas as pd city_df = pd.read_csv('/Users/rachel/Sites/pandas/py/pa ...

  8. HDU1712:ACboy needs your help(分组背包模板)

    http://acm.hdu.edu.cn/showproblem.php?pid=1712 Problem Description ACboy has N courses this term, an ...

  9. HDU1712:ACboy needs your help(分组背包)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1712 解释看这里:http://www.cnblogs.com/zhangmingcheng/p/3940 ...

随机推荐

  1. php数组去重(一维数组)

    <?php $arr = ['1', '1', 'PHP', 'PHP', 2, 3]; print_r($arr); echo "<br>"; print_r( ...

  2. Kafka动态增加Topic的副本

    一.kafka的副本机制 由于Producer和Consumer都只会与Leader角色的分区副本相连,所以kafka需要以集群的组织形式提供主题下的消息高可用.kafka支持主备复制,所以消息具备高 ...

  3. 使用super调用父类的构造方法

    package com.bjpowernode.t02inheritance.c09; /* * 使用super调用父类的构造方法 */public class TestSuper02 { publi ...

  4. Myeclipse调试模式下自动提示变量值设置

    1.Window->Preferences->Java->Editor->Hovers 将[Variable Values]选择即可,如果第一个[Combined Hover] ...

  5. DDD领域模型数据访问权限(九)

    权限分为:数据权限和功能权限 数据权限: 查询提供附加表达式的支持: //提供附加表达式的支持 List<TAggreateRoot> GetByCondition(Expression& ...

  6. 【C++ Primer 第11章】2. 关联容器操作

    练习答案 一.访问元素 关联容器额外类型别名  key_type 此容器类型的关键字类型 mapped_type 每个关键字关联的类型,只 适用于map mapped_type 对于set,与key_ ...

  7. 多线程中使用CheckForIllegalCrossThreadCalls = false访问窗口

    在多线程程序中,新创建的线程不能访问UI线程创建的窗口控件,如果需要访问窗口中的控件,可以在窗口构造函数中将CheckForIllegalCrossThreadCalls设置为 false publi ...

  8. django引入现有数据库

    Django引入外部数据库还是比较方便的,步骤如下: 1.创建一个项目,修改seting文件,在setting里面设置你要连接的数据库类型和连接名称,地址之类,和创建新项目的时候一致. 2.运行下面代 ...

  9. linux 中的./configuration --prefix=安装路径 的用法(指定源码安装方式的安装路基)

    源码的安装一般由3个步骤组成:配置(configure).编译(make).安装(make install). Configure是一个可执行脚本,它有很多选项,在待安装的源码路径下使用命令./con ...

  10. 077 Apache的HBase与cdh的hue集成(不建议不同版本之间的集成)

    1.修改hue的配置文件hue.ini [hbase] # Use full hostname with security. hbase_clusters=(Cluster|linux-hadoop3 ...