ctree Ajax tree (Moco Tree)

  1. Requirements
  2. Usage
  3. Change Log

This widget allows to display the Tree and it is similar to the CTreeView, but allows any layout and loading with the url.

  • Allows multi level data load: static and dynamic (Ajax)
  • Allows to use the any node template
  • Allows single selection and multi-selection
  • Allows onClick and onLoad functionality
  • Allows per node loading url (each node can loading from the own url)
  • Allows easy design change

Requirements

Yii 1.1.7

Usage

To use the extension just unzip all of its contents to the /protected/widgets/ or to the root of your /protected and /images folders.

You could always tune the view of the tree with the tree.css

Multi Selection Style

Single Selection Style

//Example of the dynamic initialization

$this->beginWidget('CTree', array(
    'Id'=>'TreeId',
	// All nodes would be open
	'openAll'=>false,

	// Allows multi selection
	'multi'=>true,
	
	// Sets the url for the JSON data
	'url' => $this->createUrl("/yourModule/controller/getTree/"),
	'width' => 200, 
	'height' => 200,
	
	// Allows loading with ajax
	'ajaxLoad' => true,
	
	// Select the first node
	'firstSelect' => true
	));

$this->endWidget('CTree');

//You should return the serialized array in your controller/action/ 
	public function actionGetTree()
	{
		$result = null;
			
		if(!isset($_REQUEST['id']) )
		{
			$result = TreeManager::load(null);
		}
		elseif(($id = (float)$_REQUEST['id']) && ($id > 1))
		{
			$result = TreeManager::load($id);
		}
			
		if(!empty($result))
		{
			echo CJavaScript::jsonEncode($result);
		}
		else
		{
			echo "[]";
		}
	}


// on the client side you should get the such array for rendering 
(you could easily check with the Firebug utility)

[{"nodeTitle":"Failed","nodeId":6,"hasChildren":false}, {"nodeTitle":"Passed","nodeId":7,"hasChildren":false}]


//Example of the static initialization

$this->beginWidget('CTree', array(
    'id'=>'newTree',
    // additional javascript options for the dialog plugin
    'openAll'=>false,
	'width' => 200, 
	'height' => 400,
	'onLoad' => ' function () { alert("onLoad Function"); }',
	'firstSelect' => false,
	'multi' => true,
	'data' => array(
		array('nodeId' => rand(10000, 100000), 'nodeTitle' => 'Node1', 
                    'selected' => true, 'nodeChildren' => array()), 
		array('nodeId' => null, 'nodeTitle' => 'Node1', 'selected' => true,               'nodeChildren' => array()), 
		array('nodeId' => null, 'nodeTitle' => 'Node2', 'selected' => false,              'nodeChildren' => array(
		array('nodeId' => rand(10000, 100000), 'nodeTitle' => 'Node2.1', 'selected' => false,              'nodeChildren' => array()), 
		array('nodeId' => null, 'nodeTitle' => 'Node2.2', 'selected' => true,               'nodeChildren' => array(
                array('nodeId' => rand(10000, 100000), 'nodeTitle' => 'Node2.2.1', 'selected' => false,            'nodeChildren' => array()), 
                array('nodeId' => null, 'nodeTitle' => 'Node2.2.2', 'selected' => true,                'nodeChildren' => array( 
                          array('nodeId' => rand(10000, 100000), 'nodeTitle' => 'Node2.2.2.1', 'selected' => false,  'nodeChildren'=>array())
                ),
	     )
	   )
	)
     )
))));
	
$this->endWidget('CTree');

Change Log

Version 1.2 (2012-02-06 release file)
  • added scroll: auto style
  • fixed the single selection mode
  • fixed some onclick issues
  • fixed issue of the tree loading when the several trees placed on the single page
  • fixed design issues (added images dir to the release file)

##Resources

 * [Project page] [https://code.google.com/p/moco-tree/](https://code.google.com/p/moco-tree/ "https://code.google.com/p/moco-tree/")
 * [Owner is] [http://tmx.com.ua/](http://tmx.com.ua/ "http://tmx.com.ua/")
 * [Developed by] Sysprog of [http://martis-ua.com/](http://martis-ua.com/ "http://martis-ua.com/")
1 2
15 followers
1 038 downloads
Yii Version: 1.1
License: MIT
Category: User Interface
Developed by: sysprog
Created on: Jan 10, 2012
Last updated: 6 years ago

Downloads

show all

Related Extensions