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

随机推荐

prometheus监控方案
简介 prometheus 是一个开源的系统监控和告警的工具包,其采用pull方式采集时间序列,通过http协议传输. 架构每个应用都通过javaagent向外提供一个http服务暴露出自己的JMX ...
3s 简介
"3S"技术是英文遥感技术(Remote Sensing RS).地理信息系统(Geographical information System GIS).全球定位系统(Global ...
Zabbix二次开发_03api列表
基于zabbix 3.0 https://www.zabbix.com/documentation/3.0/manual/api/reference Method reference This sec ...
x^a=b(mod c)求解x在[0,c-1]上解的个数模板+原根求法
/************************************* 求解x^a=b(mod c) x在[0,c-1]上解的个数模板输入:1e9>=a,b>=1,1e9>= ...
This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its 错误解决办法
This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary log ...
什么是Mocking framework？它有什么用？（转）
今天我想讲下关于mocking frameworks,并且解释下他为什么有用处.我将给你们展示用和不用mocking framework两种测试方法. 假设我们已经有了一个Driver类: publi ...
6.2.3-AbstractBeanFactory
AbstractBeanFactory体系: 这个抽象类中很重要的实现了BeanFactory中得一个方法,doGetBean(); @SuppressWarnings("unchecked ...
Python菜鸟之路：Python基础-逼格提升利器：装饰器Decorator
一.装饰器装饰器是一个很著名的设计模式,经常被用于有切面需求的场景,较为经典的有插入日志.性能测试.事务处理等. 装饰器是解决这类问题的绝佳设计,有了装饰器,我们就可以抽离出大量函数中与函数功能本身 ...
Java基础 - 标识符
标识符就是用来给包,类,方法变量等起名字的符号组成规则: A:unicode字符数字字符,英文大小写字母,汉字(不建议使用汉字) B:下划线 _ C:美元符 $ 注意事项: A:不能以数字开头 B ...
【译】快速高效学习Java编程在线资源Top 20
想要加强你的编程能力吗?想要提升你的 Java 编程技巧和效率吗? 不用担心.本文将会提供快速高效学习 Java 编程的 50 多个网站资源: 开始探索吧: 1.MKyong:许多开发者在这里可以找到 ...

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

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

随机推荐

热门专题