加载中...

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 的 字段 都将在 标准的/对话框 的创建表单中 通用。



还没有评论.