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. nginx服务器配置

    nginx主要配置 #定义Nginx运行的用户和用户组user www www; #每个worker进程绑定到指定CPU ,均衡各CPU 负载worker_cpu_affinity 000000000 ...

  2. SQL JOIN\SQL INNER JOIN 关键字\SQL LEFT JOIN 关键字\SQL RIGHT JOIN 关键字\SQL FULL JOIN 关键字

    SQL join 用于根据两个或多个表中的列之间的关系,从这些表中查询数据. Join 和 Key 有时为了得到完整的结果,我们需要从两个或更多的表中获取结果.我们就需要执行 join. 数据库中的表 ...

  3. wordpres 自定义comment样式

    http://wange.im/diy-wordpress-comment-style.html function mytheme_comment($comment, $args, $depth) { ...

  4. 系统右键自定义功能-右键备份【C#】

    平时在某些公司发布网站的时候,都是手动备份文件,以免发布错误,做回滚使用.频繁的发布,在做备份的时候也会稍稍浪费点时间.当然在一些大的公司都会有一些自动发布系统,就不会出现这种问题了,对这种问题,我做 ...

  5. CentOS 7.2 安装配置Samba服务器

    1背景 转Linux刚刚1年,vim操作还不能应对工程代码,之前一直都是Gnome桌面 + Clion 作开发环境,无奈在服务器上没有这样的环境, 看同事是(Windows)Source Insigh ...

  6. SQLite - TRUNCATE TABLE

    https://www.tutorialspoint.com/sqlite/sqlite_truncate_table.htm Unfortunately, no TRUNCATE TABLE in ...

  7. 用android去写一个小程序

    前言: 软工的一个小作业:实现"黄金分割小游戏", 需要结对编程,队友:陈乐云    共用时两天. 早期思路设计: 采用键值对的形式,以Map作为存储结构.优点:能够将数据与用户对 ...

  8. TIJ——Chapter Eleven:Holding Your Objects

    Java Provides a number of ways to hold objects: An array associates numerical indexes to objects. It ...

  9. Leetcode: Circular Array Loop

    You are given an array of positive and negative integers. If a number n at an index is positive, the ...

  10. linux-------------linux的scp

    scp是有Security的文件copy,基于ssh登录. 命令基本格式: scp [OPTIONS] file_source file_target OPTIONS: -v 和大多数 linux 命 ...