(jQuery)使用jQuery模板来展现json数据

通常我们在使用ajax的时候，都避免不了和json这种轻巧的数据格式打交道。可是往往手动的去解析json，构建HTML，比较麻烦。现在有了这个插件，就能像Extjs那样使用模板解析json了。

完整代码：

$.fn.parseTemplate = function(data)
{
    var str = (this).html();
    var _tmplCache = {}
    var err = "";
    try
    {
        var func = _tmplCache[str];
        if (!func)
        {
            var strFunc =
            "var p=[],print=function(){p.push.apply(p,arguments);};" +
                        "with(obj){p.push('" +
            str.replace(/[\r\t\n]/g, " ")
               .replace(/'(?=[^#]*#>)/g, "\t")
               .split("'").join("\\'")
               .split("\t").join("'")
               .replace(/<#=(.+?)#>/g, "',$1,'")
               .split("<#").join("');")
               .split("#>").join("p.push('")
               + "');}return p.join('');";

            //alert(strFunc);
            func = new Function("obj", strFunc);
            _tmplCache[str] = func;
        }
        return func(data);
    } catch (e) { err = e.message; }
    return "< # ERROR: " + err.toString() + " # >";
}

使用方法：

首先声明这个模板

<script id="template" type="text/html">
    <table style="width:400px;">
        <thead>
            <tr>
                <th>name</th>
                <th>age</th>
                <th>date</th>
				<th>type</th>
            </tr>
        </thead>
        <tbody>
        <#
            
               var xing = items.pm; 
        #>
                <tr>
                   <td>
                        <#= xing.key #> 
                   </td>
                   <td>
                        <#= xing.key1 #>
                   </td>
                   <td>
                      <#= xing.key #>
                   </td>
		<td>
                      <#= items.pm1 #>
                   </td>
                </tr>
        <# 
            
        #>
        </tbody>
    </table>
    <br />
    <#= items.pm.length #> 记录
</script>

然后使用

$(function(){
var json={"items":{"pm":{"key":"value","key1":"value1"},"pm1":"pmvalue"}};
var output=$('#template').parseTemplate(json);	
$('#cc').html(output);
})

就是这么简单！