yii2项目实战-modal初识
更新于 2017年05月08日 by 白狼 被浏览了 2425 次

众所周知,文章的管理自然离不开栏目的管理,也即是文章的分类。为了说明文章跟分类的关系,我们新建了栏目表category和文章栏目关联表 blog_category。

开始之前我们先预览下效果图

0b82f77b99-t.gif

栏目创建

1、创建数据表

CREATE TABLE `category` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '栏目ID',
  `name` varchar(20) NOT NULL DEFAULT '' COMMENT '栏目名',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='栏目枚举表';

CREATE TABLE `blog_category` (
  `blog_id` int(11) NOT NULL COMMENT '文章ID',
  `category_id` int(11) NOT NULL COMMENT '栏目ID',
  KEY `blog_id` (`blog_id`),
  KEY `category_id` (`category_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='文章-栏目关联表';

从表结构可以看出,栏目表category是很简单的,除了主键id就一个栏目名字段。

2、借助gii生成 category 表对应的model+curd,blog_category关联表对应的model,关联表的curd我们暂时不需要,先不生成了。

3、把category/*系列权限分配给当前用户并添加一个二级菜单,名:栏目管理,路由指向/category/index

4、gii很强大,如果我们单纯的就栏目表而言,确实没什么好说的,为了穿插一些新的知识点,我们借助modal来玩一玩。

我们先来介绍下什么是modal:就是弹窗,弹窗明白否?一般的应用而言,弹窗不可必要,无论项目大小,你总离不开弹窗的需要!

4.1、在视图文件index.php内创建modal,选择在页面底部创建即可

use yii\bootstrap\Modal;

Modal::begin([
    'id' => 'operate-modal',
    'header' => '<h4 class="modal-title"></h4>',
]); 
Modal::end();

4.2、调用modal

1)、modal创建好了,我们接着看如何调用这个modal弹窗

打开视图文件index.php,我们创建一个操作按钮,并为该按钮设置一个id,且设置属性data-toggle=modal && data-target属性指向刚刚创建的modal的id "operate-modal".

<?= 
    Html::a('创建栏目', ['create'], [
        'class' => 'btn btn-success',
        'id' => 'create', // 按钮的id随意
        'data-toggle' => 'modal', // 固定写法
        'data-target' => '#operate-modal', // 等于4.1begin中设定的参数id值
    ]) 
?>

2)、弹窗主体内渲染表单

前面两步,其实我们已经可以调起modal弹窗了,不信你可以点击按钮尝试一下。但是,点击按钮后我们发现,弹窗内无任何内容,空白白的一片,如果此时弹窗内有一个创建栏目的表单是不是就完美了呢?

为按钮再添加一个click事件,通过$.get请求去加载表单页面

use yii\helpers\Url;
// 创建
$requestCreateUrl = Url::toRoute('create');
$js = <<<JS
// 创建操作
$('#create').on('click', function () {
    $('.modal-title').html('创建栏目');
    $.get('{$requestCreateUrl}',
        function (data) {
      // 弹窗的主题渲染页面
            $('.modal-body').html(data);
        }  
    );
});
JS;
$this->registerJs($js);

以上代码写在视图文件index.php内任意部分即可。

3)、干掉弹窗布局

上面的步骤中,弹窗内加载的表单页面包含了布局文件,这看起来有点别扭,打开你的controller,找到create方法,我们把表单布局也干掉

// 如此一来,小小的弹窗有一个bug,渲染了布局,我们修改操作create把布局也干掉
use yii\helpers\Url;
public function actionCreate()
{
    $model = new Category();

    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->redirect(['index']);
        // return $this->redirect(['view', 'id' => $model->id]);
    } else {
        // renderAjax方法,不渲染布局
        return $this->renderAjax('create', [
            'model' => $model,
        ]);
    }
}

4)、简单整理下表单界面,并为其指定为ajax异步操作

use yii\helpers\Url;

<?php $form = ActiveForm::begin([
    'id' => 'category-id',
    'enableAjaxValidation' => true,
    'validationUrl' => Url::toRoute(['validate-form']),
]); ?>

<?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>

<div class="form-group">
    <?= Html::submitButton($model->isNewRecord ? '创建' : '更新', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
</div>


<?php ActiveForm::end(); ?>

5)、注意到4)我们添加了异步校验

继续阅读

还有48%的精彩内容,购买继续阅读