Jquery 模板插件 jquery.tmpl.js 的使用方法(2):嵌套each循环,temp调用(使用预编译的模板缓存)...
直接上代码吧
一:主窗口
/*#region SendChooseTargetTemplate 发送候选人主窗口模板*/ var SendChooseTargetTemplate = ''; SendChooseTargetTemplate += '<div id="hwsendChooseTarget_${UserId}" style="display:block" class="content_body">'; SendChooseTargetTemplate += ' <div class="content">'; SendChooseTargetTemplate += ' <div class="top">'; SendChooseTargetTemplate += ' <a href="#" class="back"><img src="data:images/pic_18.png" width="18" height="14"></a>选择接收人'; SendChooseTargetTemplate += ' </div>'; SendChooseTargetTemplate += ' <div class="main">'; SendChooseTargetTemplate += ' <div class="received">'; SendChooseTargetTemplate += ' <div class="received_menus">'; SendChooseTargetTemplate += ' <ul id="tab3">';SendChooseTargetTemplate += '{{each List}}'; //开始循环显示 班级名称 等同于 {{tmpl($data) \'SendChooseTargetCidsTemplate\'}}'; //记得前台页面要预编译这个模板缓存哦SendChooseTargetTemplate += ' <a href="#"><li οnclick="setTab(3,${$index })" {{if $index==0}} class="now" {{/if}}>' +' <div class="checkbox" οnclick="homeworkCheckbox(\'cc\',this);"></div>${Cname}</li> </a>';SendChooseTargetTemplate += '{{/each}}'; //结束SendChooseTargetTemplate += ' </ul>'; SendChooseTargetTemplate += ' </div>'; SendChooseTargetTemplate += ' <div class="received_list" id="tablist3">';//循环班级,并且显示每个班级里面的学生Sid列表 开始SendChooseTargetTemplate += ' {{tmpl($data) \'SendChooseTargetSidsTemplate\'}}'; //将数据,绑定到 预编译的模板里面//循环班级,并且显示每个班级里面的学生Sid列表 开始 SendChooseTargetTemplate += ' </div>'; SendChooseTargetTemplate += ' </div>'; SendChooseTargetTemplate += ' <div class="input">'; SendChooseTargetTemplate += ' <div class="select">已选择${AlreadySelectCount}人</div>'; SendChooseTargetTemplate += ' <a href="javascript:DisplayTab(\'tag15\')" class="send">完成</a>'; SendChooseTargetTemplate += ' </div>'; SendChooseTargetTemplate += ' </div>'; SendChooseTargetTemplate += ' </div>'; SendChooseTargetTemplate += ' </div>'; SendChooseTargetTemplate += ''; /*#endregion*/
嵌套调用的模板
/*#region SendChooseTargetSidsTemplate 发送候选人主窗口模板===>每个班级下的Sid列表*/var SendChooseTargetSidsTemplate = '{{each List}}'; SendChooseTargetSidsTemplate += ' <div class="tablist" style="display: {{if $index>0}}none{{else}}block{{/if}};">'; SendChooseTargetSidsTemplate += ' <div class="row">'; SendChooseTargetSidsTemplate += ' {{each Students}}'; SendChooseTargetSidsTemplate += ' <div class="rowcentent">'; SendChooseTargetSidsTemplate += ' <a href="#"><img src="${Sphoto}" width="73" height="73"></a><p>${Sname}</p>'; SendChooseTargetSidsTemplate += ' <div class="checkbox" οnclick="myCheckbox(\'cc\',this);"></div>'; SendChooseTargetSidsTemplate += ' </div>'; SendChooseTargetSidsTemplate += ' {{/each}}';SendChooseTargetSidsTemplate += ' </div>'; SendChooseTargetSidsTemplate += ' </div>'; SendChooseTargetSidsTemplate += '{{/each}}';/*#endregion*/
二:前台html数据缓存,以及 模板预编译
$(function () {var demodata ={UserId: 10895,AlreadySelectCount: 138,List:[{"Index": "0","Cid": "1","Cname": "101班","Check": "0", // 0表示1个都没有勾选 1表示至少勾选了1个 2表示全部勾选"Cphoto": "images/ico/014.png","Students": [{"Sid": "s1","Sname": "周杰伦","Sphoto": "", //这里可能没有图片,那么我们显示的时候,还要判断是否显示默认图片"Check": "0"},{"Sid": "s2","Sname": "李宇春","Sphoto": "images/ico/001.png","Check": "0"}]},{"Index": "1","Cid": "2","Cname": "102班","Check": "2", //0 0表示1个都没有勾选 1表示至少勾选了1个 2表示全部勾选"Cphoto": "images/ico/014.png","Students": [{"Sid": "s201","Sname": "周笔畅","Sphoto": "images/ico/002.png","Check": "1"},{"Sid": "s202","Sname": "存瑞","Sphoto": "images/ico/003.png","Check": "1"}]},{"Index": "2","Cid": "3","Cname": "103班","Check": "1", //0表示1个都没有勾选 1表示至少勾选了1个 2表示全部勾选"Cphoto": "images/ico/014.png","Students": [{"Sid": "s301","Sname": "卡拉克","Sphoto": "images/ico/005.png","Check": "1"},{"Sid": "s302","Sname": "刘德华","Sphoto": "images/ico/006.png","Check": "1"},{"Sid": "s303","Sname": "菲比","Sphoto": "images/ico/007.png","Check": "1"},{"Sid": "s304","Sname": "董瑞","Sphoto": "images/ico/008.png","Check": "0"}]}]};//$.template("SendChooseTargetCidsTemplate", SendChooseTargetCidsTemplate);//班级列表$.template("SendChooseTargetSidsTemplate", SendChooseTargetSidsTemplate);//班级下的学生列表$.template("SendChooseTargetTemplate", SendChooseTargetTemplate);//把模板缓存 加入 数据,然后添加到容器里面$.tmpl("SendChooseTargetTemplate", demodata).appendTo("#contentbody");});
重点就是如何在一个 模板里面,嵌套调用另外一个模板(还是用 temp 来调用),如何传递数据 (使用data这个关键字)
参考网址 http://www.jb51.net/article/27747.htm
转载于:https://www.cnblogs.com/joeylee/p/3459945.html
Jquery 模板插件 jquery.tmpl.js 的使用方法(2):嵌套each循环,temp调用(使用预编译的模板缓存)...相关推荐
- JQuery模板插件jquery.tmpl-动态ajax扩展
在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件--jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <link re ...
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
SlidesJS基本使用方法和官方文档解释 [Jquery幻灯片插件 Jquery相册插件] 标签: jquery文档functionstringdiv相册 2012-04-19 15:23 3931 ...
- js遍历树,多层嵌套for循环,递归
js遍历树,多层嵌套for循环,递归 一.目的 源数据示例 二.如何获得数据 多层for循环嵌套遍历树数据 递归遍历树数据 一.目的 遍历获取树数据中的部分数据. 源数据示例 menuType=2的数 ...
- jQuery遮罩插件jQuery.blockUI.js简介
概述: jQuery BlockUI插件可以在不锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会阻止用户在页面进行的操作,直到插件被关闭.BlockUI通过向DOM中添加元素实 ...
- jquery 滚轮插件 jquery.mousewheel.js
jquery.mousewheel插件使用 jquery中没有鼠标滚轮事件,那么可以使用jquery的滚轮事件插件jquery.mousewheel.js. Github地址:jquery-mouse ...
- jQuery validate插件submitHandler提交导致死循环解决方法
作者:海底苍鹰 地址:http://blog.51yip.com/jsjquery/1511.html dom对像的提交form.submit();和jquery对像的提交$('').submit() ...
- html面板插件ui,jQuery布局插件UI Layout简介及使用方法
UI Layout是一种基于jQuery的布局框架,项目主页http://layout.jquery-dev.net/.该框架的参考原型是ExtJS的border-layout,因此十分适用于将原有使 ...
- 一款很好用的Jquery 打印插件——jQuery.print.js
https://blog.csdn.net/JodenHe/article/details/70313604?locationNum=3&fps=1 登录网址https://github.co ...
最新文章
- 机器学习中的数据标准化
- python中文读音ndarray-Python Numpy 控制台完全输出ndarray的实现
- (转) Java多线程同步与异步
- 51单片机c语言乘法,求一个 89C51 简易计算器的c语言程序 只要加减乘除就行!
- C#程序中设置全局代理(Global Proxy)
- VMM2012应用指南之12- 创建自助服务用户并分配云
- 微信小程序种利用轮播图实现tab栏切换
- java.lang.NoSuchMethodError: javax.servlet.ServletContext.getVirtualServerName()Ljava/lang/String
- 安装zabbix服务器端
- espcms简约版的表单,提示页,搜索列表页
- 爬取豆瓣网电视剧数据(共1500条)
- Django项目部署到腾讯云服务器
- cloud2声卡_【箴言】带你解惑HyperX Cloud2(飓风)和Alpha(阿尔法)的终极选择
- 关于施耐德PLC下载程序错误出现“断言失败:‘Abort=Quit,Retry=Debug,lgnore=Continue’”
- 【记录一些名人博客地址】
- 行内元素之间产生的间隙
- 几个超赞的颜色搭配网站,非常实用!强烈推荐!!
- 英语--定语从句疑难解答
- uniapp开发app真机调试连接电脑服务器请求失败解决方法
- SQL:DBMS函数的差异(限制输出结果、拼接字段)
热门文章
- Visual Studio Code中比较不同的分支(How to compare different branches in Visual Studio Code)
- STM32_iC-MHM磁编码器使用
- Jetson Xavier NX学习笔记(三)系统烧录+开机教程+YOLOv7环境搭建+错误总结(详细版)
- Android Studio下拉菜单
- linux mint回收站,Autotrash:定时自动删除旧垃圾的命令行工具
- php正则表达式后向引用和贪婪模式
- LeetCode——706,设计哈希映射
- linux 定制自己的开机logo
- 【Vue基础七】--- 组件和模块概念
- 【JDK下载与安装教程】