利用yii framework dropdown 创建级联菜单

利用yii framework dropdown 创建级联菜单


你经常需要一个表单，级联城市，或者级联的分类等等功能，其中有两个下拉框，一个的值依赖于另外一个下拉框。使用Yii 内置的 ajax 功能，你可以创建这样一个下拉框。下面将演示如何实现它。

首先是表单的视图。我们将展示一个表单，显示国家，以及根据国家将显示它的城市。
程序代码 程序代码
<?php
echo CHtml::dropDownList('country_id','', array(1=>'USA',2=>'France',3=>'Japan'),
array(
'ajax' => array(
'type'=>'POST', //request type
'url'=>'dynamiccities', //url to call
'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());
?>


第一个下拉框由 几个代表国家的 value/name 对组成。。当它被改变时，一个 ajax 请求将被当前 controller 的 'dynamiccities' action完成。请求的结果( 'dynamiccities' action的输出) 将被替换到第二个id 是#city_id的下拉框。

接下来是 controller action，它将输出 html 以填充第二个下拉框。此外它将依赖于第一个下拉框的值。
程序代码 程序代码
<?php
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);
    }
}
?>


它将检索所有 parent_id 是第一个下拉框值的城市。然后将输出所有这些城市到标签中，最终形成第二个下拉框。

你可能想知道 $_POST['country_id'] 来自哪里。非常简单，当第一个下拉框中的 ajax 数组的 'data' 键为空时，下拉框所在表单所有元素的值将被传递到 controller ，通过 ajax 请求。若你在使用 Firebug 你可以查看这个请求。

这个 behaviour 也可以被改变。默认地，ajax 配置数组 中 'data' 键的值是 js:jQuery(this).parents("form").serialize()。 开头的 js: 告诉 Yii 后面跟的是一个 javascript 语句，不应被转义。因此，若你改变 'data' 键为另外以 'js:' 开始的语句，你可以填写自己的语句。也适用于 'success' 参数。