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. visual studio快捷键

    进行自动对齐操作[ctrl+k+f] 使用组合键“Ctrl+J”可以在不完全输入关键词时系统自动添加提示 注释用组合键“Ctrl+K+C” 取消注释用组合键“Ctrl+K+U” 设置断点---F9 启 ...

  2. MySQL 表分区详解MyiSam引擎和InnoDb 区别（实测）

    一.什么是表分区通俗地讲表分区是将一大表,根据条件分割成若干个小表.mysql5.1开始支持数据表分区了.如:某用户表的记录超过了1000万条,那么就可以根据入库日期将表分区,也可以根据所在地将表分区 ...

  3. 通过命令创建vue项目

    环境要求:  安装有 Node.js. vue. vue-cli . 创建项目: vue init webpack projectName 进入项目,下载依赖: npm install 或者 cnpm ...

  4. AngularJS基础知识1

    一.angularJS简介 1.什么是 AngularJS? AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.AngularJS是协助搭建单页面工程 ...

  5. sparksql---通过pyspark实现

    上次在spark的一个群里面,众大神议论:dataset会取代rdd么? 大神1:听说之后的mlib都会用dataset来实现,呜呜,rdd要狗带 大神2:dataset主要是用来实现sql的,跟ml ...

  6. zookeeper清除事物日志

    dataDir=/data/zookeeper/data dataLogDir=/data/zookeeper/log       zk事物日志(快照)存放目录,高负荷工作的时候,会产生大量的日志,需 ...

  7. 从 IClassFactory 为 CLSID 为 {00024500-0000-0000-C000-000000000046} 的 COM 组件创建实例失败，原因是出现以下错误: 8001010a解决办法

    1.在命令行中输入:dcomcnfg,会显示出“组件服务”管理器 2.打开“组件服务->计算机->我的电脑->DCOM 配置”,找到“Microsoft Word文档”,单击右键,选 ...

  8. Hosts文件

    Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开, 其作用:就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一个需要登录的网址时, ...

  9. WebForm——IIS服务器、开发方式和简单基础

    一.B/S和C/S 1.C/S C/S 架构是一种典型的两层架构,其全程是Client/Server,即客户端服务器端架构,其客户端包含一个或多个在用户的电脑上运行的程序,而服务器端有两种,一种是数据 ...

  10. linux-----------centos上搭建了lnmp环境，项目也上传上去了，刚开始没事，后来重启了以后就不行了。

    关闭防火墙就可以了.或者你打开防火墙对80端口的限制. systemctl stop firewalld.service #停止firewall systemctl start firewalld.s ...