JS使用模板快速填充HTML控件数据

function formatTemplate(dta, tmpl) {

    var format = {

        name: function(x) {

            return x ;

        }

    };

    return tmpl.replace(/{(\w+)}/g, function(m1, m2) {

        if (!m2)

            return "";

        return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];

    });

}

此方法就是用来填充格式数据的

接下来就用示例来说明：

例如：从服务器取出一个JSON串，把数据显示在一组HTML控件上，现在我先把HTML代码写下来:

<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}" onblur="TextOnBlur(this)" onclick="TextOnFocus(this)" 
　　　　　　name="medianame" mid="{mid}" readonly="readonly"></td>

    <td>

        <a onclick="updateMediaName(this)" href="javascript:void(0);">重命名</a>

        <a onclick="showbulkUploadTemplate(this)" name="edit" localfile="{localfile}" href="javascript:void(0);">替换</a>

        <a onclick="daleteMedia(this)" href="javascript:void(0);">删除</a>

        <a onclick="setMediaFaceImage(this);" title="设置为分组【{groupname}】的封面" groupname="{groupname}" mid="{mid}" href="javascript:void(0);">设置封面</a>

    </td>

</tr>

</script>

若我们从服务器上取到的JSON如下:

{

    "total": "1",

    "page": "1",

    "records": "3",

    "rows": [{

        "groupname": "美食图片",

        "mid": 4766,

        "sid": 517,

        "medianame": "Tulips",

        "mgid": 549,

        "mediatype": "image",

        "mediaid": "",

        "timestamp": "",

        "localfile": "/UploadFile/image/201409/14/0x6dvf.jpg",

        "picurl": "",

        "thumbid": "",

        "voiceformat": "",

        "state": 1,

        "createtime": "\/Date(1410673220000+0800)\/",

        "uploadtime": "\/Date(1410673220000+0800)\/",

        "width": 480,

        "height": 360,

        "seizespace": 17.41

    }, {

        "groupname": "美食图片",

        "mid": 4765,

        "sid": 517,

        "medianame": "Penguins",

        "mgid": 549,

        "mediatype": "image",

        "mediaid": "",

        "timestamp": "",

        "localfile": "/UploadFile/image/201409/14/6iluw6.jpg",

        "picurl": "",

        "thumbid": "",

        "voiceformat": "",

        "state": 1,

        "createtime": "\/Date(1410673215000+0800)\/",

        "uploadtime": "\/Date(1410673215000+0800)\/",

        "width": 480,

        "height": 360,

        "seizespace": 15.62

    }, {

        "groupname": "美食图片",

        "mid": 4764,

        "sid": 517,

        "medianame": "Lighthouse",

        "mgid": 549,

        "mediatype": "image",

        "mediaid": "",

        "timestamp": "",

        "localfile": "/UploadFile/image/201409/14/fx0kzp.jpg",

        "picurl": "",

        "thumbid": "",

        "voiceformat": "",

        "state": 1,

        "createtime": "\/Date(1410673209000+0800)\/",

        "uploadtime": "\/Date(1410673209000+0800)\/",

        "width": 480,

        "height": 360,

        "seizespace": 14.2

    }]

}

填写到定义在下面Table中

<html>

<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>

</html>

好了准备工作做好了，重点的来了

$.ajax({

    url: '/manage/GetAllMediaListPage',

    type: 'get',

    data: data,

    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就是上面rows数组中的值, formatTemplate是最开始定义的方法.

            arr.push(formatTemplate(o, html));

        });

        //好了，最后把数组化成字符串，并添加到table中去。

        $('#tableData').append(arr.join(''));

        //走完这一步其实就完成了，不会吧，这么简单，不错，就是这么简单!! 不信就自己动手去试试!

    }

});

为什么把模板代码放在<script></script>中间，假如，你把模板代码放在某个<div>中并隐藏起来，那么可能你的代码中会用到$('input[type="text"]')查找控件时，不好意思，

就会把模板中的也统计进去了，这个并不是你想要的。所以我用<script>，这么做还有一个好处，就是不会被当成HTML来执行显示出来，但我们也得保证不能当成js来执行，所以

加了个type="text/template"，没有这个类型的，自己明白就好了。

另外，像o.mid的数值只会填充到{mid}这个里，不会填充到别的地方去，而且{mid}可以存在多个，一并全部替换成实际数值了。

接下来的一个问题就是，我取到的数据可能并不是我要给用户显示的，那么就需要变通一下了

var html = $('script[type="text/template"]').html();

var arr = [];

$.each(dta.rows, function(i, o) {

    //atime,asize和fsize这三个变量是之前的JSON中没有的，可灵活设置一下:

    //格式化时间,当然getFormatDate这个函数我也公布出来了，格式化时间而已，见最后面。

    o.atime = getFormatDate(o.uploadtime ? o.uploadtime : o.createtime, 'yyyy-MM-dd');

    //图片的尺寸大小: 就是把上面的o.width和o.height变量组合一下，如果任何一个不存在，则返回"-"

    o.asize = (o.width && o.height) ? o.width + ' * ' + o.height : '-';

    //图片大小。存在才显示xxKB

    o.fsize = o.seizespace ? o.seizespace + '&nbsp; KB' : '-';

    //格式化模板数据

    arr.push(formatTemplate(o, html));

});

