PHP 開発フレームワーク Yii Framework チュートリアル (19) UI コンポーネント TreeView の例

CTreeView は、Data プロパティを設定して TreeView を使用して階層データを表示するために使用されます。データは次の構造を持つ配列です:

ext: 文字列、ツリー ノードのテキスト。

expanded: ブール値、オプション。ノードが展開されているかどうかを示します。

id: 文字列、オプション、ノード ID

hasChildren: ブール値、オプション、デフォルトは False です。True の場合、ノードに子ノードが含まれていることを意味します。

children: 配列、オプション、子ノードの配列。

htmlオプション: 配列、HTML オプション。

これまでデータベースの読み取りについては紹介していないため、この例でハード コードを使用したデータは次のとおりです:

array(
'text' => ' 'id' => '27' ,
'hasChildren' => true,
'children' =>
array
(
array(
'text' => ' 'id' => '1' ,
'hasChildren' => true,
'children' =>
array
(
array(
'text' => ' 'id' => '3' ,
'hasChildren' => true,
'children' =>
array
(
array(
'text' => ' 'id' => '15' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '16' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '5' ,
'hasChildren' => false,
)
)),
array(
'text' => ' 'id' => '2' ,
'hasChildren' => true,
'children' =>
array
(
array(
'text' => ' 'id' => '10' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '12' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '11' ,
'hasChildren' => false,
))),
array(
'text' => ' 'id' => '4' ,
'hasChildren' => true,
'children' =>
array(
array(
'text' => ' 'id' => '13' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '14' ,
'hasChildren' => false,
))),
array(
'text' => ' 'id' => '7' ,
'hasChildren' => true,
'children' =>
array
(
array(
'text' => ' 'id' => '18' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '20' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '19' ,
'hasChildren' => false,
)
)),
array(
'text' => ' 'id' => '9' ,
'hasChildren' => true,
'children' =>
array
(
array(
'text' => ' 'id' => '23' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '24' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '25' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '26' ,
'hasChildren' => false,
))),
array(
'text' => ' 'id' => '8' ,
'hasChildren' => true,
'children' =>
array(
array(
'text' => ' 'id' => '22' ,
'hasChildren' => false,
),
array(
'text' => ' 'id' => '21' ,
'hasChildren' => false
)
)
)
)))));

各ノードのテキストにリンクが追加され、JQuery を使用して応答する方法も示しています。ノードのクリック イベント。クライアント側の JavaScript によって実装されます。

View 定義の変更

$cs=Yii::app()->clientScript;
$cs->registerScript('menuTreeClick', "
jQuery('#menu-treeview a').click(function() {
alert('Node #'+this.id+' was clicked!');
return false;
});
");
$this->widget('CTreeView',array(
'id'=>'menu-treeview',
'data'=>DataModel::getDummyData(),
'control'=>'#treecontrol',
'animated'=>'fast',
'collapsed'=>true,
'htmlOptions'=>array(
'class'=>'filetree'
)
));
?>

clientScript の registerScript は、クライアント側 JavaScript の定義に使用されます。

上記は、PHP 開発フレームワーク Yii Framework チュートリアル (19) UI コンポーネント TreeView の例の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。