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

随机推荐

git入门五（分支合并冲突和衍合）
分支合并冲突的处理合并分支的冲突时在不同的分支中修改了同一个文件的同一部分,程序无法把两份有差异的文件合并,这时候需要人为的干预解决冲突.当前处于master 分支,当dev 分支和master ...
<C#入门经典>学习笔记1之初识C#
序言选择< C#入门经典第五版>作为自学书籍,以此记录学习过程中的笔记与心得. C#简单介绍 1. C#是一种块结构的语言 2. C#区分大写和小写 C#变量 C#的变量定义与C语言相似 ...
JVM调优- jmap（转）
http://blog.csdn.net/fenglibing/article/details/6411953 1.介绍打印出某个java进程(使用pid)内存内的,所有‘对象’的情况(如:产生那些 ...
Linux进程间通信(二) - 消息队列
消息队列消息队列是Linux IPC中很常用的一种通信方式,它通常用来在不同进程间发送特定格式的消息数据. 消息队列和之前讨论过的管道和FIFO有很大的区别,主要有以下两点(管道请查阅我的另一篇文章 ...
python 正則表達式推断邮箱格式是否正确
import re def validateEmail(email): if len(email) > 7: if re.match("^.+\\@(\\[?) ...
POJ 2856 Y2K Accounting Bug【简单暴力】
链接: http://poj.org/problem?id=2586 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=26733#probl ...
九度OJ 1180：对称矩阵（矩阵计算）
时间限制:1 秒内存限制:32 兆特殊判题:否提交:2637 解决:1354 题目描述: 输入一个N维矩阵,判断是否对称. 输入: 输入第一行包括一个数:N(1<=N<=100),表 ...
BZOJ1505: [NOI2004]小H的小屋
BZOJ1505: [NOI2004]小H的小屋 Description 小H发誓要做21世纪最伟大的数学家.他认为,做数学家与做歌星一样,第一步要作好包装,不然本事再大也推不出去. 为此他决定先在自 ...
ThoughtWorks(中国) 程序员读书雷达
ThoughtWorks(中国)程序员读书雷达软件业的特点是变化.若要提高软件开发的技能,就必须跟上技术发展的步伐.埋首醉心于项目开发与实战,固然能够锤炼自己的开发技巧,却难免受限于经验与学识.世界 ...
cocos2d-x 源代码分析： control 源代码分析（控制类组件 controlButton）
源代码版本号来自3.1rc 转载请注明 cocos2d-x源代码分析总文件夹 http://blog.csdn.net/u011225840/article/details/31743129 1.继承 ...

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

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

随机推荐

热门专题