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

随机推荐

如何开启Apache Rewrite功能
一.Ubuntu默认未开启Rewrite支持 apche模块加载工作已分散到不同的配置文件,这样看起来似乎更为合理,管理起来也非常方便.下面看一下如何开启Rewrite模块,当用户需使用301重定向. ...
(2) yum源配置-163
1.获取yum源文件登录http://mirrors.163.com/.help/centos.html,查看CentOS6的链接地址(右键点击“CentOS6”,选择复制链接地址),链接地址为:h ...
阿里云服务器---centos编译安装ffmpeg
环境系统环境:CentOS release 6.7 (Final) 需求编译安装ffmpeg 获取依赖安装依赖包 yum install -y autoconf automake cmake f ...
信号量semaphore解析
1 基础概念信号量在创建时须要设置一个初始值,表示同一时候能够有几个任务能够訪问该信号量保护的共享资源.初始值为1就变成相互排斥锁(Mutex),即同一时候仅仅能有一个任务能够訪问信号量保护的共享资 ...
sublime中如何安装vue.js插件，并使代码高亮显示
前提概要: sublime的下载地址:http://www.sublimetext.com/ notepad++下载地址:https://notepad-plus-plus.org/ .vue的文件在 ...
django定时任务实现（言简意赅） Django折腾记之启动定时任务（转）
最近做一个小项目,用Django搭建的服务器,着实折腾了我一周的时间,这里一点一点记下来,以免忘记. 在这个项目中我需要用到一个每隔60s就去执行的一个函数的功能,而且需要在服务器启动时就要启动这个定 ...
Python 集合、字典、运算符
先区分一下序列类型和散列类型: 序列类型:list.string.tuple,他们中的元素是有序的. 散列类型:set.dict,他们中的元素无序的. 序列类型有序,可以用索引.而散列类型中的元素是无 ...
九度OJ 1351：数组中只出现一次的数字（位运算）
时间限制:1 秒内存限制:32 兆特殊判题:否提交:3098 解决:906 题目描述: 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 输入: 每个 ...
5.设计模式----prototype原型模式
原型模式:做到是原型,那肯定是自己本身才是原型,原型模式属于对象的创建模式. 关于原型模式的实现方式分2种: (1)简单形式.(2)登记形式,这两种表现形式仅仅是原型模式的不同实现. package ...
debian安装oracle jdk
1 去官网下载linux jdk https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...

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

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

随机推荐

热门专题