JS使用模板快速填充HTML控件数据

先写个非常重要的JS方法,此方法就是用来填充格式数据的。(看不懂也没关系,会用就行)

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代码写下来:

  

大家看到了这段代码,如果全部写JS上确实比较烦,而且大家也发现了,为什么在首尾有中间,假如,你把模板代码放在某个

中并隐藏起来,那么可能你的代码中会用到$('input[type="text"]')查找控件时,不好意思,就会把模板中的也统计进去了,这个并不是你想要的。所以我用

其实想通了还是挺简单的,当然formatTemplate函数中的第一个参数必须要求是像struct的对象,直接一点就是这样一个数据包: { "A": “a”, "B": "b", "C":"c" } 。懂了吧伙计们,不懂就慢慢看吧,嘿嘿!

附: 格式化时间函数:

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模板)