FlexiGrid 2 Javascript

Javascripts > Javascript Menus > FlexiGrid 2

Script Title: FlexiGrid 2

Description: FlexiGrid 2 is a sort of folding grid, where you can display your tabular data in a hierarchial manner. As far as the internal functionality is concerned, FlexiGrid follows the concept of 'Content Indexing in a document'. i.e. The node IDs are generated in a way similar to the Content Indexing of a typical well organized document.

Example: Available

Group Sub Group Available Books Code Price

MICROSOFT

Visual Basic

Programming Microsoft VB 6.0

VB6.0 from the Ground Up

Database Access With VB 6

ASP

Programming in ASP 3.0

Database Access With ASP

Visual C++

Programming in Visual C ++

ASP.NET

C#

JAVA

JSP

Programming in JSP

JSP From Scratch

Core JSP

Database Access With JSP

J2EE

EJB Design Patterns

Web Services Using Java

Java Language Guide

Thinking in Java

Programming Jakarta Struts

IBM

AS 400

AS/400 Language Guide

Double Click

Credit: Script created by Abhijeet Kaulgud

Copy the following code into your <HEAD></HEAD> tags.

<script language=javascript> /* Tree View Grid Properties & Functions */ var plusImage = "plus1.gif"; var minusImage = "minus1.gif"; var imageTagPrefix = "img"; var nodeSeparator = "."; var nodeHighlightColor = "lightblue"; var nodeMouseOverColor = "wheat"; var n = 1; var ApplyStyle = true; /* Function to collapse a Node Function will be called Recursively till the Last Child of the Node */ function Collapse(Node) { objNode = document.getElementById(Node); if (ApplyStyle) objNode.style.backgroundColor=nodeHighlightColor; /* Get n'th child of Node <n starts from 1 till the last child>*/ objChildNode = document.getElementById(Node + nodeSeparator + n); /* Get image object of Node */ objImg = document.getElementById(imageTagPrefix + nodeSeparator + Node); /* Check if Child exists. If does not exist then Reset n = 1 & exit function & */ if(objChildNode != null) { /* Toggle the Child Status i.e. if visible then make it invisible & vis-versa */ if (objChildNode.style.display == "") { /* Close all the Childs, Sub-Childs and so on of the Node*/ if (objImg != null)objImg.src = plusImage; closeAllChilds(Node) return; }else { objChildNode.style.display = ""; if (objImg != null)objImg.src = minusImage; } /* Call Collapse for the Next Child be increamenting n*/ n = n + 1; Collapse(Node); }else n = 1; } /*if p_direction = 0 then Close else Open*/ function ExplicitCollapse(Node,p_direction) { objNode = document.getElementById(Node); if (ApplyStyle) objNode.style.backgroundColor=""; objChildNode = document.getElementById(Node + nodeSeparator + n); objImg = document.getElementById(imageTagPrefix + nodeSeparator + Node); if(objChildNode != null) { if (p_direction == "0") { objChildNode.style.display = "none"; if (objImg != null)objImg.src = plusImage; if(!closeAllChilds(objChildNode.id)) return false; }else { objChildNode.style.display = ""; if (objImg != null)objImg.src = minusImage; } n = n + 1; ExplicitCollapse(Node,p_direction); }else n = 1; } /* Function to close all the childs of a Node As Each Child Node ID contains its Parent Node ID, Close all the rows having the Node ID as a prefix in their IDs. */ function closeAllChilds(nNode) { var tempNode,objTempNode,objNode,tempImg,objBody; objNode= document.getElementById(nNode); if (ApplyStyle) objNode.style.backgroundColor=""; /* Get the Parent Element of Node ie. the Table Object */ objTable = objNode.parentElement?objNode.parentElement:objNode.parentNode; var browserName=navigator.appName; if (browserName=="Microsoft Internet Explorer") { tagNm = objTable.tagName; }else { tagNm = "TBODY"; } /* Get the Parent Element is not a Table then exit function */ if(tagNm.toUpperCase() == "TBODY") { /* For each TR of the Table*/ for(i=0;i<objTable.rows.length;i++) { /* Get the ID of the TR i.e. Node ID */ tempNode = objTable.rows[i].id; /* If the ID of the TR contains nNode then make the TR invisible*/ if (tempNode != nNode) { if(tempNode.indexOf(nNode) >= 0) { objTempNode = document.getElementById(tempNode); tempImg = document.getElementById(imageTagPrefix + nodeSeparator + tempNode); if (tempImg != null)tempImg.src = plusImage; objTempNode.style.display = "none"; if (ApplyStyle) objTempNode.style.backgroundColor=""; } } } }else { alert("Table Tag not found"); return false; } return true; } /* Function to keep a Node open onLoad This function also opens up the corresponding Parent Nodes of that perticular Node */ function OpenNode(strNode,p_direction) { var objNode; var arrNode = strNode.split(nodeSeparator); var str = ""; for(i=0;i<arrNode.length;i++){ if(str == "") { str = arrNode[i]; }else { str = str + nodeSeparator + arrNode[i]; } objNode = document.getElementById(str); if (objNode != null) { if (p_direction == "1") { ExplicitCollapse(str,p_direction); }else { Collapse(str); } } } } function mOver(Node) { if (ApplyStyle) { objNode = document.getElementById(Node); objNode.style.backgroundColor=nodeMouseOverColor; } } function mOut(Node) { if (ApplyStyle) { objNode = document.getElementById(Node); objImg = document.getElementById(imageTagPrefix + nodeSeparator + Node); if (objImg != null) { strSrc = objImg.src; if(strSrc.indexOf(minusImage) < 0) objNode.style.backgroundColor=""; else objNode.style.backgroundColor=nodeHighlightColor; }else { objNode.style.backgroundColor=""; }} } </script>

