[orginal]treeView control based on WEB

thinking in treeView :
first of all we have to see what the treeView real is,normall treeView is frame contians nested others frame call it itemes each iteme frame maybe contian others subitem.what is the structure of the iteme of the treeview ? each items contians the( image icon + collapsed or expanded , the image for items which refer to and the caption of element item.

let us start by the css code :

the treeFrame going some thing like this:

/*tree view  is ul*/
.creTreeView
{


    cursor: pointer;

    width:206px;
    height:30px;
    margin: 0;
    padding: 0;
    overflow:auto;
    font-family: 宋体;
    font-size: 12px;
    color:black;

}

/* each li maybe node*/
.creTreeView li
{
    /* The padding is for the tree view nodes */
    padding: 0 0  0 22px;
    float: left;
    width:150px;
    list-style: none;
}

/* if the li is parent ul  */
.creTreeView ul
{
    margin: 0;
    padding: 0;
}

/*if the node expanded*/
li.Expanded
{
    background:url('images/ExpandedNotLast.gif') no-repeat left top;
    /*background-image:url('images/ExpandedNotLast.gif');*/
}

/* show all subitems if the list li is expanded ,all sublist in the ul*/
li.Expanded ul
{
    display: block;
}

/* collapesd show the collapse image*/
li.Collapsed
{
    background:url('images/CollapsedNotLast.gif') no-repeat left top;
   /* background-image:url('images/CollapsedLast.gif');*/

}

/* hide all items in sublist*/
li.Collapsed ul
{
    display: none;
}

/* the sublist items of the list.show the linkContent*/
.Expanded li
{
    background-position:right;
    background: url('images/sx_2.gif');
    background-repeat: no-repeat;

}

/**/
.creTreeView li
{
     padding:1px 0px  0px 20px;

}
.creTreeView li ul li
{
    /* The padding is for the tree view nodes */
    padding:0px 0px  0px 30px;


}

.creTreeView li ul li:hover
{
    /* The padding is for the tree view nodes */
    padding:0px 0px  0px 30px;
     border-bottom:1px GrayText dashed;

}

/*image icone*/
.creTreeView li a
{
    background-position:left;
    width: 16px;
    height: 9px;
    background: url('images/box.gif');
    background-repeat: no-repeat;

}

/*node text*/
.LastExpanded li
{
    background-position:right;
    background:url('images/sx_2.gif');
    background-repeat: no-repeat;

}

here the js code to control the tree events,expanded and collapsed.

Array.prototype.indexOf = IndexOf;

//Toggles between two classes for an element
function ToggleClass(element,zeroClass, firstClass, secondClass, event)
{
    event.cancelBubble = true;

    var classes = element.className.split(" ");
    var firstClassIndex = classes.indexOf(firstClass);
    var secondClassIndex = classes.indexOf(secondClass);
    var zeroCLASSiNDEX=classes.indexOf(zeroClass);

    if (firstClassIndex == -1 && secondClassIndex == -1)
    {
        classes[classes.length] = firstClass;
    }
    else if (firstClassIndex != -1)
    {
        classes[firstClassIndex] = secondClass;
    }
    else
    {
        classes[secondClassIndex] = firstClass;
    }

    element.className = classes.join(" ");

}

//Finds the index of an item in an array
function IndexOf(item)
{
    for (var i=0; i < this.length; i++)
    {
        if (this[i] == item)
        {
            return i;
        }
    }

    return -1;
}

//The toggle event handler for each expandable/collapsable node
//- Note that this also exists to prevent any IE memory leaks
//(due to circular references caused by this)
function ToggleNodeStateHandler(event)
{
    ToggleClass(this,"LastExpanded", "Collapsed", "Expanded", (event == null) ? window.event : event);
}

//Prevents the onclick event from bubbling up to parent elements
function PreventBubbleHandler(event)
{
    if (!event) event = window.event;
    event.cancelBubble = true;
}

//Adds the relevant onclick handlers for the nodes in the tree view
function SetupTreeView(elementId)
{
    var tree = document.getElementById(elementId);
    var treeElements = tree.getElementsByTagName("li");

    for (var i=0; i < treeElements.length; i++)
    {
        if (treeElements[i].getElementsByTagName("ul").length > 0)
        {
            treeElements[i].onclick = ToggleNodeStateHandler;
        }
        else
        {
            treeElements[i].onclick = PreventBubbleHandler;
        }
    }
}

//-----------------------------------------------------------------------------

var NodeIndex=0;
function AddNewParentNode()
{
   NodeIndex++;
   var name="结点"+NodeIndex;
   var sublist="<li class=Collapsed><a>&nbsp&nbsp&nbsp</a><span>"+name+"</span>"+
           "<ul>"+
            " <li>视频0</li>"+
            " <li>视频1</li>"+
             "<li>视频2</li>"+
             "<li>视频3</li>"+
           "</ul>"+
       "</li>";

  try
  {
       var htmlS=document.getElementById('TreeView').innerHTML+sublist;
        document.getElementById('TreeView').innerHTML=htmlS;
        SetupTreeView('TreeView');

  }

  catch(e)
  {
   alert(e);

  }
}
//-----------------------------------------------------------------------------------

here you go with html code

here you go with nice look result:

来源：https://www.cnblogs.com/ammar/archive/2009/09/14/1566259.html

标签

treeview

background