码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-09-25 13:21:22      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:orm   pen   onclick   lips   format   time   mic   upn   控件   

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代码写下来:

技术分享
<</span>script type="text/template">  
<</span>tr mgid="{mgid}" mid="{mid}">  
    <</span>td>  
        <</span>input type="checkbox" mid="{mid}"><</span>/td>  
    <</span>td>  
        <</span>a href="{localfile}" data-fancybox-group="button" class="fancybox-buttons">  
         <</span>img src="{localfile}" style="width:45px;height:45px;"><</span>/a>  
    <</span>/td>  
    <</span>td>  
        <</span>input type="text" class="input-large valid" value="{medianame}" onblur="TextOnBlur(this)" onclick="TextOnFocus(this)"  
      name="medianame" mid="{mid}" readonly="readonly"><</span>/td>  
    <</span>td>  
        <</span>a onclick="updateMediaName(this)" href=";">重命名<</span>/a>  
        <</span>a onclick="showbulkUploadTemplate(this)" name="edit" localfile="{localfile}" href=";">替换<</span>/a>  
        <</span>a onclick="daleteMedia(this)" href=";">删除<</span>/a>  
        <</span>a onclick="setMediaFaceImage(this);" title="设置为分组【{groupname}】的封面" groupname="{groupname}" mid="{mid}" href=";">设置封面<</span>/a>  
    <</span>/td>  
<</span>/tr>  
</</span>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中

技术分享
<</span>html>  
<</span>body>  
<</span>table id="tableData">  
<</span>tr class="firstLine">  
    <</span>th></</span>th>  
    <</span>th>图片</</span>th>  
    <</span>th>图片名称</</span>th>  
    <</span>th>类型</</span>th>  
    <</span>th>大小</</span>th>  
    <</span>th>尺寸</</span>th>  
    <</span>th>上传日期</</span>th>  
    <</span>th>操作</</span>th>  
    <</span>th></</span>th>  
</</span>tr>  
</</span>table>  
</</span>body>  
</</span>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(‘‘));  
        //走完这一步其实就完成了,不会吧,这么简单,不错,就是这么简单!! 不信就自己动手去试试!  
    }  
});  
技术分享

为什么把模板代码放在

中并隐藏起来,那么可能你的代码中会用到$(‘input[type="text"]‘)查找控件时,不好意思,

就会把模板中的也统计进去了,这个并不是你想要的。所以我用

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

标签:orm   pen   onclick   lips   format   time   mic   upn   控件   

原文地址:http://www.cnblogs.com/fengyingwang/p/7591106.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!