FlexGrid

[Total: 0    Average: 0/5]

This menu allows one to expand and collapse a menu by clicking on the + or –

Head Code:

<style>
TD
{
    PADDING-LEFT: 5px;
    FONT-SIZE: 11px;
    COLOR: #000000;
    FONT-FAMILY: verdana, arial, 'Microsoft Sans Serif', helvetica, sans-serif
}
</style>
                                                                                                         
<script language=javascript>
function showObj(_o)
{
var _s="";
for(var i in _o)
{
_s+=i+"="+_o[i]+" <BR> ";
}
var _x=window.open();
_x.document.open();
_x.document.write(_s);
_x.document.close();
}
/* Tree View Grid Properties & Functions */
        var plusImage = "/data/ex_1015/plus1.gif";
        var minusImage = "/data/ex_1015/minus1.gif";
        var imageTagPrefix = "img";
        var nodeSeparator = ".";
        var nodeHighlightColor = "lightblue";
        var nodeMouseOverColor = "wheat";
        var n = 1;
                                                                                                         
/*      Function to collapse a Node
        Function will be called Recursively till the Last Child of the Node
*/
        function Collapse(Node)
        {
                                objNode = document.getElementById(Node);
                                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);
                                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);
                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";
                                                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)
        {       objNode = document.getElementById(Node);
                        objNode.style.backgroundColor=nodeMouseOverColor;
        }
        function mOut(Node)
        {               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>

Body Code:

<BR><BR>
<h3>Demo</h3>
 <TABLE cellSpacing=1 cellPadding=1 width="100%" 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="/data/ex_1015/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="/data/ex_1015/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="/data/ex_1015/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="/data/ex_1015/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="/data/ex_1015/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="/data/ex_1015/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="/data/ex_1015/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="/data/ex_1015/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="/data/ex_1015/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>
<br>
Regards,<BR>
Abhijeet Kaulgud<BR>
ask5@rediffmail.com<BR>
Feel free to contact for any Support/Help.<BR>
Bug Reports, Suggestions, Enhancements etc. are always welcome.
<BR><BR>
Special thanks to Mike Robb (Free java-scripts: http://js-x.com/) for some code modifications
and ensuring that the script works in NS6 on Linux!

<SCRIPT LANGUAGE=javascript>
//<!--
      OpenNode('Book');
//-->
</SCRIPT>

Times Viewed: 18

Leave a Reply

Your email address will not be published. Required fields are marked *