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


  • 相关阅读:
    【LeetCode】Rotate List
    【LeetCode】Longest Valid Parentheses
    【LeetCode】Longest Substring Without Repeating Characters
    【LeetCode】Multiply Strings
    【LeetCode】Triangle
    hdfs 查看报告--命令(hdfs dfsadmin -report)
    hive
    java ---面向对象
    java--数组
    java--函数
  • 原文地址:https://www.cnblogs.com/james1207/p/3315600.html
Copyright © 2020-2023  润新知