Copy the following code between the <BODY></BODY> tags of your html page.

<TABLE cellSpacing=1 cellPadding=1 width="550" border=0 bgColor="#000000"> <tr id="Book" bgColor="#aaaaaa" onDblClick="Collapse(this.id)"> <td width="20%">Group</td> <td width="20%">Sub Group</td> <td width="20%">Available Books</td> <td width="20%">Code</td> <td width="20%">Price</td> </tr> <tr bgColor="#cdcdcd" id="Book.1" title="Book.1" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td><IMG id=img.Book.1 style="CURSOR: hand" onclick="Collapse('Book.1')" height =9 src="plus1.gif" width=9 ><b>MICROSOFT</b></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr bgColor="#ededed" id="Book.1.1" title="Book.1.1" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td><IMG id=img.Book.1.1 style="CURSOR: hand" onclick="Collapse('Book.1.1')" height =9 src="plus1.gif" width=9 ></td> <td>Visual Basic</td> <td></td> <td></td> <td></td> </tr> <tr bgColor="#ffffff" id="Book.1.1.1" title="Book.1.1.1" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>Programming Microsoft VB 6.0</td> <td><input type="txtStart001210"></td> <td><input type="txtEnd001210"></td> </tr> <tr bgColor="#ffffff" id="Book.1.1.2" title="Book.1.1.2" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>VB6.0 from the Ground Up</td> <td><input type="txtStart001212"></td> <td><input type="txtEnd001212"></td> </tr> <tr bgColor="#ffffff" id="Book.1.1.3" title="Book.1.1.3" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>Database Access With VB 6</td> <td><input type="txtStart00121"></td> <td><input type="txtEnd00121"></td> </tr> <tr bgColor="#ededed" id="Book.1.2" title="Book.1.2" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td><IMG id=img.Book.1.2 style="CURSOR: hand" onclick="Collapse('Book.1.2')" height =9 src="plus1.gif" width=9 ></td> <td>ASP</td> <td></td> <td></td> <td></td> </tr> <tr bgColor="#ffffff" id="Book.1.2.1" title="Book.1.2.1" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>Programming in ASP 3.0</td> <td><input type="txtStart001310"></td> <td><input type="txtEnd001310"></td> </tr> <tr bgColor="#ffffff" id="Book.1.2.2" title="Book.1.2.2" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>Database Access With ASP</td> <td><input type="txtStart00131"></td> <td><input type="txtEnd00131"></td> </tr> <tr bgColor="#ededed" id="Book.1.3" title="Book.1.3" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" onDblClick="Collapse(this.id)" style="DISPLAY: none"> <td><IMG id=img.Book.1.3 style="CURSOR: hand" onclick="Collapse('Book.1.3')" height =9 src="plus1.gif" width=9 ></td> <td>Visual C++</td> <td></td> <td></td> <td></td> </tr> <tr bgColor="#ffffff" id="Book.1.3.1" title="Book.1.3.1" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>Programming in Visual C ++</td> <td><input type="txtStart00143"></td> <td><input type="txtEnd00143"></td> </tr> <tr bgColor="#ededed" id="Book.1.4" title="Book.1.4" onDblClick="Collapse(this.id)" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td>ASP.NET</td> <td></td> <td></td> <td></td> </tr> <tr bgColor="#ededed" id="Book.1.5" title="Book.1.5" onDblClick="Collapse(this.id)" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td>C#</td> <td></td> <td></td> <td></td> </tr> <tr bgColor="#cdcdcd" id="Book.2" title="Book.2" onDblClick="Collapse(this.id)" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td><IMG id=img.Book.2 style="CURSOR: hand" onclick="Collapse('Book.2')" height =9 src="plus1.gif" width=9 ><b>JAVA</b> </td> <td></td> <td></td> <td></td> <td></td> </tr> <tr bgColor="#ededed" id="Book.2.1" title="Book.2.1" onDblClick="Collapse(this.id)" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td><IMG id=img.Book.2.1 style="CURSOR: hand" onclick="Collapse('Book.2.1')" height =9 src="plus1.gif" width=9 ></td> <td>JSP</td> <td></td> <td></td> <td></td> </tr> <tr bgColor="#ffffff" id="Book.2.1.1" title="Book.2.1.1" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>Programming in JSP</td> <td><input type="txtStart002123"></td> <td><input type="txtEnd002123"></td> </tr> <tr bgColor="#ffffff" id="Book.2.1.2" title="Book.2.1.2" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>JSP From Scratch</td> <td><input type="txtStart0021210"></td> <td><input type="txtEnd0021210"></td> </tr> <tr bgColor="#ffffff" id="Book.2.1.3" title="Book.2.1.3" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>Core JSP</td> <td><input type="txtStart002121"></td> <td><input type="txtEnd002121"></td> </tr> <tr bgColor="#ffffff" id="Book.2.1.4" title="Book.2.1.4" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>Database Access With JSP</td> <td><input type="txtStart0021212"></td> <td><input type="txtEnd0021212"></td> </tr> <tr bgColor="#ededed" id="Book.2.2" title="Book.2.2" onDblClick="Collapse(this.id)" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td><IMG id=img.Book.2.2 style="CURSOR: hand" onclick="Collapse('Book.2.2')" height =9 src="plus1.gif" width=9 ></td> <td>J2EE</td> <td></td> <td></td> <td></td> </tr> <tr bgColor="#ffffff" id="Book.2.2.1" title="Book.2.2.1" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>EJB Design Patterns</td> <td><input type="txtStart002223"></td> <td><input type="txtEnd002223"></td> </tr> <tr bgColor="#ffffff" id="Book.2.2.2" title="Book.2.2.2" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>Web Services Using Java</td> <td><input type="txtStart0022210"></td> <td><input type="txtEnd0022210"></td> </tr> <tr bgColor="#ffffff" id="Book.2.2.3" title="Book.2.2.3" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>Java Language Guide</td> <td><input type="txtStart002221"></td> <td><input type="txtEnd002221"></td> </tr> <tr bgColor="#ffffff" id="Book.2.2.4" title="Book.2.2.4" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>Thinking in Java</td> <td><input type="txtStart0022212"></td> <td><input type="txtEnd0022212"></td> </tr> <tr bgColor="#ffffff" id="Book.2.2.5" title="Book.2.2.5" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>Programming Jakarta Struts</td> <td><input type="txtStart002227"></td> <td><input type="txtEnd002227"></td> </tr> <tr bgColor="#cdcdcd" id="Book.3" title="Book.3" onDblClick="Collapse(this.id)" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td><IMG id=img.Book.3 style="CURSOR: hand" onclick="Collapse('Book.3')" height =9 src="plus1.gif" width=9 ><b>IBM</b></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr bgColor="#ededed" id="Book.3.1" title="Book.3.1" onDblClick="Collapse(this.id)" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td><IMG id=img.Book.3.1 style="CURSOR: hand" onclick="Collapse('Book.3.1')" height =9 src="plus1.gif" width=9 ></td> <td>AS 400</td> <td></td> <td></td> <td></td> </tr> <tr bgColor="#ffffff" id="Book.3.1.1" title="Book.3.1.1" onMouseOver="mOver(this.id);" onMouseOut="mOut(this.id);" style="DISPLAY: none"> <td></td> <td></td> <td>AS/400 Language Guide</td> <td><input type="txtStart010233"></td> <td><input type="txtEnd010233"></td> </tr> <TR bgColor="#aaaaaa" onDblClick="Collapse('Book')"> <td colspan=5>Double Click</td> </TR></TABLE>

Enter your name and email address to have this script sent right to your Inbox for later viewing.

First Name Last Name Email

<reallybig.com>
Web Builder Network Portal

WebBuilderZone
The Largest directory of Web Building resources on the 'Net!

Reallybig Forums
Ask a question, join a discussion, start a thread.

Bignosebird
FREE CGI scripts, Web tutorials, essential HTML tricks and more!

Fontpool
1000+ Truetype fonts for PC & MAC!

Graphxkingdom
Thousands of free Icons, Clipart & Themes!

Free-Backgrounds
Hundreds of eye-popping Backgrounds & Textures

Java-scripts.net
Cool and easy effects with cut-and-paste Javascripts!

Sitecritique.net
Friendly community where you can get a site critique - or give one!

Advertise
on the
Reallybig.com
Network