×

摸索下jQuery模板来展现json数据

作者:shiji2018.03.30来源:Web前端之家浏览:11323评论:0
关键词:JQueryJS

摸索下jQuery模板来展现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); 
})

就是这么简单!

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1488211200684.html

网友评论文明上网理性发言 已有0人参与

发表评论: