js使用模板快速填充数据
1.html
<!DOCTYPE html>
<html> <head>
<title>模板标签</title>
</head> <body>
<table id="tableData">
<tr class="firstLine">
<th></th>
<th>图片</th>
<th>图片名称</th>
<th>类型</th>
<th>大小</th>
<th>尺寸</th>
<th>上传日期</th>
<th>操作</th>
<th></th>
</tr>
</table>
</body>
2.js临时模板
<script type="text/template">
<tr mgid="{mgid}" mid="{mid}">
<td>
<input type="checkbox" mid="{mid}">
</td>
<td>
<a href="{localfile}" data-fancybox-group="button" class="fancybox-buttons">
<img src="{localfile}" style="width:45px;height:45px;">
</a>
</td>
<td>
<input type="text" class="input-large valid" value="{medianame}" name="medianame" mid="{mid}" readonly="readonly">
</td>
<td>{mediatype}</td>
<!-- 各位看官，自定义的三个属性在这里哦~~ -->
<td>{fsize}</td>
<td>{asize}</td>
<td>{atime}</td>
<td>
<a href="javascript:void(0);">重命名</a>
<a name="edit" localfile="{localfile}" href="javascript:void(0);">替换</a>
<a href="javascript:void(0);">删除</a>
<a title="设置为分组【{groupname}】的封面" groupname="{groupname}" mid="{mid}" href="javascript:void(0);">设置封面</a>
</td>
</tr>
</script>
3.核心代码
<script>
/*将模板写入到html*/
$.ajax({
url: '/html/datas',
type: 'get',
cache: false,
dataType: "json",
success: function(dta) {
if (!dta || !dta.rows || dta.rows.length <= 0) {
return;
}
//获取模板上的HTML
var html = $('script[type="text/template"]').html();
var arr = [];
//对数据进行遍历
$.each(dta.rows, function(i, o) {
//自定义字段
o.atime = getFormatDate(o.uploadtime ? o.uploadtime : o.createtime, 'yyyy-MM-dd');
o.asize = (o.width && o.height) ? o.width + ' * ' + o.height : '-';
o.fsize = o.seizespace ? o.seizespace + ' KB' : '-';
arr.push(formatTemplate(o, html));
});
$('#tableData').append(arr.join(''));
}
});
</script> <script>
/*日期格式*/
function getFormatDate(xdate, format) {
try {
var format = format || 'yyyy-MM-dd HH:mm:ss';
var date = (xdate instanceof Date) ? xdate : new Date(parseInt(xdate.replace('/Date(', '').replace(')/', ''), 10));
var lang = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'H+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for (var key in lang) {
if (new RegExp('(' + key + ')').test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
lang[key] : ('00' + lang[key]).substr(('' + lang[key]).length));
}
}
return format;
} catch (e) {
return '-';
}
}
</script>
js使用模板快速填充数据的更多相关文章
- JS使用模板快速填充HTML控件数据
function formatTemplate(dta, tmpl) { var format = { name: function(x) { return x ; } }; return tmpl. ...
- laravel框架一种方便的快速填充数据的方法
首先大家都知道在laravel框架里是采用seeder来填充数据的,具体命令如下,请将如下的类名称替换成你具体的seeder类名. 首先创建seeder类 php artisan make:seede ...
- 向Word模板中填充数据
现在有这样的需求,给Word文档的指定位置填充上特定数据,例如我们有一个终端,用来打印员工的薪资证明,对于一个公司来说,他的薪资证明模板是固定的,变化的地方是员工姓名,部门,职位等.我们只需要将这些指 ...
- [转载]java向word模板中填充数据（总结）
使用过PageOffice动态生成word文档的人都知道,PageOffice可以给word文档的指定位置进行填充,这里我们所说的指定位置在PageOffice的专业术语里面有两个概念,一个叫做数据区 ...
- [原创]java向word模板中填充数据（总结）
使用过PageOffice动态生成word文档的人都知道,PageOffice可以给word文档的指定位置进行填充,这里我们所说的指定位置在PageOffice的专业术语里面有两个概念,一个叫做数据区 ...
- 读取word模板，填充数据后导出
一.需求说明 定期生成word报告,报告中含有文本.表格.图表等元素,依次获取进行替换,保留原有样式,生成新的word文档 二.引入依赖 <dependency> <groupId& ...
- asp.net读取execl模板并填充数据，关闭进程
<head runat="server"> <title></title> <script src="Scripts/jquer ...
- Vue中如何书写js来渲染页面填充数据的部分代码
new Vue({ el:"#app" , data:{ user:{ id:"", username:"", password:" ...
- POI往word模板中写入数据
转: POI往word模板中写入数据 2018年03月24日 16:00:22 乄阿斗同學 阅读数:2977 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn ...
随机推荐
- Tomcat常见问题汇总
1.在服务器上一定要开启-server参数 #直接在一堆注释下添加即可 #即是在 # OS specific support.注释之前 JAVA_OPTS= -server 2.tomcat启动很慢 ...
- java 特性
1.不支持默认参数 2. 没有指针.malloc.free .内存会自动回收 3. 解释性语言,必须跑在虚拟机上,可以实现跨平台
- django学习笔记
django笔记----建立疾病预测系统的web应用 @buyizhiyou 工作环境:ubuntu16.04LTS+ ...
- vert.x学习（二），使用Router来定义用户访问路径
这里需要用到vertx-web依赖了,依然是在pom.xml里面导入 <?xml version="1.0" encoding="UTF-8"?> ...
- jqxComboBox
var uptype_source = [{ "TYPE_DESC": "总额度", " }, { "TYPE_DESC": &q ...
- Method Swizzling
学习博客: http://www.cocoachina.com/ios/20160121/15076.html (这个作者太牛了,写了我一直想知道的类簇的swizz方法) 一. 一般的swizz 先给 ...
- 关于ios 3D变换 CGAffineTransformIdentity
每次做完3D变换以后,重新设置view的frame时,记得用CGAffineTransformIdentity 对3D变换进行还原,否则将会影响frame.当你对view进行3D变换后,重新设置vie ...
- 偶遇到 java.util.ConcurrentModificationException 的异常
今天在调试程序 遇到了如此问题 贴上代码来看看稍后分析 List<String> list = null;boolean isUpdate = false;try { list = JSO ...
- Hive：Spark中如何实现将rdd结果插入到hive1.3.0表中
DataFrame写入hive API: registerTempTable函数是创建spark临时表 insertInto函数是向表中写入数据,可以看出此函数不能指定数据库和分区等信息,不可以直接进 ...
- 一个nginx匹配很诡异的问题
nginx配置如下: location ~ \.php$ { root /opt/nginx/html; fastcgi_pass 127.0.0.1:9000; fastcgi_index inde ...