Version 9.1 by Thomas Mortagne on 2011/10/27 18:01

cogmktree : DHTML Static Tree
Typeapplication
Category
Developed by

Dilipkumar J

Rating
0 Votes
LicenseUnknown

Table of contents

Description

Intro:

  • mktree: DHTML Tree based on static ul-li html tags is the creation of Matt Kruse and the original code with examples is maintained here.

  • This script can be used when we need to represent hierarchical data using a tree.

  • It generates a collapsible & expandable tree which degrades well if javascript is disabled on the browser.
  • The tree only requires a basic understanding of the ul-li tags in html.

  • The entire application is only 4KB in size.


  • Example

    basetree.gif
    The example demonstrates a 3 level tree. It is possible to create as many nested levels as possible.















    Ready Made example:

  • 1.Import the mktree application in your wiki.
  • 2.Create a new page & use the Wiki editor.
  • 3.Paste the following code in the page:

  • $xwiki.ssx.use("XWiki.mktree")
    $xwiki.jsx.use("XWiki.mktree")
    <ul name ="anyname" class="mktree">
         <li>Movies 2008/2009
           <ul>
        <li>Action
                   <ul>
       <li>Fast & Furious 4
                         <ul>
                             <li>tags
                                 <ul>
                                    <li>Cars
                                    <li>Car Chase
                                 </ul>
                         </ul>
      <li>X-Men Origins: Wolverine
                   <ul>
                   <li>
                   </ul>
      <li>Sniper
                   <ul>
                   <li>
                   </ul>
    <li>Star Trek
                   <ul>
                   <li>
                   </ul>
                   </ul>
       <li>Fantasy
                   <ul>
    <li>The Hunt for Gollum
    <li>Watchmen
    <li>Dragonquest
                   </ul>
      <li>Comedy
                   <ul>
    <li>I Love you, Man
    <li>Frankenhood
    <li>Baby On Board
                   </ul>
       <li>Drama
                   <ul>
    <li>El Cartel
    <li>Angels & Demons
    <li>Little Ashes
                   </ul>
       <li>History
                   <ul>
    <li>Time of the Comet
    <li>Winter of Frozen Dreams
    <li>Red Cliff II
                   </ul>
           </ul>
    </ul>

    Creating the tree step by step:


    1.Including the proper resources

  • For all XWiki versions:
  • $xwiki.jsx.use("XWiki.mktree")
    $xwiki.ssx.use("XWiki.mktree")


    2.Chosing the right editor


    The mktree works only in the Wiki editor & is not supported by the WYSIWYG editor.
    The mktree works in the XWiki 1.0 Syntax only & is not supported by the XWiki 2.0 Syntax


    3.Creating a basic block of code


    A basic block in the mktree plugin is nothing but a ul - li block.
    Everytime, you want to create a node (node = branch of tree that opens when clicked on + sign), you add a ul - li block.
    Basic Building Block
    <ul>
       <li>
    </ul>


    4.Adding more BBB(Basic Building Blocks)


    Let's add some data and more ul - li tags to the block we created in the above step. First, let's name the start of the tree as 'Movies'. Please refer the example image above to understand the tree flow.

    <ul>
       <li>Movies
    </ul>
    Now, let's add the first child element 'Action'.

    <ul>
       <li>Movies
           <ul>
               <li>Action
           </ul>
    </ul>
    Now, time to add the second child element 'Fantasy'. Both 'Action' and 'Fantasy' are at the same level & they are both children of Movies.

    <ul>
       <li>Movies
           <ul>
               <li>Action
               <li>Fantasy
           </ul>
    </ul>

    Now, to add a child to 'Action' add another basic ul-li element right beneath 'Action'


    <ul>
       <li>Movies
           <ul>
               <li>Action
                   <ul>
                       <li>Fast & Furious 4
                   </ul>
               <li>Fantasy
           </ul>
    </ul>

    5.Name & Class for the tree

    Give this tree an id and class. This is done only to the very first 'ul' tag. The id is any name that you want to give this tree. However, the class will be always "mktree".

    <ul id="anyname" class="mktree">
       <li>Movies
           <ul>
               <li>Action
                   <ul>
                       <li>Fast & Furious 4
                   </ul>
               <li>Fantasy
           </ul>
    </ul>

    You can build onto the existing tree and create your simple to use collapsible tree.
    Or, you can save your page and you should have your basic DHTML tree all ready to go.




    Special Feature


    1. Expand the entire tree
    Use the following code snippet to expand the entire tree. Use the name of your tree in expandTree('anyname').
    <a onclick="expandTree('anyname');return false;" class="button" href="#">Expand All Nodes</a>

    2. Collapse the entire tree
    Use the following code snippet to collapse the entire tree. Use the name of your tree in collapseTree('anyname').
    <a onclick="collapseTree('anyname'); return false;" href="#" class="button">Collapse All Nodes</a>

    3. mktree & macros
    The mktree plugin supports macros within it. Add a macro as you would normally would in a page.
    This mktree has been tested with the info macro, warning macro & error macro.
    Below, is just a snippet of the actual code that show how you can add a macro underneath any li tag.
    <li>Fast & Furious 4
                        #warning("Not for the faint hearted!!!")
                         <ul>
                             <li>tags
                                 <ul>
                                    <li>Cars
                                    <li>Car Chase
                                 </ul>
                         </ul>

    3. mktree & applications
    The mktree plugin supports applications within it. Add an application to any li tag in your tree.
    This mktree has been tested with the DatePicker & LightBox applications for XWiki
    The mktree javascript does not interfere with the code of these applications.
        

    Get Connected