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. tp文件上传;org/RBAC.class.php 权限类;think/page,class,php分页类;

    一.上传表单: 注意,要使用上传功能 你的表单需要设置 enctype="multipart/form-data" <form action="__URL__/up ...

  2. vert.x学习（二），使用Router来定义用户访问路径

    这里需要用到vertx-web依赖了,依然是在pom.xml里面导入 <?xml version="1.0" encoding="UTF-8"?> ...

  3. QStriingList

    #include <QCoreApplication> #include<QDebug> #include<QStringList> int main(int ar ...

  4. cloudera learning6:Hadoop Security

    保证Hadoop安全的最有效方法是对cluster进行隔离(isolation,常用方法是把大集群划分若干个小集群). Hadoop安全措施的目的是防止好的人不小心做了坏的事,而非防止坏人坏事. Ke ...

  5. 网络服务器之HTTPS服务

    import ssl, socket, time if __name__ == "__main__": context = ssl.SSLContext(ssl.PROTOCOL_ ...

  6. 安装完magento后，其他电脑无法访问magento，URL自动跳转到http://localhost/magento

    问题:在电脑A上安装完了magento 1.7.0.2 然后, 在电脑A上用 http://localhost/magento 访问网站,没有问题. 但在电脑B 上用 http://192.168.4 ...

  7. nexus

    下载地址:http://pan.baidu.com/s/1nvwIoa9   (Jfrog/Nexus) maven 仓库: http://mvnrepository.com/ 用户名密码分别是:ad ...

  8. winserver2008 management note

    1,磁盘online及介质保护 Windows server 2008 增加的磁盘无法初始化-提示:介质受写入保护.插了下相关说明,在VMware的帖子找到了解决办法: 开始-运行,cmd.打开命令提 ...

  9. Git tag push 到远端仓库

    很早之前,我们就提到过用Git tag来给工程打上标签,但是这个命令只是在本地仓库打标签而已, 为了能把标签同步到远程服务器,我们可以这样做: 默认情况下,git push并不会把tag标签传送到远端 ...

  10. git tag — 标签相关操作

    标签可以针对某一时间点的版本做标记,常用于版本发布. 列出标签 $ Git tag # 在控制台打印出当前仓库的所有标签$ git tag -l 'v0.1.*' # 搜索符合模式的标签 打标签 gi ...