账户中心 退出系统
开发文档 资讯·分享 技术交流 会员登录
phpGrace GSCMS 公众号系统
视图小部件

视图小部件概述

您可以利用 phpGrace 提供的视图小部件功能来开发视图部件,如 : 分页部件、轮播图部件、新闻排行部件等等。
注意 : 视图小部件是针对视图的,在 api 类不具备视图文件的项目内没有使用的意义。

视图小部件创建及使用流程

1 创建视图小部件

命令 : php grace cwt 部件名称

创建部件对应的文件位置及结构

/appWidget/
    /部件目录
        /widget.php // 数据及业务逻辑文件
        /view.php   // 视图文件

2 完善视图小部件

在命令创建的基础上完善小部件,注意 :

1 类名称命名空间不能改变;
2 小部件类最终利用静态方法 embed() 对外暴露;
3 类内部使用静态变量及静态方法完成全部功能;
4 视图文件包含 html 结果 js css 3个部分,按实际情况完善,不需要则删除即可;
5 请严格遵循 embed() 函数结构,内置了一个参数 $data 用于数据传递,如果有多个数据需要传递给部件请使用数组;
6 在小部件视图内使用 self::$data 来获取传递的数据;

3 使用小部件

视图小部件应该在视图内部嵌入,嵌入方法 : $控制器对象->__widget('部件名称', $数据 [ 可选参数 默认 null ]);

分页小部件完整示例

视图小部件源码

/appWidget/paging/widget.php

<?php
/**
 * 功能 : 分页部件
 * 作者 : grace
 * 版本 : 1.0
 */
namespace widget\paging;

class widget{

    protected static $data;
    public static function embed($data = null){
        self::$data = $data;
        // your code here ...
        include 'view.php';
    }

}

/appWidget/paging/view.php

<div class="pager-list">
    <?php echo self::$data['firstPage'];?>
    <?php echo self::$data['prePage'];?>
    <?php echo self::$data['listPages'];?>
    <?php echo self::$data['nextPage'];?>
    <?php echo self::$data['lastPage'];?>
</div>

控制器示例源码

<?php
namespace grace\controller;
use grace\grace;
use grace\database;

class index extends grace{

    public function index(){
        // 利用 $_GET['page'] 传递页码
        $_GET['page']        = empty($_GET['page']) ? 1 : $_GET['page'];
        // 使用 $this-> 将对象和数据注册为控制器数据 共享给视图
        $this->studentsTable = database::table('students');
        // 利用 $_GET['total'] 保存总数,
        // 第一次查询或者 url 没有保存总数则查询数据总数
        if(empty($_GET['total'])){
            $_GET['total'] = $this->studentsTable->count();
        }
        $this->students      = $this->studentsTable
            ->order('st_id desc')
            ->page($_GET['page'], $_GET['total'], 2, 10, 'a')
            ->fetchAll();
    }

}

视图内嵌入分页小部件源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<div style="padding:100px;">
    <ul>
        <?php foreach($this->students[0] as $student){?>
            <li>id : <?php echo $student['st_id'];?> 姓名 : <?php echo $student['st_name'];?> 年龄 : <?php echo $student['st_age'];?></li>
        <?php }?>
    </ul>
    <!-- 分页部件 -->
    <?php $this->__widget('paging', $this->students[1]);?>
</div>
<style>
    li{list-style:none;}
    .pager-list{margin-top:15px;}
    .pager-list .pager{display:block; font-size:14px; color:#333333; background:#F5F5F5; padding:0px 10px; height:30px; line-height:30px; float:left; margin-right:5px; border-radius:2px; cursor:pointer; text-decoration:none;}
    .pager-list .pager:hover{background:#2F4056; text-decoration:none; color:#FFFFFF !important;}
    .pager-list .pager:visited{color:#333333;}
    .pager-list .current{background:#5FB878 !important; color:#FFF !important;}
</style>
</body>
</html>