dropDownList:javascript
Yii中能夠採用CHtml類來實現,也能夠用CActiveForm來實現。
1、用CHtml來實現。
VIEW中實現:php
<?php echo CHtml::dropDownList('country_id','', array(1=>'USA',7=>'France',3=>'Japan'), array( 'ajax' => array( 'type'=>'POST', //request type 'url'=>Yii::app()->createUrl('project/dynamiccities'), 'update'=>'#city_id', 'data'=>array(Yii::app()->request->csrfTokenName=>Yii::app()->request->getCsrfToken(),'country_id'=>'js $("#country_id").val()') ))); echo CHtml::dropDownList('city_id','', array()); ?>
controller中實現:html
public function actionDynamiccities() { $data=Parts::model()->findAll('prent_id=:prent_id',array(':prent_id'=>(int) $_POST['country_id'])); $data=CHtml::listData($data,'id','name'); foreach($data as $value=>$name) { echo CHtml::tag('option', array('value'=>$value),CHtml::encode($name),true); } }
2、用CActiveForm來實現
在VIEW中實現:java
<?php echo $form->dropDownList($model,'province_id',$provinceList(這個值能夠經過render傳遞到頁面),array( 'empty'=>'-請選擇-', 'ajax'=>array( //指定請求地址 'url'=>Yii::app()->createUrl('site/dynamicCity'), //請求數據 'data'=>array('pid'=>'js:this.value'), //操做元素 'update'=>'#SosInfo_city_id',(注意這個update的值很容易弄錯,它由兩部分組成:模型+ID,模型->是指本CActiveForm所承載的model名稱) ), )); ?>
<?php echo $form->dropDownList($model,'city_id',City::model()->getCityList($model->province_id),array('empty'=>'-請選擇-')); ?>
若是是靜態的:
$form->dropDownList($model, 'field_name', array(1=>'test1', 2=>'test2'))
若是是動態的:
$form->dropDownList( $model, 'name', CHtml::listData( modelname::model()->findAll(), 'id', 'name') );jquery
$form是你view中生成的form, 根據你生成form名字不一樣,修改它,$model是你對應的模型的名字,也是你本身定, name是和你model數據表中字段的名字一致就行,modelname是模型對應的類名,好比說你的是User,那這裏就是 UserRole::model()->findAll()。id和name是你要去列表的那個表中字段,第一個是將做爲option的 value,第二個顯示名字。ajax
典型應用場景:
建立user時,須要選擇user的角色,有個表專門定義user的角色,表名是UserRole,User這個表中有一個外鍵role,它的值是UserRole的主鍵,UserRole的主鍵是id,另一個字段是name,咱們將顯示給用戶。
那麼上面的哪一行代碼變成:express
$form->dropDownList( $model, 'name', CHtml::listData( UserRole::model()->findAll(), 'id', 'name') );安全
yii jquery摺疊、彈對話框、拖拽、滑動條、ol和ul列表、局部內容切換app
<?php Yii::app()->clientScript->registerCoreScript('jquery');?> <?php //yii摺疊效果(CJuiAccordion) $this->widget('zii.widgets.jui.CJuiAccordion', array( 'panels'=>array( '分類1'=>'分類1的內容', '分類2'=>'分類2的內容', // 分類能夠渲染一個頁面,例如分類3 //'分類3'=>$this->renderPartial('_partial',null,true), ), 'options'=>array( 'animated'=>'bounceslide', ), )); ?> <?php //按鈕加js彈框提示 $this->widget('zii.widgets.jui.CJuiButton', array( 'name'=>'button', 'caption'=>'提交', 'value'=>'asd', 'onclick'=>'js:function(){alert("提交成功!"); this.blur(); return false;}', ) ); ?> <?php //談對話框 $this->beginWidget('zii.widgets.jui.CJuiDialog', array( 'id'=>'mydialog', // additional javascript options for the dialog plugin 'options'=>array( 'title'=>'對話框', 'autoOpen'=>false, ), )); //輸出彈出框的內容 //echo $this->renderPartial('_form',null,true); $this->endWidget('zii.widget.jui.CJuiDialog'); //打開對話框的連接 echo CHtml::link('登陸', '#', array( 'onclick'=>'$("#mydialog").dialog("open"); return false;', )); ?> <?php //拖拽 $this->beginWidget('zii.widgets.jui.CJuiDraggable', array( // additional javascript options for the draggable plugin 'options'=>array( 'scope'=>'myScope', ), )); echo '拖拽的內容!'; $this->endWidget(); ?> <?php //ol列表 $this->widget('zii.widgets.jui.CJuiSelectable', array( 'items'=>array( 'id1'=>'Item 1', 'id2'=>'Item 2', 'id3'=>'Item 3', ), // additional javascript options for the selectable plugin 'options'=>array( 'delay'=>'300', ), )); //ul列表 $this->widget('zii.widgets.jui.CJuiSortable', array( 'items'=>array( 'id1'=>'Item 1', 'id2'=>'Item 2', 'id3'=>'Item 3', ), // additional javascript options for the accordion plugin 'options'=>array( 'delay'=>'300', ), )); ?> <?php //滑動條 $this->widget('zii.widgets.jui.CJuiSlider', array( 'value'=>37, // additional javascript options for the slider plugin 'options'=>array( 'min'=>10, 'max'=>50, ), 'htmlOptions'=>array( 'style'=>'height:20px;' ), )); ?> <?php //局部內容切換 $this->widget('zii.widgets.jui.CJuiTabs', array( 'tabs'=>array( '分類1'=>'分類1', '分類2'=>array('content'=>'分類2', 'id'=>'tab2'), //'分類3'=>$this->render('_form',null,true),//渲染一個頁面 // panel 3 contains the content rendered by a partial view //'AjaxTab'=>array('ajax'=>$ajaxUrl), ), // additional javascript options for the tabs plugin 'options'=>array( 'collapsible'=>true, ), )); ?>
zii.widgets.grid自定義按鈕,ajax觸發事件並提示yii
咱們在用表格展現數據並管理的時候,可能會須要用到按鈕來操做某一行數據,好比查看,修改,刪除!
Yii內置了3種按鈕:查看,修改和刪除,你能夠自定義樣式、事件。詳細配置見類參考:CButtonColumn.
若是須要自定義按鈕綁定指定的事件該怎麼辦呢?
幸運的是Yii提供了自定義按鈕的辦法.看代碼:
在視圖文件裏面:
<?php $this->widget('zii.widgets.grid.CGridView', array( 'id'=>'xx-xx-grid', 'dataProvider'=>$model->search(), 'filter'=>$model, 'pager'=>array( 'class'=>'CLinkPager', 'nextPageLabel'=>'下一頁', 'prevPageLabel'=>'上一頁', 'header'=>'', ), 'summaryText'=>'<font color=#0066A4>顯示{start}-{end}條.共{count}條記錄,當前第{page}頁</font>', 'columns'=>array( array( 'name'=>'id', 'htmlOptions'=>array('width'=>'25'), 'sortable'=>false, ), array( 'class'=>'CButtonColumn', 'template'=>'{view} {update}', 'viewButtonOptions'=>array('title'=>'查看'), 'updateButtonOptions'=>array('title'=>'修改'), ), array( 'class'=>'CButtonColumn', 'header'=>'首頁展現', 'template'=>'{add} {del}', 'buttons'=>array( 'add' => array( 'label'=>'展現', // text label of the button 'url'=>'Yii::app()->controller->createUrl("focus/create",array("id"=>$data->primaryKey,"type"=>1))', // a PHP expression for generating the URL of the button 'imageUrl'=>'http://s.maylou.com/common/images/ysh.jpg', // image URL of the button. If not set or false, a text link is used 'options'=>array('style'=>'cursor:pointer;'), // HTML options for the button tag 'click'=>$click, // a JS function to be invoked when the button is clicked 'visible'=>'SiteRecommend::isItemInTypeAndId(1, $data->id)?false:true', ), 'del' => array( 'label'=>'取消展現', // text label of the button 'url'=>'Yii::app()->controller->createUrl("focus/delete",array("id"=>$data->primaryKey,"type"=>1))', // a PHP expression for generating the URL of the button 'imageUrl'=>'http://s.maylou.com/common/images/yzhu.jpg', // image URL of the button. If not set or false, a text link is used 'options'=>array('style'=>'cursor:pointer;'), // HTML options for the button tag 'click'=>$click, // a JS function to be invoked when the button is clicked 'visible'=>'SiteRecommend::isItemInTypeAndId(1, $data->id)?true:false', ) ), ), ), )); ?>
buttons選項提供了建立按鈕的方法,上面建立了2個按鈕:add和del,並註冊到template裏面。其中最主要的是click選項,決定了你的觸發條件。這裏用ajax觸發。在上面的代碼前面加上$click內容:
<?php $csrfTokenName = Yii::app()->request->csrfTokenName; $csrfToken = Yii::app()->request->csrfToken; $csrf = "\n\t\tdata:{ '$csrfTokenName':'$csrfToken' },"; $Confirmation= "你肯定要這麼作?"; $afterDelete = 'function(link,success,data){ if(success) alert(data); }'; $click=<<<EOD function() { if(!confirm("$Confirmation")) return false;; var th=this; var afterDelete=$afterDelete; $.fn.yiiGridView.update('build-oneprice-grid', { type:'POST', url:$(this).attr('href'),$csrf success:function(data) { $.fn.yiiGridView.update('build-oneprice-grid'); afterDelete(th,true,data); }, error:function(XHR) { return afterDelete(th,false,XHR); } }); return false; } EOD; ?>
csrf不用管他,是安全驗證,必需要有,不然會400報錯.$click是js函數的字符竄,用了文檔字符竄形式,注意結束的EOD前面必須沒空格,也不能縮進。 這是Yii內置的yiiGridView Jquery插件,把請求提交到控制器的動做裏面處理,而後返回結果並顯示。