调用多个圈子同时调用相关会员

看这一篇之前,请先看上一篇,因为他们有关联性

比如要实现这样的效果

调用多个圈子同时调用相关会员 - 图1

可以通过下面的代码可以实现

  1. {qb:tag name="xxx" type="qun" rows="4"}
  2. <div style="border:1px solid #333;margin:20px;">
  3. <div>圈子名称:<a href="{:urls('qun/content/show','id='.$rs.id)}">{$rs.title}</a></div>
  4. <div class="qun_member" data-id="{$rs.id}">
  5. <!--圈子相关联的用户,不能实现标签嵌套,所以移到了下面,这里的外层参数qun_member这是标志给JS做处理的,data-id这是标志圈子ID-->
  6. </div>
  7. </div>
  8. {/qb:tag}
  9. <div style="display:none;">
  10. <!--圈子关联的用户标签移动这里来了,这也可以说是一个孤岛,要通过JS把数据做处理显示,下面标签内容才是要显示的内容,外层的DIV隐藏起来,是为了不影响页面布局-->
  11. <!-- 这里不能使用type=member,因为type=member是全站会员数据,对于圈子会员数据,只能使用下面固定的class 另一个关键之前,就是 union 参数,他对应关联的字段是aid, 这里没用where语句,是因为圈子用户没做where的条件处理,而换用union -->
  12. {qb:tag name="member_tpl_001" class="app\qun\model\Member@get_label" union="aid" rows="3" js="xx01"}
  13. <li>{$i}、<a href="{:get_url('user','uid='.$rs.uid)}"><img src="{:get_user_icon($rs.uid)}" onerror="this.src='__STATIC__/images/nobody.gif'" width="50">{:get_user_name($rs.uid)}</a></li>
  14. {/qb:tag}
  15. </div>
  16. <script type="text/javascript">
  17. $(".qun_member").each(function(){
  18. var that = $(this); //下面要进行内容赋值使用
  19. var id = $(this).data('id'); //对应圈子的ID
  20. var page = 1; //只显示第一页的内容
  21. var url = "{qb:url name='member_tpl_001'}" + page + "&aid=" + id; //这里就是异步显示更多的用法,另一个关键地方就是圈子用户关联圈子的字段是aid
  22. $.get(url,function(res){
  23. if(res.code==0){
  24. if(res.data!=''){
  25. that.html(res.data);
  26. }
  27. }
  28. });
  29. });
  30. </script>