Drupal: jquery_jstree Example Module

This example module shows the usage of jquery_jstree..

If you are not in pressentation mode, press the slideshow icon to start.

Prerequisites

module dependencies:
- jq, jquery_update, jquery_jstree
As mentioned in the documentation by the maintainer, apply patches

cd /path/to/jquery_update
wget -O - http://drupal.org/files/issues/jquery_update_775924_0.patch | patch -p0
cd /path/to/drupal_root
wget -O - http://drupal.org/files/issues/479368_drupal_to_js_all_escaped_13.patch | patch -p0

Installation

Download jsTree
extract to the folder jquery inside the jquery_jstree module folder

replace with your paths

wget -P /tmp http://jstree.googlecode.com/files/jsTree.v.1.0rc2.zip
mkdir /path/to/jquery_jstree/jquery
unzip /tmp/jsTree.v.1.0rc2-1.zip -d /path/to/jquery_jstree/jquery

Building the module jstree_demo

Create a folder jstree_demo

cd /path/to/drupal_root/sites/all/modules
mkdir jstree_demo
cd jstree_demo

Create the .info file

jstree_demo.info

1: name = jsTree Demo
2: description = jsTree Demonstration plugin
3: dependencies[] = jquery_jstree
4: core = 6.x

Basic Function: Permissions

jstree_demo.module

1: function jstree_demo_perm() {
2:     return array('access jstree_demo items');
3: } // function jstree_demo_perm()

A Basic Menu (will be extended later)

jstree_demo.module

 1: function jstree_demo_menu() {
 2:     $items = array();
 3:
 4:     // link to the jstree_demo, starts with jstree_demo_message_simple:
 5:     $items['jstree'] = array(
 6:         'title' => 'jsTree',
 7:         'description' => 'simple jsTree Demos with static js file or inline',
 8:         'page callback' => 'jstree_demo_message_simple',
 9:         'access arguments' => array('administer jstree_demo_module'),
10:         'type' => MENU_NORMAL_ITEM,
11:     );
12:
13:     return $items;
14: }

A simple example with a external Javascript file

jstree_demo.module

1: function jstree_demo_message_simple () {
2:   $page_content = '';
3:   // jstree needs a 'canvas', identified by id within the javascript part
4:   $page_content = '<div id="demo" class="demo"></div>';
5:   drupal_add_js(drupal_get_path('module', 'jstree_demo') . '/jstree_demo.js');
6:   jq_add('jstree');
7:   return $page_content;
8: } // function jstree_demo_module_message ()

the Javasript part in the file

line 3: #demo has to match the <div …> within the function above see line 4 of the function
line 20: doublecheck the path

jstree_demo.js

 1:   Drupal.behaviors.ews_gestconf_services = function (context) {
 2:     $(function () {
 3:       $("#demo").jstree({
 4:         "json_data" : {
 5:           "data" : [
 6:             {
 7:               "data" : "A node",
 8:               "children" : [ "Child 1", "Child 2" ]
 9:             },
10:             {
11:               "attr" : { "id" : "li.node.id" },
12:               "data" : {
13:                 "title" : "Long format demo",
14:                 "attr" : { "href" : "#"+"foo" }
15:               }
16:             }
17:           ]
18:         },
19:         "themes" : {"theme" : "classic",
20:               "url" : "sites/all/modules/contrib/jquery_jstree/jquery/themes/classic/style.css"
21:         },
22:         "plugins" : [ "themes", "json_data" ]
23:       });
24:     });
25:   }

About Me

{{vcard>[polyformal] Stefan Pampel <stefan-dot-pampel@polyformal.de-removeme> http://www.polyformal.de/ # +49 221 3103 122 & & & +49 221 9311 9223 | Kaesenstraße 8, D-50677 Köln, Germany }}{{vcards:stefan_pampel_small.jpg?80|}}

drupal