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