下面講解,在首頁(yè),如何調(diào)用圈子的同時(shí)也調(diào)用他們相關(guān)的貼子.

單單調(diào)用圈子,就像調(diào)用文章一樣,很多人都能輕松實(shí)現(xiàn),
比如下面的代碼

{qb:tag name="xxx" type="qun" rows="4"}<div style="border:1px solid #333;margin:20px;"> <div>圈子名稱:{$rs.title}</div></div>{/qb:tag}

如果還要調(diào)用圈子的貼子或商品的話,很多人就會(huì)想到內(nèi)循環(huán)，在過(guò)去,包括現(xiàn)在很多同行,也是這么做的,通過(guò)內(nèi)循環(huán)去調(diào)用相關(guān)的數(shù)據(jù),
但是我們非常反對(duì)這樣做,因?yàn)檫@樣效率非常低,容易把頁(yè)面卡死,所以齊博標(biāo)簽不支持內(nèi)循環(huán).
要實(shí)現(xiàn)內(nèi)部數(shù)據(jù)相關(guān)聯(lián),我們要借助JS實(shí)現(xiàn)異步加載, 這樣就不會(huì)影響頁(yè)面的打開,提高用戶體驗(yàn).
代碼如下

{qb:tag name="xxx" type="qun" rows="4"}<div style="border:1px solid #333;margin:20px;"> <div>圈子名稱:{$rs.title}</div> <div class="qun_bbs_title" data-id="{$rs.id}"> ? ?<!--圈子的相關(guān)聯(lián)的貼子數(shù)據(jù),外層的qun_bbs_title是給JS處理數(shù)據(jù)做標(biāo)志的,data-id就是標(biāo)志圈子的ID,外層的這兩個(gè)元素必須要存在--> </div></div>{/qb:tag}<div style="display:none;"> ?<!--圈子相關(guān)聯(lián)的貼子數(shù)據(jù)的標(biāo)簽,移動(dòng)這里來(lái)了,這是一個(gè)孤島,他要通過(guò)下面的JS處理,才能把數(shù)據(jù)轉(zhuǎn)移到圈子里邊--> ?<!--其中關(guān)鍵點(diǎn) ext_id=$ext_id 就是貼子數(shù)據(jù)表中的字段,用來(lái)跟圈子做關(guān)聯(lián)的 --> {qb:tag name="bbs_tpl_001" type="bbs" rows="3" js="xx01" where="ext_id=$ext_id"} <li>{$i}、<a href="{:urls('bbs/content/show','id='.$rs.id)}">{$rs.title}</a></li> {/qb:tag}</div><!--JS異步獲取相關(guān)數(shù)據(jù)--><script type="text/javascript">$(".qun_bbs_title").each(function(){ var that = $(this); //下面進(jìn)行DIV賦值貼子數(shù)據(jù)要用 var id = $(this).data('id'); //對(duì)應(yīng)每個(gè)圈子的ID var page = 1; //只顯示第一頁(yè)的內(nèi)容 var url = "{qb:url name='bbs_tpl_001'}" + page + "&ext_id=" + id; //這里的跟之前講的標(biāo)簽獲取更多數(shù)據(jù)一樣的,重點(diǎn)就ext_id是貼子里的字段要跟圈子相關(guān)聯(lián) ? ?//下面這一段,都是通用代碼,取得貼子數(shù)據(jù)后,就傳給圈子 $.get(url,function(res){ if(res.code==0){ if(res.data!=''){ that.html(res.data); } } }); });</script>

上面的代碼當(dāng)中,由于標(biāo)簽不支持嵌套, 所以把 圈子的相關(guān)數(shù)據(jù),即貼子的標(biāo)簽移了出來(lái).
以下這部分就是圈子的貼子標(biāo)簽部分,其中標(biāo)簽里邊的內(nèi)容,才是有用的.標(biāo)簽外的就是把他隱藏起來(lái),不要影響頁(yè)面布局.

<div style="display:none;"> ?<!--圈子的相關(guān)數(shù)據(jù)的標(biāo)簽,移動(dòng)這里來(lái)了--> {qb:tag name="bbs_tpl_001" type="bbs" rows="3" js="xx01" where="ext_id=$ext_id"} <li>{$i}、<a href="{:urls('bbs/content/show','id='.$rs.id)}">{$rs.title}</a></li> {/qb:tag}</div>

另外在圈子部分中關(guān)聯(lián)貼子的DIV代碼也有兩項(xiàng)關(guān)鍵參數(shù)

<div class="qun_bbs_title" data-id="{$rs.id}">

其中data-id="{$rs.id}"?就是標(biāo)志圈子的ID值
而class="qun_bbs_title"?就是標(biāo)志給下面JS處理數(shù)據(jù)用的.

貼子標(biāo)簽中,有一項(xiàng)關(guān)鍵的參數(shù)
where="ext_id=$ext_id"?這個(gè)就是非常關(guān)鍵的地方, 之前跟大家講解過(guò)where就是條件篩選用的.這里要用變量參數(shù),
在這里,貼子里邊的ext_id字段是跟圈子相關(guān)聯(lián)的.所以這里就這么寫,如果是用戶相關(guān)聯(lián)的話,就要換成where="uid=$uid"

下面這段JS代碼,大家必須要熟練,因?yàn)榈教幎紩?huì)用到

<script type="text/javascript">$(".qun_bbs_title").each(function(){ var that = $(this); var id = $(this).data('id'); //對(duì)應(yīng)圈子的ID var page = 1; //只顯示第一頁(yè)的內(nèi)容 var url = "{qb:url name='bbs_tpl_001'}" + page + "&ext_id=" + id; $.get(url,function(res){ if(res.code==0){ if(res.data!=''){ that.html(res.data); } } }); });</script>

其中下面這個(gè)就是JQ的知識(shí),就是說(shuō)尋找 qun_bbs_title這樣的類的元素,對(duì)他進(jìn)行相關(guān)處理, 我們上面標(biāo)注了圈子里相關(guān)的貼子,要進(jìn)行相關(guān)處理

$(".qun_bbs_title").each(function(){ //執(zhí)行相關(guān)操作 });

而其中這個(gè)

var url = "{qb:url name='bbs_tpl_001'}" + page + "&ext_id=" + id;

就跟之前跟大家講解的標(biāo)簽獲取分頁(yè)數(shù)據(jù),異步更新類似的. 用得非常多,所以大家必須要熟悉. 這里的標(biāo)簽名bbs_tpl_001跟上面的貼子標(biāo)簽名必須是一致的, 這里的頁(yè)碼,只取第一頁(yè),?"&ext_id=" + id?這個(gè)就是關(guān)鍵之處了,圈子id就是通過(guò)JS得到的,然后傳遞給貼子數(shù)據(jù)表中的關(guān)聯(lián)字段 ext_id ,這樣就可以調(diào)取到對(duì)應(yīng)的貼子了

上面講解的是調(diào)用論壇的貼子, 換一下就能調(diào)用圈子的商品 或文章 .

另外,還可以同時(shí)調(diào)用的. 需要把JS復(fù)制多一份, 標(biāo)簽名與類名不要重復(fù)即可.