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

随机推荐

(2) yum源配置-163
1.获取yum源文件登录http://mirrors.163.com/.help/centos.html,查看CentOS6的链接地址(右键点击“CentOS6”,选择复制链接地址),链接地址为:h ...
Call to static DateFormat
Bug: Call to method of static java.text.DateFormatPattern id: STCAL_INVOKE_ON_STATIC_DATE_FORMAT_INS ...
git add -A使用说明
git help add -A, --all Like -u, but match <filepattern> against files in the workin ...
嵌入式专题： S5PV210 - MPEG4编码
我想说不台的平台,如tiny210和x210.它们的头文件是有稍微区别的. 我这个是x210下的代码.但都须要注意的是NV12T与NV12的问题,默认要求输入的图片是NV12T,经过调整之后,能够同意 ...
Struts2+hibernate+spring 配置事物
今天自信看了看hibernate的事物配置问题,转载了其他人的日志,仅用来学习. struts+hibernate+spring事务配置 (2009-01-14 21:49:47) 转载▼ 标签: i ...
初步认识Spring MVC框架
Spring MVC 框架和Struts2等一样属于MVC框架,用于处理页面和后台的交互,据说它的效率要高于Struts2.下面县先说一下Spring MVC的结构,Spring MVC主要由Disp ...
在普通网页中如何调用html5+的plus对象
<script> //用法: HTML5+的plus对象,必须由click事件触发后,才能在普通网页中使用.所以在没有click的情况下,调用本文件可以解决问题! //在代码中使用: pl ...
Java基础 - 变量转换
在java中变量转发分为两种,隐式转换和强制转换隐式转换: byte a = 10; int b = 20; byte c = a + b; // 该方法会报错,转换过程中字节数只能从小变大,不能从 ...
mongodb 的注意点
昨天同事安装mongodb遇到了些问题,问了下我,后拉发现都是些细节没注意(讲道理这应该是很简单,一顿操作就ok的事情) 首先,下载 mongo包, 然后 ,解压安装, 启动之. 问题就出现在他后台启 ...
JVM - 堆外内存
看了不少资料,总结下: 堆外内存 / 直接内存(Direct Memory)JDK1.4中引入的NIO类,基于channel和Buffer的I/O方式,可用Native库直接分配堆外内存,然后利用一个 ...

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

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

随机推荐

热门专题