首页 > 代码库 > js使用模板快速填充数据
js使用模板快速填充数据
1.html
<!DOCTYPE html><html><head> <title>模板标签</title></head><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>
2.js临时模板
<script type="text/template"> <tr mgid="{mgid}" mid="{mid}"> <td> <input type="checkbox" mid="{mid}"> </td> <td> <a href="http://www.mamicode.com/{localfile}" data-fancybox-group="button" class="fancybox-buttons"> <img src="http://www.mamicode.com/{localfile}" style="width:45px;height:45px;"> </a> </td> <td> <input type="text" class="input-large valid" value="http://www.mamicode.com/{medianame}" name="medianame" mid="{mid}" readonly="readonly"> </td> <td>{mediatype}</td> <!-- 各位看官，自定义的三个属性在这里哦~~ --> <td>{fsize}</td> <td>{asize}</td> <td>{atime}</td> <td> <a href="javascript:void(0);">重命名</a> <a name="edit" localfile="{localfile}" href="javascript:void(0);">替换</a> <a href="javascript:void(0);">删除</a> <a title="设置为分组【{groupname}】的封面" groupname="{groupname}" mid="{mid}" href="javascript:void(0);">设置封面</a> </td> </tr></script>3.核心代码
<script>/*将模板写入到html*/$.ajax({ url: ‘/html/datas‘, type: ‘get‘, 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.atime = getFormatDate(o.uploadtime ? o.uploadtime : o.createtime, ‘yyyy-MM-dd‘); o.asize = (o.width && o.height) ? o.width + ‘ * ‘ + o.height : ‘-‘; o.fsize = o.seizespace ? o.seizespace + ‘ KB‘ : ‘-‘; arr.push(formatTemplate(o, html)); }); $(‘#tableData‘).append(arr.join(‘‘)); }});</script><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 ‘-‘; }}</script>
js使用模板快速填充数据
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。