加载中...

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

  1. /****
  2. CJuiDialog for create new model 
  3.  
  4. http://www.yiiframework.com/wiki/145/cjuidialog-for-create-new-model/
  5.  
  6. translated by php攻城师
  7.  
  8. http://blog.csdn.net/phpgcs
  9.  
  10. Introduction
  11. Scenario
  12. Preparation of the form
  13. Enhance the action create
  14. The dialog
  15. Summary
  16. ***/
  17.  
  18. Introduction 
  19.  
  20. 本教程关于如何 用一个对话框实现一个新建界面
  21. 这有点类似 使用 Ajax 链接来实现目的， 但是我们将会是哟你个一个更简单和更高效的方式：
  22. 表单的onSubmin 事件（the event onSubmit of the form）
  23.  
  24.  
  25. 背景 Scenario 
  26.  
  27. 假设我们有一个很多学生的教室。 在没有创建教室的情况下， 如果用户想要填写学生信息的表单， 需要先创建一个教室 并且会丢失掉之前已经输入的学生信息。。。
  28. 我们想要允许用户从学生表单中创建教室，而不需要更改页面。
  29.  
  30. 准备表单  Preparation of the form 
  31.  
  32. 首先，我们要 一个创建教室的表单。 我们可以用 gii 来生成一个 crud 。。
  33. 在 普通提交的情况下，这个表单工作正常了以后， 我们可以将其用于一个 对话框。
  34.  
  35.  
  36. 增强 创建动作 Enhance the action create 
  37. 我们需要 增强 创建教室的控制器动作， 如下：
  38.  
  39. public function actionCreate()
  40.     {
  41.         $model=new Classroom;
  42.  
  43.         // Uncomment the following line if AJAX validation is needed
  44.         // $this->performAjaxValidation($model);
  45.  
  46.         if(isset($_POST['Classroom']))
  47.         {
  48.             $model->attributes=$_POST['Classroom'];
  49.             if($model->save())
  50.             {
  51.                 if (Yii::app()->request->isAjaxRequest)
  52.                 {
  53.                     echo CJSON::encode(array(
  54.                         'status'=>'success', 
  55.                         'div'=>"Classroom successfully added"
  56.                         ));
  57.                     exit;               
  58.                 }
  59.                 else
  60.                     $this->redirect(array('view','id'=>$model->id));
  61.             }
  62.         }
  63.  
  64.         if (Yii::app()->request->isAjaxRequest)
  65.         {
  66.             echo CJSON::encode(array(
  67.                 'status'=>'failure', 
  68.                 'div'=>$this->renderPartial('_form', array('model'=>$model), true)));
  69.             exit;               
  70.         }
  71.         else
  72.             $this->render('create',array('model'=>$model,));
  73.     }
  74.  
  75. 我们做了一些小改动： 
  76. 在ajax 请求的情况下 我们写了一个 json 编码的数组。在这个数组中， 我们返回了一个状态 ， 整个表单使用 renderPartial 来创建的。
  77.  
  78. 现在后台已经完成，我们来写对话框。
  79.  
  80. <?php echo CHtml::link('Create classroom', "",  // the link for open the dialog
  81.     array(
  82.         'style'=>'cursor: pointer; text-decoration: underline;',
  83.         'onclick'=>"{addClassroom(); $('#dialogClassroom').dialog('open');}"));?>
  84.  
  85. <?php
  86. $this->beginWidget('zii.widgets.jui.CJuiDialog', array( // the dialog
  87.     'id'=>'dialogClassroom',
  88.     'options'=>array(
  89.         'title'=>'Create classroom',
  90.         'autoOpen'=>false,
  91.         'modal'=>true,
  92.         'width'=>550,
  93.         'height'=>470,
  94.     ),
  95. ));?>
  96.  
  97. <div class="divForForm"></div>
  98.  
  99. <?php $this->endWidget();?>
  100.  
  101. <script type="text/javascript">
  102. // here is the magic
  103. function addClassroom()
  104. {
  105.     <?php echo CHtml::ajax(array(
  106.             'url'=>array('classroom/create'),
  107.             'data'=> "js:$(this).serialize()",
  108.             'type'=>'post',
  109.             'dataType'=>'json',
  110.             'success'=>"function(data)
  111.             {
  112.                 if (data.status == 'failure')
  113.                 {
  114.                     $('#dialogClassroom div.divForForm').html(data.div);
  115.                           // Here is the trick: on submit-> once again this function!
  116.                     $('#dialogClassroom div.divForForm form').submit(addClassroom);
  117.                 }
  118.                 else
  119.                 {
  120.                     $('#dialogClassroom div.divForForm').html(data.div);
  121.                     setTimeout(\"$('#dialogClassroom').dialog('close') \",3000);
  122.                 }
  123.  
  124.             } ",
  125.             ))?>;
  126.     return false; 
  127.  
  128. }
  129.  
  130. </script>
  131.  
  132. 就这些， 这些代码我都做了些什么？
  133.  
  134. 1， 一个链接，用来打开对话框
  135. 2， 对话框本身， 其中是一个 将会被 ajax 替代的 div
  136. 3， js 函数 addClassroom()
  137. 4, 这个函数出发了一个ajax 请求， 执行了我们在前面步骤中 准备的 create classroom 的动作。
  138. 5， 在 status failure 的情况下， 返回的 form 将会 在 对话框中
  139. 	在 status success 的情况下， 我们将 替换 div 并在3秒后 关闭对话框
  140.  
  141.  你还可以返回 新插入的 classroom 的 id ，并将其植入 一个下拉列表 并自动选中。
  142.  
  143.  
  144. 总结：
  145.  
  146. 准备常规的 gii 生成的 creation 动作代码
  147. 修改 create 动作 ，增加 处理Ajax 请求的代码
  148. 在任何地方，你可以防止 link ， dialog ， js 代码
  149.  
  150.  
  151. 此方法非常合适， 因为它changes anything in the code of the _form ，因此任何最终添加到 classroom 的 字段 都将在 标准的/对话框 的创建表单中 通用。
  152.  

还没有评论.