下面講解,在首頁,如何調用圈子的同時也調用他們相關的貼子. 單單調用圈子,就像調用文章一樣,很多人都能輕松實現, 比如下面的代碼 ~~~ {qb:tag name="xxx" type="qun" rows="4"} <div style="border:1px solid #333;margin:20px;"> <div>圈子名稱:{$rs.title}</div> </div> {/qb:tag} ~~~ 如果還要調用圈子的貼子或商品的話,很多人就會想到內循環，在過去,包括現在很多同行,也是這么做的,通過內循環去調用相關的數據, 但是我們非常反對這樣做,因為這樣效率非常低,容易把頁面卡死,所以齊博標簽不支持內循環. 要實現內部數據相關聯,我們要借助JS實現異步加載, 這樣就不會影響頁面的打開,提高用戶體驗. 代碼如下 ~~~ {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}"> <!--圈子的相關聯的貼子數據,外層的qun_bbs_title是給JS處理數據做標志的,data-id就是標志圈子的ID,外層的這兩個元素必須要存在--> </div> </div> {/qb:tag} <div style="display:none;"> <!--圈子相關聯的貼子數據的標簽,移動這里來了,這是一個孤島,他要通過下面的JS處理,才能把數據轉移到圈子里邊--> <!--其中關鍵點 ext_id=$ext_id 就是貼子數據表中的字段,用來跟圈子做關聯的 --> {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異步獲取相關數據--> <script type="text/javascript"> $(".qun_bbs_title").each(function(){ var that = $(this); //下面進行DIV賦值貼子數據要用 var id = $(this).data('id'); //對應每個圈子的ID var page = 1; //只顯示第一頁的內容 var url = "{qb:url name='bbs_tpl_001'}" + page + "&ext_id=" + id; //這里的跟之前講的標簽獲取更多數據一樣的,重點就ext_id是貼子里的字段要跟圈子相關聯 //下面這一段,都是通用代碼,取得貼子數據后,就傳給圈子 $.get(url,function(res){ if(res.code==0){ if(res.data!=''){ that.html(res.data); } } }); }); </script> ~~~ 上面的代碼當中,由于標簽不支持嵌套, 所以把 圈子的相關數據,即貼子的標簽移了出來. 以下這部分就是圈子的貼子標簽部分,其中標簽里邊的內容,才是有用的.標簽外的就是把他隱藏起來,不要影響頁面布局. ~~~ <div style="display:none;"> <!--圈子的相關數據的標簽,移動這里來了--> {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> ~~~ 另外在圈子部分中關聯貼子的DIV代碼也有兩項關鍵參數 ~~~ <div class="qun_bbs_title" data-id="{$rs.id}"> ~~~ 其中`data-id="{$rs.id}"` 就是標志圈子的ID值 而`class="qun_bbs_title"` 就是標志給下面JS處理數據用的.  貼子標簽中,有一項關鍵的參數 `where="ext_id=$ext_id"` 這個就是非常關鍵的地方, 之前跟大家講解過where就是條件篩選用的.這里要用變量參數, 在這里,貼子里邊的ext_id字段是跟圈子相關聯的.所以這里就這么寫,如果是用戶相關聯的話,就要換成`where="uid=$uid"` 下面這段JS代碼,大家必須要熟練,因為到處都會用到 ~~~ <script type="text/javascript"> $(".qun_bbs_title").each(function(){ var that = $(this); var id = $(this).data('id'); //對應圈子的ID var page = 1; //只顯示第一頁的內容 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> ~~~ 其中下面這個就是JQ的知識,就是說尋找 qun_bbs_title這樣的類的元素,對他進行相關處理, 我們上面標注了圈子里相關的貼子,要進行相關處理 ~~~ $(".qun_bbs_title").each(function(){ //執行相關操作 }); ~~~ 而其中這個 ~~~ var url = "{qb:url name='bbs_tpl_001'}" + page + "&ext_id=" + id; ~~~ 就跟之前跟大家講解的標簽獲取分頁數據,異步更新類似的. 用得非常多,所以大家必須要熟悉. 這里的標簽名`bbs_tpl_001`跟上面的貼子標簽名必須是一致的, 這里的頁碼,只取第一頁, `"&ext_id=" + id` 這個就是關鍵之處了,圈子id就是通過JS得到的,然后傳遞給貼子數據表中的關聯字段 ext_id ,這樣就可以調取到對應的貼子了 * * * * * 上面講解的是調用論壇的貼子, 換一下就能調用圈子的商品 或文章 . 另外,還可以同時調用的. 需要把JS復制多一份, 標簽名與類名不要重復即可.