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. 百度网盘生成二维码api

    分享出自精神,灵感来自大脑,在百度云网盘分享每一个文件,都会在页面生成一个二维码扫描的图片: 我就进一步看了该图片的地址: 发现没有,圈圈内是不是有点眼熟,就跟其他二维码api接口一样,只要盗用这段东 ...

  2. find_elements后点击不了抓取的元素

    1.莫名其妙抓不到元素,要去看句柄,是不是没有切换 h=driver.current_window_handle nh=driver.window_handles for i in nh: if i! ...

  3. GridView 实现LinkButton下载文件/附件

    <asp:TemplateField > <ItemTemplate> <asp:LinkButton ID="lbtnDownFile" runat ...

  4. redis3.2 Jedis java操作

    package com.util; import java.util.HashSet; import java.util.List; import java.util.Map; import java ...

  5. 转：MVC 数据验证

    一.基础特性 一.Required 必填选项,当提交的表单缺少该值就引发验证错误. 二.StringLength 指定允许的长度 指定最大长度: [StringLength()] //最大长度不超过2 ...

  6. Sqlserver 循环表

    CREATE TABLE dbo.[User] ( UID BIGINT IDENTITY ,Name ) NOT NULL ,Pwd ) NOT NULL ,CONSTRAINT PK_User P ...

  7. css表示屏幕宽度和高度

    expression(document.body.offsetWidth + "px"); expression(document.body.offsetHeight + &quo ...

  8. 如何设置jvm内存

    本文向大家简单介绍一下进行JVM内存设置几种方法,安装Java开发软件时,默认安装包含两个文件夹,一个JDK(Java开发工具箱),一个JRE(Java运行环境,内含JVM),其中JDK内另含一个JR ...

  9. [CC]获取ScalarField的值

    //根据字段滤波void MainWindow::doActionFilterByValue() ReferenceCloud* ManualSegmentationTools::segment(Ge ...

  10. [CC]手动点云分割

    CloudCompare中手动点云分割功能ccGraphicalSegmentationTool, 点击应用按钮后将现有的点云分成segmented和remaining两个点云, //停用点云分割功能 ...