<Scenario>: I need tree view to show the manager and their direct report in an organization. It’s best to use tree view structure, but I did not see any user icon and employee icon in it, so below is steps to show how I added the icons into the tree view if you are interested that.
Before:
4414
After:
4415
<Method>: I always search in Yii community first, I saw some Yii extension can add icon into CTreeview, but I think it’s not a simple way to do in my case. I found there is file tree view already in CTreeview since 1.1, so I did research and see how file tree view works, then I found it’s just a very few simple steps to change that.
<Solution>: First, you need have you own icons available, copy them into framework/web/js/source/treeview/images. I recommend you copy Yii framework folder into your project folder, then any changes will not touch your original Yii framework. Of course, you need change the paths in index.php, like
$yii=dirname(__FILE__).'/framework/yii.php';
so you code will call the framework under your project folder.
Second, add icon definition into jquery.treeview.css, also define a new class, named usertree. you can add below code at the end of file, make sure your icon file name is correct.
/* this is user tree, samiliar as file tree*/
.usertree li { padding: 3px 0 2px 16px; } /*16px is because my icon file is 16X16, if your icon file is bigger than that, you need change this value to avoid overlap.
.usertree span.manager, .usertree span.user { padding: 1px 0 1px 16px; display: block; }
.usertree span.user { background: url(images/employee.gif) left center no-repeat; }
.usertree span.manager { background: url(images/manager.png) left center no-repeat; }
Third, now you can call user tree view in you view file.
<h1> My Team </h1>
<p>It shows 3 layers of your direct reports.</p>
<?php
$this->widget('CTreeView', array(
'id'=>'myteam-treeview',
'data'=>User::model()->myemployeetree(Yii::app()->user->id),
'collapsed'=>'false',
'htmlOptions'=>array(
'class'=>'usertree', //apply usertree definition in css
//'class'=>'treeview-famfamfam',
),
));
?>
myemployeetree is recursion function to get all current manager’s direct report, the return data like:
'data'=>array(
array('text'=>'<scan class="manager">manager name</span>',
'children' =>array(
array('text'=>'<span class="user">employee name</span>',
...
Make sure you cleared assets folder when you complete all changes to test. Otherwise you will not see any changes, due to the system still call javascript from assets folder.
So you don’t have to search any extension for your user tree view chart.