yii_wiki_145_yii-cjuidialog-for-create-new-model （通过CJuiDialog来创建新的Model）

/****

CJuiDialog for create new model 



http://www.yiiframework.com/wiki/145/cjuidialog-for-create-new-model/



translated by php攻城师



http://blog.csdn.net/phpgcs



Introduction

Scenario

Preparation of the form

Enhance the action create

The dialog

Summary

***/



Introduction 



本教程关于如何 用一个对话框实现一个新建界面

这有点类似 使用 Ajax 链接来实现目的， 但是我们将会是哟你个一个更简单和更高效的方式：

表单的onSubmin 事件（the event onSubmit of the form）





背景 Scenario 



假设我们有一个很多学生的教室。 在没有创建教室的情况下， 如果用户想要填写学生信息的表单， 需要先创建一个教室 并且会丢失掉之前已经输入的学生信息。。。

我们想要允许用户从学生表单中创建教室，而不需要更改页面。



准备表单  Preparation of the form 



首先，我们要 一个创建教室的表单。 我们可以用 gii 来生成一个 crud 。。

在 普通提交的情况下，这个表单工作正常了以后， 我们可以将其用于一个 对话框。





增强 创建动作 Enhance the action create 

我们需要 增强 创建教室的控制器动作， 如下：



public function actionCreate()

    {

        $model=new Classroom;

 

        // Uncomment the following line if AJAX validation is needed

        // $this->performAjaxValidation($model);

 

        if(isset($_POST['Classroom']))

        {

            $model->attributes=$_POST['Classroom'];

            if($model->save())

            {

                if (Yii::app()->request->isAjaxRequest)

                {

                    echo CJSON::encode(array(

                        'status'=>'success', 

                        'div'=>"Classroom successfully added"

                        ));

                    exit;               

                }

                else

                    $this->redirect(array('view','id'=>$model->id));

            }

        }

 

        if (Yii::app()->request->isAjaxRequest)

        {

            echo CJSON::encode(array(

                'status'=>'failure', 

                'div'=>$this->renderPartial('_form', array('model'=>$model), true)));

            exit;               

        }

        else

            $this->render('create',array('model'=>$model,));

    }



我们做了一些小改动： 

在ajax 请求的情况下 我们写了一个 json 编码的数组。在这个数组中， 我们返回了一个状态 ， 整个表单使用 renderPartial 来创建的。



现在后台已经完成，我们来写对话框。



<?php echo CHtml::link('Create classroom', "",  // the link for open the dialog

    array(

        'style'=>'cursor: pointer; text-decoration: underline;',

        'onclick'=>"{addClassroom(); $('#dialogClassroom').dialog('open');}"));?>

 

<?php

$this->beginWidget('zii.widgets.jui.CJuiDialog', array( // the dialog

    'id'=>'dialogClassroom',

    'options'=>array(

        'title'=>'Create classroom',

        'autoOpen'=>false,

        'modal'=>true,

        'width'=>550,

        'height'=>470,

    ),

));?>



<div class="divForForm"></div>

 

<?php $this->endWidget();?>

 

<script type="text/javascript">

// here is the magic

function addClassroom()

{

    <?php echo CHtml::ajax(array(

            'url'=>array('classroom/create'),

            'data'=> "js:$(this).serialize()",

            'type'=>'post',

            'dataType'=>'json',

            'success'=>"function(data)

            {

                if (data.status == 'failure')

                {

                    $('#dialogClassroom div.divForForm').html(data.div);

                          // Here is the trick: on submit-> once again this function!

                    $('#dialogClassroom div.divForForm form').submit(addClassroom);

                }

                else

                {

                    $('#dialogClassroom div.divForForm').html(data.div);

                    setTimeout(\"$('#dialogClassroom').dialog('close') \",3000);

                }

 

            } ",

            ))?>;

    return false; 

 

}

 

</script>



就这些， 这些代码我都做了些什么？



1， 一个链接，用来打开对话框

2， 对话框本身， 其中是一个 将会被 ajax 替代的 div

3， js 函数 addClassroom()

4, 这个函数出发了一个ajax 请求， 执行了我们在前面步骤中 准备的 create classroom 的动作。

5， 在 status failure 的情况下， 返回的 form 将会 在 对话框中

	在 status success 的情况下， 我们将 替换 div 并在3秒后 关闭对话框



 你还可以返回 新插入的 classroom 的 id ，并将其植入 一个下拉列表 并自动选中。





总结：



准备常规的 gii 生成的 creation 动作代码

修改 create 动作 ，增加 处理Ajax 请求的代码

在任何地方，你可以防止 link ， dialog ， js 代码





此方法非常合适， 因为它changes anything in the code of the _form ，因此任何最终添加到 classroom 的 字段 都将在 标准的/对话框 的创建表单中 通用。