art-template日期格式化

使用art-template我们避免了N多的字符串拼接，但遇到日期格式化该如何处理呢？

我们定义一个处理日期格式化的JS函数，放到一个单独的文件dateformate.js。

/**
 * 对日期进行格式化，
 * @param date 要格式化的日期
 * @param format 进行格式化的模式字符串
 *     支持的模式字母有：
 *     y:年,
 *     M:年中的月份(1-12),
 *     d:月份中的天(1-31),
 *     h:小时(0-23),
 *     m:分(0-59),
 *     s:秒(0-59),
 *     S:毫秒(0-999),
 *     q:季度(1-4)
 * @return String
 * @author yanis.wang
 * @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
 */
function dateFormat(date, format) {
    date = new Date(date);
    var map = {
        "M": date.getMonth() + , //月份
        "d": date.getDate(), //日
        "h": date.getHours(), //小时
        "m": date.getMinutes(), //分
        "s": date.getSeconds(), //秒
        "q": Math.floor((date.getMonth() + ) / ), //季度
        "S": date.getMilliseconds() //毫秒
    };
    format = format.replace(/([yMdhmsqS])+/g, function(all, t){
        var v = map[t];
        if(v !== undefined){
            if(all.length > ){
                v = '0' + v;
                v = v.substr(v.length-);
            }
            return v;
        }
        else if(t === 'y'){
            return (date.getFullYear() + '').substr( - all.length);
        }
        return all;
    });
    return format;
};
           

使用：

// art-template日期格式化
template.defaults.imports.dateFormat = dateFormat;
           

在页面先定义模板html

<script id="mqMonitorRecordTemplate" type="text/html">
    {{each list item index}}
    <tr>
        <td>{{index+1}}</td>
        <td>{{item['serverIp']}}</td>
        <td><%=#dateFormat(item['createTime'],'yyyy/MM/dd hh:mm')%></td>
        <td>{{item['type']}}</td>
        <td>{{item['reason']}}</td>
    </tr>
    {{/each}}
</script>
           

在

<script>

中先编译上面的模板

var render = template.compile($('#mqMonitorRecordTemplate').html());
           

使用（一个分页的例子）：

function mqMonitorRecordSearch() {
    var pageNo = $('[name=pageNo]').val();
    var data = {
        serverIp: $('[name=serverIp]').val(),
        type: $('[name=type]').val()
    };
    $.get('[[${ctx}]]/mqMonitor/search/' + pageNo,data,function(r) {
        if (r.returnCode == ) {
            $('#mqMonitorRecordTbl tbody').html(render(r.data.pager)); // 这行代码是使用模板渲染，获取渲染后的html，设置到tbody。
            $('#DataTables_Table_1_paginate').html(r.data.pageHtml);
        }
        else {
            layer.alert(r.errMsg);
        }
    });
}