PHP-Entwicklungsframework Yii Framework-Tutorial (19) UI-Komponente TreeView-Beispiel

CTreeView wird zum Anzeigen hierarchischer Daten verwendet, indem TreeView durch Festlegen der Data-Eigenschaft verwendet wird. Daten sind ein Array mit der folgenden Struktur:

ext: string, der Text des Baumknotens.

expanded: boolescher Wert, optional, der angibt, ob der Knoten erweitert ist.

id: Zeichenfolge, optional, die Knoten-ID.

hasChildren: boolean, optional, der Standardwert ist False. Wenn True, bedeutet dies, dass der Knoten untergeordnete Knoten enthält.

Kinder: Array, optional, Array von untergeordneten Knoten.

htmlOptions: Array, HTML-Optionen.

Bisher haben wir das Lesen der Datenbank noch nicht eingeführt, daher lauten die Daten mit Hardcode in diesem Beispiel wie folgt:

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
)
)
)
)))));

Hier wird dem Text jedes Knotens ein Link hinzugefügt. Gleichzeitig wird auch die Verwendung von JQuery zum Reagieren auf Knotenklickereignisse demonstriert, was durch clientseitige JavaScripts erreicht wird.

Ansichtsdefinition ändern

$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'
)
));
?>

registerScript von clientScript wird zum Definieren clientseitiger JavaScripts verwendet.

Das Obige ist der Inhalt des PHP-Entwicklungsframeworks Yii Framework-Tutorial (19) UI-Komponente TreeView-Beispiel Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website ( www.php.cn)!