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

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>

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!