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使用模板快速填充数据的更多相关文章

  1. JS使用模板快速填充HTML控件数据

    function formatTemplate(dta, tmpl) { var format = { name: function(x) { return x ; } }; return tmpl. ...

  2. laravel框架一种方便的快速填充数据的方法

    首先大家都知道在laravel框架里是采用seeder来填充数据的,具体命令如下,请将如下的类名称替换成你具体的seeder类名. 首先创建seeder类 php artisan make:seede ...

  3. 向Word模板中填充数据

    现在有这样的需求,给Word文档的指定位置填充上特定数据,例如我们有一个终端,用来打印员工的薪资证明,对于一个公司来说,他的薪资证明模板是固定的,变化的地方是员工姓名,部门,职位等.我们只需要将这些指 ...

  4. [转载]java向word模板中填充数据(总结)

    使用过PageOffice动态生成word文档的人都知道,PageOffice可以给word文档的指定位置进行填充,这里我们所说的指定位置在PageOffice的专业术语里面有两个概念,一个叫做数据区 ...

  5. [原创]java向word模板中填充数据(总结)

    使用过PageOffice动态生成word文档的人都知道,PageOffice可以给word文档的指定位置进行填充,这里我们所说的指定位置在PageOffice的专业术语里面有两个概念,一个叫做数据区 ...

  6. 读取word模板,填充数据后导出

    一.需求说明 定期生成word报告,报告中含有文本.表格.图表等元素,依次获取进行替换,保留原有样式,生成新的word文档 二.引入依赖 <dependency> <groupId& ...

  7. asp.net读取execl模板并填充数据,关闭进程

    <head runat="server"> <title></title> <script src="Scripts/jquer ...

  8. Vue中如何书写js来渲染页面填充数据的部分代码

    new Vue({ el:"#app" , data:{ user:{ id:"", username:"", password:" ...

  9. POI往word模板中写入数据

    转: POI往word模板中写入数据 2018年03月24日 16:00:22 乄阿斗同學 阅读数:2977  版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn ...

随机推荐

  1. .net web 小基累

    获取当前网站的根目录:HttpContext.Current.Request.PhysicalApplicationPath+“Content”

  2. NONUNIFORM MEMORY ACCESS

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION In terms of commercia ...

  3. Secure Digital

    https://en.wikipedia.org/wiki/Secure_Digital#Technical_details Secure Digital (SD) is a non-volatile ...

  4. Netty In Action

    1 introduction 1.2 Asynchronous by design two most common ways to work with or implement an asynchro ...

  5. php数据优化

    Array ( [0] => Array ( [id] => 19 [receive_id] => 41 [mac] => a4:3d:78:fc:49:50 [staytim ...

  6. Angular-ngtable联动全选

    之前于Angular第三方插件ngTable的官网demo上看到的例子,但苦于demo中联动全选为选中所有,项目中并不适用,因此做了下小小的修改,修改目的只是为实现其功能,方法不敢苟同,若有更加简便的 ...

  7. canvas简单处理图片(反色处理)

    用canvas可以简单地处理图像,比如切割 灰色处理等,今天记下的是图像的反色处理. <!DOCTYPE html> <html> <head> <meta ...

  8. magento后台paypal设置

    如何在magento后台设置paypal呢? 这边把整理的简单跟大家分享一下. 1.system->config-paypel1.1 Merchant Country 设置国家1.2 Email ...

  9. 理解AX InventTrans的几种状态

    接触AX一段时间后,发现InventTrans表非常重要.它可以说是物流模块的核心,开发BI报表的话必须依赖此报表.   先来看官方释义: InventTrans表包含了库存交易的信息.当销售/采购订 ...

  10. JMeter学习-040-JMeter图形化 HTML 报表概要说明

    JMeter 3.0开始支持动态生成图形化 HTML dashboard报告,当前生成报告有一下两种方式: 1.脚本测试执行结束后,即生成HTML测试报告 2.通过之前生成的测试结果,生成HTML测试 ...