利用yii framework dropdown 创建级联菜单

利用yii framework dropdown 创建级联菜单 


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

首先是表单的视图。我们将展示一个表单，显示国家，以及根据国家将显示它的城市。 
程序代码 程序代码 
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 以填充第二个下拉框。此外它将依赖于第一个下拉框的值。 
程序代码 程序代码 
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' 参数。