JSControlsTags

Treeview Control

Treeview

Click here to see Treeview Demo. Treeview is based on TafelTree javascript treeview control. It give you basic treeview feature and special features, like :

manage checkboxes.
drag/drop tree node with or without AJAX. Use ALT key, to insert node dragged into node dropped (if behaviourDrop='sibling' ).
open tree node with AJAX.
editable tree node with or without AJAX, by double clicking into a node editable.
copy/cut/paste tree node into another node.

You can build treeview :

on view JSP, with jscontrols-ajax:treeview-view taglib.
dynamicly (in your model), with jscontrols-ajax:treeview-dyn taglib.

Once you have describes your structure of your treeview, you can open a tree node with AJAX. See baseUrl and AJAX section for more information.

jscontrols-ajax:treeview-view

This taglib describes root treeview. Nodes treeview are describes with jscontrols-ajax:treenode taglib.

  <div id="viewTreeview" ></div>

<jscontrols-ajax:treeview-view source="viewTreeview" 
                 baseUrl="${pageContext.request.contextPath}/ajaxtreeview.do"
                 imgBase="${pageContext.request.contextPath}/img/treeview/"
                 width="100%"
                 height="auto"
                 var="objDynamicTreeview"
                 checkboxesThreeState="true"
                 multiline="true"
                 defaultImg="page.gif" 
                 defaultImgOpen="folderopen.gif"
                 defaultImgClose="folder.gif" 
                 behaviourDrop="sibling"
                 draggables="true" >
                 
  <jscontrols-ajax:treenode id="treeNodeRoot"
                            titleKey="treeview.treeview-view.root.title" />     
....
</jscontrols-ajax:treeview-view>

Required parameters :

Parameter	Description	Required
source	HTML Div treeview container.	yes
imgBase	Image base directory (close/open node image,...)	yes
defaultImg	Default Image to use when tree node has children.	yes
defaultImgOpen	Default Image to use when tree node is opened.	yes
defaultImgClose	Default Image to use when tree node is closed.	yes

Treeview properties (Optional parameters) :

Parameter	Description	Required
generate	True if treeview must be generated (by default true).	no
generateBigTree	True if treeview must generate a big tree.	no
var	Name of the JavaScript object treeview created.	no
baseUrl	URL of server-side when a node must be open/edit/drop with AJAX,...	no
width	Treeview width.	no
height	Treeview height.	no
bundleKey	Resource bundle key (eg : net.sourceforge.jscontrolstags.usecases.MyResourceBundle) used with titleKey. By default ApplicationResources Struts is used.	no
localeKey	Locale key ("fr","en", ...) or key of Locale object, stored into request.	no

Tree nodes properties (Optional parameters) available for all tree nodes of the treeview :

Parameter	Description	Required
checkboxesThreeState	True if treeview is enable manage checkbox with three states.	no
multiline	True if treeview is enable to manage multiline into text node.	no
draggables	True if all nodes must be draggables.	no
behaviourDrop	Behaviour drop : 'sibling' to insert node (with ALT) into another node, and 'child' to move the node. Default behaviour is 'child'.	no

jscontrols-ajax:treenode

This taglib describes a node of treeview.

Treenode properties (Optional parameters) :

Parameter	Description	Required
id	Tree node ID.	no
title	Title of tree node.	no
titleKey	Key title which is used to get label of title into Resources file (ApplicationResources or Resource Bundle).	no
img	Image to use when tree node has children. If this parameter is not filled, tree node will use defaultImg parameter.	no
imgopen	Image to use when tree node is opened. If this parameter is not filled, tree node will use defaultImgOpen parameter.	no
imgclose	Image to use when tree node is closed. If this parameter is not filled, tree node will use defaultImgClose parameter.	no
styleClass	CSS style class of tree node.	no
draggable	True if node can be draggable.	no
acceptdrop	True if node accept drop.	no
editable	True if node can be editable. This parameter works with onedit function. It is used when you want disable/enable onedit function.	no
last	True if node must be already the last node of treeview, even after a drag/drop of another node on this node.	no

Treenode events (Optional parameters) on client side :

