齐博x1标签实例：调用多个圈子同时调用贴子

2021-11-14 09:34:00 阅读：146 来源： 互联网

下面讲解,在首页,如何调用圈子的同时也调用他们相关的贴子.

单单调用圈子,就像调用文章一样,很多人都能轻松实现,
比如下面的代码

{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复制多一份, 标签名与类名不要重复即可.

标签：调用,齐博,圈子,贴子,ext,qb,bbs,id
来源： https://www.cnblogs.com/wanxiangsucai/p/15550749.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

齐博x1标签实例：调用多个圈子同时调用贴子