首页 > 程序开发 > Web开发 > PHP教程 > PHP框架专栏 > Yii > 正文
YII框架下使用内置AJAX创建二级联动下拉列表
2016-01-06       个评论      
收藏    我要投稿

Often you'll need a form with two dropdowns, and one dropdown's values will be dependent on the value of the other dropdown. Using Yii's built-in AJAX functionality you can create such a dropdown.

表单的view视图

We'll show a form that shows countries and dependent of the country selected will show cities.

echo CHtml::dropDownList('country_id','', array(1=>'USA',2=>'France',3=>'Japan'),
    array(
        'ajax' => array(
            'type'=>'POST', 
            'url'=>CController::createUrl('currentController/dynamiccities'),
            //Style: CController::createUrl('currentController/methodToCall')
            'update'=>'#city_id', //selector to update
            //'data'=>'js:javascript statement' 
            //leave out the data key to pass all form values through
        )
    )
); 

//empty since it will be filled by the other dropdown
echo CHtml::dropDownList('city_id','', array());

The first dropdown is filled with several value/name pairs of countries. Whenever it is changed an ajax request will be done to the 'dynamiccities' action of the current controller. The result of that request (output of the 'dynamiccities' action) will be placed in the second dropdown with id is #city_id.

控制器action方法

It will have to output the html to fill the second dropdownlist. Furthermore it will do that dependent on the the value of the first dropdown.

public function actionDynamiccities()
{
    $data=Location::model()->findAll('parent_id=:parent_id', 
          array(':parent_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);
    }
}

It will retrieve all cities that have as a parent the id of the first dropdown. It will then output all those cities using the tag and the output will end up in the second dropdown.

You might wonder where the $_POST['country_id'] comes from. It's simple, when the 'data' key of the ajax array in the first dropdown is empty, all values of the elements of the form the dropdown is in, will be passed to the controller via the ajax request. If you're using Firebug you can inspect this request and see for yourself.

This behaviour can also be changed. By default the value of the 'data' key in the ajax configuration array isjs:jQuery(this).parents("form").serialize(). The preceding?js:?indicates to Yii that a javascript statement will follow and thus should not be escaped. So, if you change the 'data' key to something else preceded by 'js:' you can fill in your own statement. The same applies to the 'success' parameter.

For this to work you also need to edit the Method accessRules() (if available) in your current Controller. In this example we would change

array('allow', // allow authenticated user to perform 'create' and 'update' actions
    'actions'=>array('create','update'),
    'users'=>array('@'),
),

to

array('allow', // allow authenticated user to perform 'create' and 'update' actions
    'actions'=>array('create','update','dynamiccities'),
    'users'=>array('@'),
),

n order to allow access for authenticated Users to our Method 'dynamiccities'. To allow access to eg any User or to use more complex rules please read more about accessRules and Authentication?here.

点击复制链接 与好友分享!回本站首页
相关TAG标签 框架
上一篇:YII框架下SRBAC的安装、配置、使用详解
下一篇:YII框架下用AJAX上传图片
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站