JS使用模板快速填充HTML控件数据
2017-05-15 16:50
375 查看
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 + ' 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控件数据 --- 自己写组件(0)
- JS使用模板快速填充HTML控件数据
- JS使用模板快速填充HTML控件数据
- JS使用正则+JSON对HTML模板进行数据填充
- js使用模板快速填充数据
- JS使用正则+JSON对HTML模板进行数据填充
- Android使用webview控件加载本地html,通过Js与后台Java实现数据的传递
- 使用ajax+HTML+servlet实现数据模板填充
- 在GridControl控件中使用SearchLookUpEdit构建数据快速输入
- JS 控件使用模板
- 使用DataGridView数据窗口控件,构建用户快速输入体验
- office365 sharepoint2013 online 环境:使用Jquery 读取list 并把list数据快速插入HTML table(其他数据格式同理)
- dajango 模板中 js 使用服务器返回的数据
- (转)在GridControl控件中使用SearchLookUpEdit构建数据快速输入
- html+js+PHP(使用了smarty模板技术)+mysql实现二级动态下拉列表(select)
- WPF中如何使用代码操作数据模板生成的控件
- JQuery FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(二)服务端查询、快速查询和Html模板
- JQuery FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(二)服务端查询、快速查询和Html模板
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
- 使用HTML,CSS快速导出数据到Excel