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控件数据
原文地址：http://www.cnblogs.com/fengyingwang/p/7591106.html