齐博mysql万能标签_标签的嵌套用法,调用聚合数据

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

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

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

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

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

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


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

[](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}

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

{$rs.title}

{/qb:tag}

$(document).ready(function () {

$(".pc_qun .listbbs").each(function(){

show_qun_bbs($(this));

});

});

function show_qun_bbs(that){

var page = 1;

var id = that.data("id");

$.get("{qb:url name='label_listbbs' /}" + page + "&ext_id="+id , function(res){

if(res.code==0){

that.html(res.data);

}

});

}

~~~

第一段代码,就是页面布局代码

~~~

{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){

var page = 1;

var id = that.data("id");

$.get("{qb:url name='label_listbbs' /}" + page + "&ext_id="+id , function(res){

if(res.code==0){

that.html(res.data);

}

});

}

~~~

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