jQuery插件Tmpl的簡(jiǎn)單使用方法

更新時(shí)間：2015年04月27日 09:50:55 投稿：hebedich

JavaScript 也可以利用模版來(lái)解決這些問(wèn)題，比如基于 jQuery 的 jquery.tmpl，現(xiàn)在已經(jīng)被接受為官方的模版插件了。詳細(xì)的 API 在 jQuery 的 Templates 里，內(nèi)置的 demo 也盡情地演示了各種用法。

1.引入腳本

2.編寫(xiě)模板

2.1假設(shè)此時(shí)有一個(gè)，從后臺(tái)一json格式發(fā)送來(lái)的數(shù)據(jù)

復(fù)制代碼代碼如下:

[{"tId":1,"tName":"張三","tAge":14,"tClass":1,"TeachClass":{"cId":1,"cName":"1班"}},

復(fù)制代碼代碼如下:

{"tId":2,"tName":"李四","tAge":25,"tClass":1,"TeachClass":{"cId":1,"cName":"1班"}},

復(fù)制代碼代碼如下:

{"tId":4,"tName":"趙六 ","tAge":16,"tClass":2,"TeachClass":{"cId":2,"cName":"2班"}}]

2.2此時(shí)你要顯示的內(nèi)容如下

然后按照你要顯示的內(nèi)容，設(shè)置模板：

【類(lèi)似于aspx中的repeater控件】

【注：記得要設(shè)置id】

3.填寫(xiě)模板

按照上面的假設(shè)，后臺(tái)返回的是一個(gè)json格式的字符串，那么通過(guò)ajax請(qǐng)求，并填寫(xiě) 模板

4.看到了效果頁(yè)面

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

ajax的分頁(yè)查詢(xún)示例（不刷新頁(yè)面）
這篇文章主要介紹了ajax的分頁(yè)查詢(xún)示例（不刷新頁(yè)面），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01
js過(guò)濾HTML標(biāo)簽以及空格的思路及代碼
今天要做一個(gè)應(yīng)用--判斷編輯器中文字的個(gè)數(shù)。如果少如20個(gè)字就不能讓其提交。沒(méi)多想，正好周末的時(shí)候看了一下js中正則表達(dá)式的內(nèi)容。很容易就想到了要用正則表達(dá)式來(lái)解決這個(gè)問(wèn)題。雖說(shuō)看了正則表達(dá)式的內(nèi)容是看了，但是畢竟還是剛接接觸，連基本的概念都很模糊，于是只好在網(wǎng)上找到如下的代碼：
2013-05-05
jQuery創(chuàng)建及操作xml格式數(shù)據(jù)示例
這篇文章主要介紹了jQuery創(chuàng)建及操作xml格式數(shù)據(jù),結(jié)合實(shí)例形式分析了jQuery針對(duì)xml格式數(shù)據(jù)的創(chuàng)建、解析、添加等相關(guān)操作技巧,需要的朋友可以參考下
2018-05-05
jquery解析XML及獲取XML節(jié)點(diǎn)名稱(chēng)的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery解析XML及獲取XML節(jié)點(diǎn)名稱(chēng)的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
詳談表單格式化插件jquery.serializeJSON
下面小編就為大家?guī)?lái)一篇詳談表單格式化插件jquery.serializeJSON。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
jQuery實(shí)現(xiàn)可兼容IE6的遮罩功能詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)可兼容IE6的遮罩功能,詳細(xì)分析了jQuery遮罩層的布局、樣式及功能實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-09-09
JQuery的一些小應(yīng)用收集
JQuery框架沒(méi)有的可以在網(wǎng)上Down。
2010-03-03
jQuery操作表格（table）的常用方法、技巧匯總
雖然現(xiàn)在DIV+CSS進(jìn)行頁(yè)的布局大行其道，但是很多地方使用table還是有很多優(yōu)勢(shì)，用table展示數(shù)據(jù)是比較方便的，下面匯總了jQuery操作Table tr td常用的方法，熟記這些操作技巧，下次再使用的到時(shí)候，會(huì)讓你如魚(yú)得水，提高開(kāi)發(fā)效率
2014-04-04
jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果,涉及jQuery事件響應(yīng)及元素動(dòng)態(tài)操作相關(guān)技巧,非常簡(jiǎn)便實(shí)用,需要的朋友可以參考下
2016-09-09
jquery實(shí)現(xiàn)的省市區(qū)三級(jí)聯(lián)動(dòng)
在做項(xiàng)目的時(shí)候，我們經(jīng)常需要用到地址之類(lèi)的省市區(qū)三級(jí)聯(lián)動(dòng)的，今天就給大家分享一個(gè)非常簡(jiǎn)潔的省市區(qū)三級(jí)聯(lián)動(dòng)的代碼，基于jQuery，附上GIT地址，有需要的小伙伴可以直接拿走
2015-04-04