Parameter	Description	Required
onclick	On click javascript function.	no
ondrop	On drop javascript function.	no
onmouseout	On mouse out javascript function.	no
onmouseover	On mouse over javascript function.	no
ondblclick	On double click javascript function.	no
onedit	On edit javascript function (in order to edit a tree node).	no

Treenode events (Optional parameters) on server side (AJAX) :

Parameter	Description	Required
openAjax	True if tree node must be opened with AJAX. URL server side called is baseUrl filled into treeview root.	no
editAjax	True if tree node must be editable with AJAX. URL server side called is baseUrl filled into treeview root.	no
dropAjax	True if tree node must be droppable with AJAX. URL server side called is baseUrl filled into treeview root.	no

jscontrols-ajax:treeview-dyn

Coming soon...

baseUrl and AJAX

baseUrl is the url wich must return Array of JSON tree node, to open/edit/drop a tree node with AJAX on server side.

To help you, you can :

implements abstract class BaseTreeViewAction if you use Struts.
implements abstract class BaseTreeViewServlet if you use JSP.

net.sourceforge.jscontrolstags.server.treeview.BaseTreeViewAction

Methods to implements abstract class BaseTreeViewAction are :

onOpenAjax, which is called when a tree node is opened with AJAX (openAJax=true). In this method, you must add tree node to insert on the tree node root.

    public abstract void onOpenAjax(String treeViewId, String treeNodeId, TreeNode treeNodeRoot, 
                    ActionMapping mapping, ActionForm form, HttpServletRequest request,
                  HttpServletResponse response);

onEditAjax which is called when a tree node is edited with AJAX (editAJax=true).

    public abstract String onEditAjax(String treeViewId, String treeNodeId, 
                    String oldValue, String newValue, 
                    ActionMapping mapping, ActionForm form, HttpServletRequest request,
                  HttpServletResponse response);

onDropAjax which is called when a tree node is dropped with AJAX (dropAJax=true).

    public abstract String onDropAjax(String treeViewDragId, String treeViewDropId, 
                    String treeNodeDragId, String treeNodeDropId, String sibling,
                    ActionMapping mapping, ActionForm form, HttpServletRequest request,
                  HttpServletResponse response);

Example :

public class AjaxTreeviewAction extends BaseTreeViewAction {

  public void onOpenAjax(String treeViewId, String treeNodeId, TreeNode treeNodeRoot, 
                         ActionMapping mapping, ActionForm form, 
                         HttpServletRequest request, HttpServletResponse response) {
    if (treeNodeId.startsWith("ajaxNode")) {
            // Add treenode draggable
            TreeNode treeNodeDraggable = new TreeNode("treeNodeDraggable", "Tree Node Draggable");
            treeNodeDraggable.setDraggable(Boolean.TRUE);
            treeNodeRoot.addTreeNode(treeNodeDraggable);
            // Add treenode editable
            TreeNode treeNodeEditable = new TreeNode("treeNodeDraggable", "Tree Node Editable");
            treeNodeEditable.setEditable(Boolean.TRUE);
            treeNodeRoot.addTreeNode(treeNodeEditable);
    }
    else {
            // Manage other tree node id...
    }
  }
  
  public String onEditAjax(String treeViewId, String treeNodeId, 
                  String oldValue, String newValue, 
                  ActionMapping mapping, ActionForm form, HttpServletRequest request,
                HttpServletResponse response) {
          // Do something....
          return newValue;
  }

  public String onDropAjax(String treeViewDragId, String treeViewDropId, 
                  String treeNodeDragId, String treeNodeDropId, String sibling,
                  ActionMapping mapping, ActionForm form, HttpServletRequest request,
                HttpServletResponse response) {
          // Do something....
          
          return null;
  }  
}

Don't forget to declare your Struts action in the struts-config, like this :

  <action path="/ajaxtreeview" 
          validate="false" 
          scope="request" 
          type="net.sourceforge.jscontrolstags.usecases.treeview.AjaxTreeviewAction" />

After in the taglib jscontrols-ajax:treeview-view, fill baseUrl, like this :

<jscontrols-ajax:treeview-view source="viewTreeview" 
                 baseUrl="${pageContext.request.contextPath}/ajaxtreeview.do"  
                 ....

net.sourceforge.jscontrolstags.server.treeview.BaseTreeViewServlet

Methods to implements abstract class BaseTreeViewServlet are :