标签的嵌套用法,调用聚合数据 - 齐博CMS之X1

齐博标签非常强大,可以让不懂程序的你,轻松就能实现所见即所得.

下面跟大家讲解一下,最复杂的运用, 同时使用了union 动态变量参数与分页处理标签

比如下面这张图,不仅仅想调用圈子,还想同时调用每个圈子里边的贴子, 当然,你还可以更变态的,同时调用圈子的图片或其它更多的东西都是完全可以的.

更变态的做法,你还可以调用跟贴子相关联的其它数据,也是可以的.

按照传统写PHP代码的处理方法,同时获取,那数据量一大,肯定会卡死.

而在这里,这切,都是通过异步获取数据,所以你完全不用担心效率的问题. 每一块都是单独的加载数据,也不影响用户体验.

![](https://box.kancloud.cn/099b0226605c1f334252a7df6e0de0ae_575x532.png)

实现效果图如下,点击可以查看大图

[![](https://box.kancloud.cn/6ba16c6a091098e56ffadff2fa123b41_1470x853.png)](https://box.kancloud.cn/6ba16c6a091098e56ffadff2fa123b41_1470x853.png)

代码如下:



	{qb:tag name="pc_index_showquntest1" type="qun" rows="6" order="view" by="desc
	圈子名称: {$rs.title}

{/qb:tag}

其中





这个就是关键之处, 这里就是显示更多贴子的. 你可以更变态的做法, 还可以在他下面一行添加类似的数据,显示相关联的图片 或者是其它更多的相关联数据.

抛开这一行,其它都是之前讲的标签没什么区别.

* * * * *

这里有两个关键的class类,大家不要忽略 `class="pc_qun"`  与 `class="listbbs"` 后面的JQ查找元素要用到

另一个关键点就是`data-id="{$rs.id}"` 这个就是后面的JQ要用到,去取哪个圈子ID的贴子数据.

所以上面这三个关键点,就是他跟普通标签不一样的地方.这里特别要使用到的.


* * * * *


接着再讲解另一段代码,
截图中多了 `class="list_label_bbs"` 这个类,其实没用到,下面的代码,就省去讲解这个类了


	{qb:tag name="label_listbbs" type="bbs" union="ext_id" rows="6"order="id" by="desc
	{$rs.title}

	{/qb:tag}




这个跟普通标签有一点小区别,主要体现:
其中要包含一个隐藏DIV元素`style="display:none;"` (题外话:这个是方便你不用写JS模板,同时也方便SEO, 当然更关键的是为了后面的标签数据对应)
也就是说这里的标签必须是隐藏的.因为这里并不是真实用到的数据.只是用这个模子而已.

这里用到的标签名 `name="label_listbbs"` 跟下面的标签分页 变量名是对应的.必须一样 `{qb:url name='label_listbbs' /}`

这一段代码,你可以理解为就跟之前说的获取显示更多分页数据,没太大区别. 

这里的关键之处,就是使用了动态变量参数 `union="ext_id"` 这个就是关键中的关键

其它地方,对照JS就不难理解了


* * * * *


这段话的意思,就是查找 圈子容器里pc_qun 里边的 listbbs元素 ,然后执行一个函数 show_qun_bbs 显示贴子. 这些都是前端JS相关的东西.

$(document).ready(function () {
	$(".pc_qun .listbbs").each(function(){
		show_qun_bbs($(this));		
	});
});



下面这段,其实跟之前讲解的标签加载更多分页内容没什么区别的. 关键就是有一个动态参数ext_id= 获取到的是动态变量, 另外分页就总是取第一页, 你可以改一下JS,就可以显示更多页的数据.


function show_qun_bbs(that){r
	var page = 1;r
	var id = that.data("id");r
	$.get("{qb:url name='label_listbbs' /}" + page + "&ext_id="+id , function(res){	r
		if(res.code==0){r
			if(res.paginate.total>0){r
				that.html(res.data);r
				that.parent().show();r
			}else{r
				that.parent().hide();r
			}r
		}r
	});r
}





### 注意,以上是对圈子的讲解.同样的道理,你可以用在其它地方相关联的数据调用.比较调取用户数据.,




转载请注明：文章转载自 www.mshxw.com
本文地址：https://www.mshxw.com/it/214387.html


   上一篇  列表页制作及无滚动加载内容 - 齐博CMS之X1
 
   下一篇  模板包含文件 - 齐博CMS之X1
  






齐博CMS相关栏目本月热门文章

  1【Linux驱动开发】设备树详解（二）设备树语法详解
  2别跟客户扯细节
  3Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区
  4【Java】对象处理流（ObjectOutputStream和ObjectInputStream）
  5【分页】常见两种SpringBoot项目中分页技巧
  6一文带你搞懂OAuth2.0
  7我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍
  8【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成
  9JavaSE - 封装、static成员和内部类
  10树莓派mjpg-streamer实现监控及拍照功能调试
  11用c++写一个蓝屏代码
  12从JDK8源码中看ArrayList和LinkedList的区别
  13idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目
  14在openwrt使用C语言增加ubus接口（包含C uci操作）
  15Spring 解决循环依赖
  16SpringMVC——基于MVC架构的Spring框架
  17Andy‘s First Dictionary C++ STL set应用
  18动态内存管理
  19我的创作纪念日
  20Docker自定义镜像-Dockerfile







热门相关搜索



路由器设置
木托盘
宝塔面板
儿童python教程
心情低落
朋友圈
vim
双一流学科
专升本
我的学校
日记学校
西点培训学校
汽修学校
情书
化妆学校
塔沟武校
异形模板
西南大学排名
最精辟人生短句
6步教你追回被骗的钱
南昌大学排名
清朝十二帝
北京印刷学院排名
北方工业大学排名
北京航空航天大学排名
首都经济贸易大学排名
中国传媒大学排名
首都师范大学排名
中国地质大学(北京)排名
北京信息科技大学排名
中央民族大学排名
北京舞蹈学院排名
北京电影学院排名
中国戏曲学院排名
河北政法职业学院排名
河北经贸大学排名
天津中德应用技术大学排名
天津医学高等专科学校排名
天津美术学院排名
天津音乐学院排名
天津工业大学排名
北京工业大学耿丹学院排名
北京警察学院排名
天津科技大学排名
北京邮电大学(宏福校区)排名
北京网络职业学院排名
北京大学医学部排名
河北科技大学排名
河北地质大学排名
河北体育学院排名







学习工具
代数计算器
三角函数
解析几何
立体几何


知识解答
教育知识
百科知识
生活知识
常识知识


写作必备
作文大全
作文素材
句子大全

实用范文


关于我们
关于我们
联系我们
网站地图


 
名师互学网交流群


名师互学网客服





名师互学网 版权所有 (c)2021-2022      ICP备案号：晋ICP备2021003244-6号
 






关于我们
文章归档
网站地图
联系我们
版权所有 (c)2021-2022 MSHXW.COM
ICP备案号：晋ICP备2021003244-6号