周梦康 发表于 2014-08-29 3589 次浏览 标签 : ThinkSNS
在ThinkPHP中Wiget的调用方法,例如{:W('Event',array('limit'=>5))},使用的W函数,第一个参数的 widget 名称,第二个参数是传入 widget 的参数。需要基本了解其过程,最好是将function W()Widget:renderFile()function fetch()三个函数都具体了解下。
下面我以做一个最新活动的小挂件为例。

1、首先在\addons\widget目录下新建一个目录叫EventWidget,里面必须有一个控制器EventWidget.class.php最简单的就是定一个render方法

2、对应上面的render方法一般要设置一个模版,这就是Widget的基本骨架。这里我增加一个ajax翻页的功能,不过在这个控制器里面不是直接返回的数据,而是在控制器中调用模版,在模版解析之后返回数据,再通过转成json数据发送到前端,这样的用法也不太好毕竟,ajax发送的数据量有点大了,而且任务量大多分配到了后端。

/**
 * 活动widget
 * 路径:\addons\widget\EventWidget\EventWidget.class.php
 * @author 周梦康 zhoumengkang
 * @version TS3.0
 */
class EventWidget extends Widget {

    //这里传入的$data就是W('Widget',$data)里面的$data
	public function render($data) {
        $where = array('deadline'=>array('gt',time()));
        $list = M( 'event' )->where($where)->order('attentionCount desc')->limit($data['limit'])->field('id,title,uid,attentionCount')->select();
        $var['event_list'] = $list;
        $var['title'] = "热门活动";
        $var['uid'] = $this->uid;
        $var = array_merge($var,$data);
        //renderFile实际调用的fetch函数,fetch里面最重要的就是extract()函数,看下源代码就明白了
		$content = $this->renderFile(dirname(__FILE__)."/Event.html", $var);
		return $content;
	}

    /**
     * 换一换数据处理
     * @return json 渲染页面所需的JSON数据
     */
    public function changeEvent() {
        $where = array('deadline'=>array('gt',time()));
        $limit = intval($_GET['limit']);
        $page = $limit*intval($_GET['page']);
        $var = $render['list'] = M('event')->where($where)->order('attentionCount desc')->limit($page.','.$limit)->findAll();
        //不超过一页,则返回假,页面那边也打标记,后面再点击也不发送请求
        if(!$var){
            $res['content'] = false;
            exit(json_encode($res));
        }

        //如果有内容
        $res['content'] = $this->renderFile(dirname(__FILE__)."/_event.html",$render);

        //计算总数,得到下次点击的时候的分页
        $count = M('event')->where($where)->count();
        if($count > $page+$limit){
            $res['page'] = $page+1;
        }else{
            $res['page'] = 0;
        }

        exit(json_encode($res));
    }
}

下面是render方法调用的模版

<!-- 路径:\addons\widget\EventWidget\Event.html -->
<php>if($event_list){</php>
<div>
    <h3><a href="javascript:;" data-page="1" data-limit="{$limit}" id="exchangeEvent" data-flag="1" >换一换</a>{$title}</h3>
        <ul id="eventList">
            <volist name="event_list" id="vo" key="k">
                <li>
                    <p>
                    <a href="{:U('event/Index/eventDetail',array('id'=>$vo['id'],'uid'=>$vo['uid']))}">{$vo['title']|getShort=###,10}</a>
                    <span style="float:right;">{$vo['attentionCount']}</span>
                    </p>
                </li>
            </volist>
        </ul>
        <div class="border-b"></div>
</div>
<script type="text/javascript">
    $("#exchangeEvent").click(function(){
        if($(this).attr("data-flag") != 1){
            return false;
        }
        var page = $(this).attr("data-page");
        var limit = $(this).attr("data-limit");
        $.get(U('widget/Event/changeEvent'),{page:page,limit:limit},function(data){
            if(data.content){
                console.log(data.content);
                $("#exchangeEvent").attr("data-page",data.page);
                $("#eventList").html(data.content);
            }else{
                $("#exchangeEvent").attr("data-flag",0);
                ui.showMessage('没有更多数据',1,100);
            }
        },'json')
    })
</script>
<php>}</php>

下面是ajax翻页更新数据控制器调用的模版

<!-- 路径:\addons\widget\EventWidget\_event.html -->
<volist name="list" id="vo" key="k">
    <li>
        <p>
            <a href="{:U('event/Index/eventDetail',array('id'=>$vo['id'],'uid'=>$vo['uid']))}">{$vo['title']|getShort=###,10}</a>
            <span style="float:right;">{$vo['attentionCount']}</span>
        </p>
    </li>
</volist>

评论列表