使用jQuery模板來展現(xiàn)json數(shù)據(jù)的代碼
更新時間：2010年10月22日 10:20:47 作者：
通常我們在使用ajax的時候，都避免不了和json這種輕巧的數(shù)據(jù)格式打交道?？墒峭謩拥娜ソ馕鰆son，構建HTML，比較麻煩?，F(xiàn)在有了這個插件，就能像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);
})
就是這么簡單！
復制代碼 代碼如下:
$.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);
})
就是這么簡單！
相關文章
jQuery學習筆記(3)--用jquery(插件)實現(xiàn)多選項卡功能
多選項卡功能的網(wǎng)站有很多,本人在那么多的類似插件中，目前碰到這個比較好，花了點時間調試出來了與大家分享，感興趣的朋友可以參考下哈希望對你有所幫助2013-04-04
基于?jquery-cxselect?實現(xiàn)下拉聯(lián)動效果功能實現(xiàn)
這篇文章主要介紹了基于?jquery-cxselect?實現(xiàn)下拉聯(lián)動效果,下拉聯(lián)動是基于query的一款聯(lián)動下拉菜單插件 jquery-cxselect實現(xiàn)，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-02-02
使用jquery datatable和bootsrap創(chuàng)建表格實例代碼
這篇文章主要介紹了使用jquery-datatable和bootsrap創(chuàng)建表格的實例代碼,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細介紹了jquery實現(xiàn)頁面彈球效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
用Radio來實現(xiàn)用戶的選擇效果，在項目中積累了一些利用JQUERY來操作Radio的方法，這里與大家分享下2014-10-10
jQuery在IE下使用未閉合的xml代碼創(chuàng)建元素時的Bug介紹
這個偏門Bug是我在更新phZoom 1.29后發(fā)現(xiàn)的, 我先將之重現(xiàn)一下2012-01-01
這篇文章主要介紹了jQuery實現(xiàn)底部浮動窗口效果,涉及jQuery事件響應及頁面元素動態(tài)變換的相關操作技巧,需要的朋友可以參考下2016-09-09
jquery插件開發(fā)之實現(xiàn)google+圈子選擇功能
最近項目中用到的一個效果，類似于Google+的添加圈子功能。本文插件約8成封裝，好多功能是依據(jù)項目中實際需求寫的。若要使用，可根據(jù)自身情況擴展修改2014-03-03
這篇文章主要介紹了jquery siblings獲取同輩元素用法,結合實例形式分析了jQuery使用siblings遍歷同級元素的相關技巧,需要的朋友可以參考下2016-07-07
jquery load事件(callback/data)使用方法及注意事項
jquery load 事件使用方法，在網(wǎng)上有很多的相關介紹文章，不過大同小異，本文老生長談，也介紹一下load事件使用方法，感興趣的朋友可以了解下，或許對你學習jquery有所幫助2013-02-02