PHP 개발 프레임워크 Yii Framework 튜토리얼(19) UI 컴포넌트 TreeView 예제

CTreeView는 Data 속성을 설정하여 TreeView를 사용하여 계층적 데이터를 표시하는 데 사용됩니다. 데이터는 다음 구조의 배열입니다:

ext: 문자열, 트리 노드의 텍스트.

expanded: 부울, 선택 사항, 노드 확장 여부를 나타냅니다.

id: 문자열, 선택 사항, 노드 ID.

hasChildren: 부울, 선택 사항, 기본값은 False입니다. True인 경우 노드에 하위 노드가 포함되어 있음을 의미합니다.

어린이: 배열, 선택 사항, 하위 노드 배열.

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를 통해 달성됩니다.

뷰 정의 수정

$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 중국어 웹사이트( www.php.cn)!