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. Organization SYMMETRIC MULTIPROCESSORS

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION Figure 17.4 depicts i ...

  2. IntelliJ IDEA中如何显示和关闭----工具栏，目录栏，（转）

    工具栏:就是上面有个好多的快捷按钮的那个栏,比如撤销,上传,下载设置,扳手按钮,等等. 目录栏,就是刚刚装的时候,这个会显示,但是不知道怎么关闭,但是这个又没什么用. 如图: 就是对应的几个按钮,自己 ...

  3. 用Arduino剖析PWM脉宽调制

    PWM(Pulse Width Modulation)简介 PWM,也就是脉冲宽度调制,用于将一段信号编码为脉冲信号,也就是方波信号.多用于在数字电路中驱动负载随时间变化的电子元件,如LED,电机等. ...

  4. vue.js 学习笔记

    /*属性*/ 标签内的属性都用 :attr="xxx" 的形式 /*模板*/ {{ msg }} -> 绑定数据 {{ *msg }} -> 数据只绑定一次 {{{ m ...

  5. 快速原型设计工具-Axure RP的介绍及简单使用（生产初期向客户展示设计产品的原型-也就是展示产品）

    啧啧~~ 给大家介绍一款超棒的原型设计工具--美国Axure Software Solution公司旗舰产品Axure RP 这款工具通俗的说呢,就是在项目整体需求考察后对整体设计一个简要性概括!设计 ...

  6. composer install 卡壳

    曾经用npm依赖包的时候也遇到了相应的问题,总而言之在国内,各种依赖包就换成国内的镜像吧你懂得! linux 或 window 命令行输入 composer config -g repo.packag ...

  7. iOS蓝牙开发CoreBluetooth快速入门

    在iOS开发中,实现蓝牙通信有两种方式,一种是使用传统的GameKit.framework,另一种就是使用在iOS 5中加入的CoreBluetooth.framework. 利用CoreBlueto ...

  8. CS193P - 2016年秋 第一讲 课程简介

    Stanford 的 CS193P 课程可能是最好的 ios 入门开发视频了.iOS 更新很快,这个课程的最新内容也通常是一年以内发布的. 最新的课程发布于2016年春季.目前可以通过 iTunes ...

  9. myeclipse,eclipse控制台输出乱码问题

    首先我描述一下问题,我在做udp socket编程(一个聊天的程序)的时候,从控制台中读取中文,然后再向控制台中打印,出现中文乱码的情况. 1.出现乱码最根本的原因就是编码和解码不一致的情况.问题分析 ...

  10. Oracle的DML语言必备基础知识

      前提是咱们都已经对常用的数据操纵语言非常熟悉了,对标准SQL: SELECT子句                --指定查询结果集的列 DROM子句                 --指定查询来 ...