artTemplate-master的应用
刚开始,在没有使用这个模板之前,一致都是后台返回一个json的字符串,来在前端自己拼接字符串,不但麻烦,而且费时费力,而且还有时候经常拼接错误!导致了工作效率的延长
js模板的使用
<script type="html" id="temp">
{{if data.flag}}
{{each data.info as value i}}
<tr>
<td><span>{{value.name}}</span></td>
<td><span>{{value.mobile}}</span></td>
<td><span class="color333">{{value.company_name}}</span></td>
<td><span>{{value.linkman}}</span></td>
<td><span>{{value.create_time}}</span></td>
</tr>
{{/each}}
<tr>
<td colspan="5">
共<span>{{data.PageAllNum}}</span>页/第<span>{{data.PageNum}}</span>页
{{if data.prev}}<span onclick='PageJump(this,"{{data.prev}}","{{data.card_section}}")'>上一页</span>{{/if}}
{{if data.next}}<span onclick='PageJump(this,"{{data.next}}","{{data.card_section}}")'>下一页</span>{{/if}}
</td>
</tr>
{{/if}}
</script>
返回的json数据格式
{
"pageNum": 1,
"AllPageNum": 1,
"info": [
{
"id": "35",
"card_men": "于庆恒",
"card_mobile": "13161589217",
"card_num": "200",
"card_company": "",
"time": "2016-12-22 10:47",
"card_section": "9000002110-9000002699",
"percentage": "0"
},
{
"id": "8",
"card_men": "于庆恒",
"card_mobile": "13161589217",
"card_num": "200",
"card_company": "",
"time": "2016-12-22 10:47",
"card_section": "9000002110-9000002699",
"percentage": "0"
}
],
"flag": true,
"pid": "42"
}
ajax时的代码使用
function PageJump(obj,page,card){
$.ajax({
url:"/admin.php/User/vip_people_card",
type:"GET",
data:{PageNum:page,card_section:card},
dataType:"json",
success:function(msg){
console.log(msg);
var html = template('temp', {data: msg});
$(obj).parents('.tbody').html(html);
}
})
}
注:
中的temp必须和
这个保持一致,type也不能为空,也不可以为"text/javascript"
artTemplate-master的应用的更多相关文章
- art-template模板应用
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- http服务&ajax编程
http服务&ajax编程 1.服务器 前言:通俗的讲,能够提供某种服务的机器(计算机)称为服务器 1.1.服务器类型 按照不同的划分标准,服务可划分为以下类型: 按服务类型可分为:文件服务器 ...
- SongTaste音乐下载器
SongTaste音乐下载器 Songtaste是一个非常好的音乐推荐网站, 奈何和duomi搅合在一起, 导致下载音乐非常的麻烦, 现在写了一个简单的"下载器", 通过它可以下载 ...
- js模板引擎art-template使用方法
art-template是款性能卓越的 js 模板引擎 https://aui.github.io/art-template/ 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好:语法. ...
- artTemplate教程
artTemplate教程 官方文档 一个简单的例子 <!DOCTYPE html> <html lang="zh"> <head> <m ...
- JData 整合ArtTemplate的前端框架
因为项目需要和自己的兴趣,几个月前结合模板解析神速的ArtTemplate,自己写了个框架取名JData,多多指教啊---因为一直没时间写文档,为了能够更方便地使用和避免我把代码忘了,今天抽空把文档写 ...
- art-template模板渲染及其过滤器
原生语法 使用原生语法,需要导入template-native.js文件.在HTML中定义模板,注意模板的位置,不要放到被渲染区域,防止模板丢失. <script id="tpl&qu ...
- artTemplate模版引擎的使用
artTemplate: template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不 ...
- xamarin MasterDetailPage点击Master时卡顿现象
在很多项目中经常会使用到MasterDetailPage的布局方式,而且一般做为主页面来开发,在开发中,发现一个并不算Bug的问题,但是却发生了,以此记录下来,方便大家探讨. 现象是这样的,我开发了一 ...
- backup3:master 数据库的备份和还原
在SQL Server 中,master 数据库记录系统级别的元数据,例如,logon accounts, endpoints, linked servers, and system configur ...
随机推荐
- spring ioc 源码解析
什么是ioc? 通俗的解释是:(spring)框架中,完成对象的创建和注入的容器. springIOC体系结构: spring IOC的创建是典型的工厂模式,这一系列的bean工厂如上所示. 其核心是 ...
- NDK笔记(二)-在Android Studio中使用ndk-build
前面一篇我们接触了CMake,这一篇写写关于ndk-build的使用过程.刚刚用到,想到哪儿写哪儿. 环境背景 Android开发IDE版本:AndroidStudio 2.2以上版本(目前已经升级到 ...
- 双向数据绑定(angular,vue)
最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue. angular众所周知是使用的脏检查($dirty).一开始大家会认为angular开启了类似setInter ...
- AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题
场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...
- 【Android自学日记】【转】Android Fragment 真正的完全解析(下)
上篇博客中已经介绍了Fragment产生原因,以及一些基本的用法和各种API,如果你还不了解,请看:Android Fragment 真正的完全解析(上). 本篇将介绍上篇博客提到的:如何管理Frag ...
- OpencV2.4.13前景提取示例代码
OpenCV2编译 基于高斯混合模型 #include<fstream> #include<iostream> #include<iostream> #inclu ...
- Java并发1——线程创建、启动、生命周期与线程控制
内容提要: 线程与进程 为什么要使用多线程/进程?线程与进程的区别?线程对比进程的优势?Java中有多进程吗? 线程的创建与启动 线程的创建有哪几种方式?它们之间有什么区别? 线程的生命周期与线程控制 ...
- js_apply与call
在ECAMScript3给Function的原型定义了两个方法,它们是Function.prototype.call和Function.prototype.apply. 本文详细介绍了apply与ca ...
- android 4.4/5.1上使用aar的问题
在Android6.0上可以使用LOCAL_STATIC_JAVA_AAR_LIBRARIES.build脚本会把指定的aar解压缩到临时目录,并将class.jar和res添加到对应的变量. LOC ...
- arm_GPIO_简单编程例题
题目 分析下面的汇编led.s,查看S5PV210手册,说明程序的功能,和最终的运行结果,以及相关的硬件原理图,S5PV210手册可以在教学资源里的学习资料文件夹中下载. .equ GPH3CON ...