$('#tableData').append(arr.join(''));

完整的HTML模板如下:

<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}" onblur="TextOnBlur(this)" onclick="TextOnFocus(this)" name="medianame" mid="{mid}"
 readonly="readonly"></td>

        <td>{mediatype}</td>

        <!-- 各位看官，自定义的三个属性在这里哦~~ -->

        <td>{fsize}</td>

        <td>{asize}</td>

        <td>{atime}</td>

        <td>

            <a onclick="updateMediaName(this)" href="javascript:void(0);">重命名</a>

            <a onclick="showbulkUploadTemplate(this)" name="edit" localfile="{localfile}" href="javascript:void(0);">替换</a>

            <a onclick="daleteMedia(this)" href="javascript:void(0);">删除</a>

            <a onclick="setMediaFaceImage(this);" title="设置为分组【{groupname}】的封面" groupname="{groupname}" mid="{mid}" href="javascript:void(0);">设置封面</a>

        </td>

    </tr>

</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 '-';

    }

}

JS使用模板快速填充HTML控件数据的更多相关文章

js使用模板快速填充数据
1.html <!DOCTYPE html> <html> <head> <title>模板标签</title> </head> ...
【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨
原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...
JS获取填报扩展单元格控件的值
1. 问题描述填报预览时,我们想获取到某个控件的值相对来说较容易.但如果控件是扩展的,就只能获取到第一个值,无法根据扩展一行行获取对应的值. 例:本意是想获取到袁成洁,结果还是获取到第一个单元格值孙 ...
JS调用Android、Ios原生控件
在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
ASP.NET开发中主要的字符验证方法-JS验证、正则表达式、验证控件、后台验证
ASP.NET开发中主要的字符验证方法-JS验证.正则表达式.验证控件.后台验证 2012年03月19日星期一下午 8:53 在ASP.NET开发中主要的验证方法收藏 <1>使用JS验 ...
js如何获取asp.net服务器端控件的值(label,textbox,dropdownlist,radiobuttonlist等)
js如何获取asp.net服务器端控件的值(label,textbox,dropdownlist,radiobuttonlist等) 欢迎访问原稿:http://hi.baidu.com/2wixia ...
js如何遍历表单所有控件
js如何遍历表单所有控件一.总结一句话总结: 1.获取form表单里面的的所有元素:通过formelement.elements,这里form元素通过name属性直接定位 var fele=for ...
WPF 后台获得数据模板里的内容控件（DataTemplate）
原文:WPF 后台获得数据模板里的内容控件(DataTemplate) 假如 <Window.Resources> 里有一个 Datatemplate 我想获得TextBlo ...
客户端用JavaScript填充DropDownList控件服务器端读不到值
填充没有任何问题,但是在服务器端却取不出来下拉表中的内容.页面代码如下. <form id="form1" runat="server"> < ...

随机推荐

关于Java静态代码块、初始化块、构造函数的调用顺寻问题？
public class ClassA { public ClassA(){ System.out.println("A 构造..."); } { System.out.print ...
JWT简介json web token bear token
, "exp": 1502360328,(相差3600s) "nbf": , "jti": "R0Gd00AvOW259LGo&q ...
Android自定义action与permission!!! (转)
原文地址:http://blog.csdn.net/android_tutor/article/details/6310418#reply 大家好,今天给大家简单分享一下Android中自定义acti ...
web应用的负载均衡、集群、高可用(HA)解决方案
看看别人的文章: 1.熟悉几个组件 1.1.apache —— 它是Apache软件基金会的一个开放源代码的跨平台的网页服务器,属于老牌的web服务器了,支持基于Ip或者域名的虚拟主机,支持代 ...
Binding基础文摘
简要 Binding基础 Binding源与路径列举Binding的源 Binding基础从Coding中看Binding的基础. 先定义一个Student类: public class Stud ...
CSS3 --添加阴影（盒子阴影、文本阴影的使用）
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
PHP-Manual的学习----【语言参考】----【类型】-----【array数组】
1.Array 数组 PHP 中的数组实际上是一个有序映射.映射是一种把 values 关联到 keys 的类型.此类型在很多方面做了优化,因此可以把它当成真正的数组,或列表(向量),散列表(是 ...
安装virtualBox 增强包
1 在原始操作系统安装. 2 打开USB设置. 3 运行虚拟机中的Linux中,Device->install guest additions 再安装增强包. 4 插入U盘,如果这时可以看到U盘 ...
C#彻底解决Oledb连接Excel数据类型不统一的问题
在使用Microsoft.Jet.OLEDB.4.0连接Excel,进行读取数据,相对使用传统的COM来读取数据,效率是很高的.但相对传统COM操作Excel来说,及存在数据类型转换的问题.因为使用O ...
【Robot Framework】---- Robot Framework简介、特点、RIDE
Robot Framework简介.特点.RIDE 一.简介.特点. Robot Framework是一款python编写的功能自动化测试框架.具备良好的可扩展性,支持关键字驱动,可以同时测试多种类型 ...

JS使用模板快速填充HTML控件数据

JS使用模板快速填充HTML控件数据的更多相关文章

随机推荐

热门专题