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="{localfile}" data-fancybox-group="button" class="fancybox-buttons">
<img src="{localfile}" style="45px;height:45px;">
</a>
</td>
<td>
<input type="text" class="input-large valid" value="{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>