treeview.htc

浏览器端看到树型目录结构,用户可以完整地看到像windows资源管理器一样的效果

    var imageSrc;
    var junctionNode;
    var systemImagesPath = element.getAttribute("systemImagesPath");
    
    if (element.getAttribute("showLines") != false)
    {
        imageSrc = systemImagesPath;
        switch (cJunction)
        {
            case 'L':
                imageSrc += "L";
                break;
            case 'T':
                imageSrc += "T";
                break;
            case 'R':
                imageSrc += "R";
                break;
            case 'F':
                imageSrc += "F";
                break;
            default:
                return null;
                break;
        }
        if (nodeClass == "parent" && element.getAttribute("showPlus") != false )
        {
            if (el.getAttribute("expanded") == true)
                imageSrc += "minus.gif";
            else
                imageSrc +="plus.gif";
        }
        else
            imageSrc += ".gif";
    }
    else
    {
        if (nodeClass == "parent" && element.getAttribute("showPlus") != false)
        {
            if (el.getAttribute("expanded") == true)
                imageSrc = systemImagesPath + "minus.gif";
            else
                imageSrc = systemImagesPath + "plus.gif";
        }
        else
        {
            imageSrc = systemImagesPath + "white.gif";
        }
    }
    if (element.getAttribute("showLines") == false && element.getAttribute("showPlus") == false)
        junctionNode = element.document.createElement("<SPAN name='junction'>");
    else
    {
        junctionNode = element.document.createElement("<IMG align='absmiddle' border='0' class='icon' name='junction'>");
        junctionNode.src = imageSrc;
    }    
    return junctionNode;
}

//
// addLinesAndWhitespace()
//
function addLinesAndWhitespace(node, el, junctionNode)
{
    //
    // Walk up tree to draw lines/whitespace
    //
    var elWalk = el.parentElement;
    var elInsertBefore = junctionNode;
    var systemImagesPath = element.getAttribute("systemImagesPath");

    if (element.getAttribute("showLines") != false)
    {
        while (elWalk && elWalk.tagName.toLowerCase() == "treenode")
        {
            var nextSib = elWalk.nextSibling;
            while (nextSib != null && nextSib.nodeType == 3)
                nextSib = nextSib.nextSibling;
                
            var imageSrc;
            var image;
            
            if (nextSib != null && nextSib.tagName.toLowerCase() == "treenode")
                imageSrc = systemImagesPath + "I.gif";
            else
                imageSrc = systemImagesPath + "white.gif";
            image = el.document.createElement("<IMG align='absmiddle' border='0'>");
            image.src = imageSrc;
            elInsertBefore = node.insertBefore(image, elInsertBefore);
            elWalk = elWalk.parentElement;
        }
    }    
    else
    {
        var strIndex = getNodeIndex(el);
        if (strIndex.indexOf(".") != -1)
        {
            if (element.getAttribute("Indent") != null)
            {
                if (isRtl())
                    node.style.marginRight = element.getAttribute("Indent");
                else                           
                    node.style.marginLeft = element.getAttribute("Indent");
            }
        }
    }
}

//
// generateTextNode()
//
// el: treenode for which to generate text node
//
function generateTextNode(el)
{
    var textNode = el.document.createElement("<SPAN id=_tntext tabIndex=-1 style='display:inline; height=100%'>");
    
    if (el.getAttribute("Text") != null)
    {
        textNode.innerHTML = el.getAttribute("Text");
    }
    else
    {
        // Remove any TREENODEs from the inner content, keeping everything else.
        var iChild = 0;
        while (iChild < el.childNodes.length)
        {
            if (el.childNodes[iChild].nodeType == 3 || el.childNodes[iChild].tagName.toLowerCase() != "treenode")
            {
                // just copy the content
                var oClone = el.childNodes[iChild].cloneNode(true);
                textNode.appendChild(oClone);
            }
            iChild++;
        }
    }
    textNode.className = "defaultstyle";
    var defStyle = cascadeStyle(el, "defaultstyle");
    textNode.style.cssText = defStyle;

    return textNode;
}

//
// updateTree(el)
//
// Show or hide the children of element el based on el's Expanded
// attribute.
//  
function updateTree(el)
{
    if (el.getAttribute("expanded") == true)
    {
        // If we previously expanded this
        // node, just show its children without rebuilding them.
        var i = 0;
        var coll = el.children.tags("treenode");
        var bRebuild = true;
        if (el.getAttribute("_buildChildren") != true && (coll.length > 0 && coll(0).getAttribute("subtree") != null))
        {   
            bRebuild = false; 
            for (var i = 0; i < coll.length; i++)
            {
                if (coll(i).subtree == null)
                {
                    // a node has been added since we last expanded.  Rebuild everything.
                    bRebuild = true;
                    break;
                }
                coll(i).subtree.style.display = "block";
            }
        }
        if (bRebuild)
        {
            // build and show children
            el.removeAttribute("_buildChildren");
            buildTree(el, getNodeLevel(el));
            reselectNode(el);
            if (HoverNodeIndex == getNodeIndex(el))
                HoverNode(el);
        }
    }
    
    else
    {
        // hide children
        var collChildren = el.children.tags("treenode");
        for (var i = 0; i < collChildren.length; i++)
        {
            collChildren(i).subtree.style.display = "none";
        }
               
        // If the selected or hovered node was one of the collapsed node's descendants,
        // the collapsed node must become selected/hovered instead
        var index = getNodeIndex(el);
        if (selectedNodeIndex.length > index.length && selectedNodeIndex.substr(0,index.length) == index)
        {
            selectNode(el);
        }
        else if (selectedNodeIndex == index)
            changeIcon(el, "SelectedImageUrl");
            
        if (HoverNodeIndex.length >= index.length && HoverNodeIndex.substr(0, index.length) == index)
        {
            if (selectedNodeIndex != index)
            {
                if (HoverNodeIndex != index)
                {
                    UnhoverNode(getNodeFromIndex(HoverNodeIndex));
                    HoverNode(el);
                }
            }
            else
                UnhoverNode(getNodeFromIndex(HoverNodeIndex));
        }
    }
    setHiddenHelperValue();
}        
    
//
// cascadeStyle(el, att)
//
// Cascade style from built-in to the tree to the type to the node.
//
function cascadeStyle(el, att)
{
    // built-in
    var str = g_styles[att];

    // tree
    var strStyle = element.getAttribute(att);
    if (strStyle != null)
        str = str + ";" + strStyle;
    
    // type
    strStyle = getNodeTypeAttribute(el, att);
    if (strStyle != null)
        str = str + ";" + strStyle;
    
    // node
    strStyle = el.getAttribute(att);
    if (strStyle != null)
        str = str + ";" + strStyle;
    
    return str;
}

//
// getNodeTypeAttribute    
//
// Returns the given attribute from the given element's node type.
//
function getNodeTypeAttribute(el, att)
{
    var _nodetype = getNodeTypeObject(el);
    if (_nodetype != null)
        return _nodetype.getAttribute(att);
    return null;
}

//
// getNodeAttribute
//
// Returns the given attribute from the node, the node's type, or the treeview
//
function getNodeAttribute(el, att)
{
    var strReturn;
    
    // try the node
    strReturn = el.getAttribute(att);
    if (strReturn != null)
        return strReturn;
        
    // try the node's type
    strReturn = getNodeTypeAttribute(el, att);
    if (strReturn != null)
        return strReturn;
        
    // try the tree
    return element.getAttribute(att);
}

//
// navigateNode()
//
// If the given node has a NavigateUrl, navigate to it.  Return TRUE if we're navigating our own page; FALSE otherwise.
//
function navigateNode(el)
{
    var url = getNodeAttribute(el, "NavigateUrl");
    if (url != null && url != "")
    {
        var target = getNodeAttribute(el, "Target");
        if (target == null || target == "_self")
        {
            window.open(url, "_self");
            return true;
        }
        else
            window.open(url, target);
    }
    return false;
}

//
// checkboxClick()
//
// event handler for mouse click on an item's checkbox
//
function checkboxClick()
{
    if (g_bInteractive == false)
        return;

    var el = this.parentElement.parentElement.treenode;
    event.cancelBubble = true;
    
    doCheckboxClick(el);
    fireQueuedEvents();
}

//
// doCheckboxClick()
//
function doCheckboxClick(el)
{
    el.checked = !el.checked;
    var evt = createEventObject();
    evt.treeNodeIndex = getNodeIndex(el);
    g_nodeClicked = el;
    _tvevtCheck.fire(evt);
}
            
//
// nodeClick()
//
// event handler for mouse click on an item in the tree
//
function nodeClick()
{
    if (g_bInteractive == false)
        return;

    var el = this.parentElement.treenode;
    if (doNodeClick(el) == true)
    {
        if (element.getAttribute("selectExpands") == true)
            doNodePlusMinusClick(el);
        fireQueuedEvents();
    }
}

//
// contextmenu()
//
// event handler for right-clicking a tree node
//
function contextmenu()
{
    event.cancelBubble = true;
    e = element.document.createEventObject(event);
    e.treeNodeIndex = getNodeIndex(this.parentElement.treenode);
    event.returnValue = element.fireEvent("oncontextmenu", e);
}

//
// mousedown()
//
function mousedown()
{
    if (event.button & 1)
    {
        g_bMouseDown = true;
    }
}

//
// mouseup()
//
function mouseup()
{
    g_bMouseDown = false;
}

//
// nodePlusMinusClick()
//
// event handler for mouse click on the plus/minus icon of a treenode
//
function nodePlusMinusClick()
{
    if (g_bInteractive == false)
        return;

    var el = this.parentElement.treenode;
    if (doNodePlusMinusClick(el) == true)
        fireQueuedEvents();
}

//
// doNodeClick()
//
// Does the work associated with a node click.  Separated out from nodeClick() so that
// we can call it directly without having to identify the anchor element of a node.
//
// returns: true to continue processing
//          false to stop (because we're navigating our own page)
//
function doNodeClick(el)
{
    if (g_bInteractive == false)
        return;
        
    g_nodeClicked = el;

    // The element, which is in a content node outside of the document, is outside the event hierarchy.
    // Fire the event ourselves, rather than relying on bubbling.
    event.cancelBubble = true;
    el.fireEvent("onclick");        // Execute our onclick handler
    element.fireEvent("onclick", event);  // Execute the tree's onclick handler

    if (getNodeAttribute(el, "NavigateUrl") != null)
    {
        var target = getNodeAttribute(el, "Target");
        if (target == null || target.toLowerCase() == "_self")
            return false;
    }

    selectNode(el);
    return true;
}

//
// doNodePlusMinusClick()
//
// Does the work associated with a node click.  Separated out from nodePlusMinusClick() so that
// we can call it directly without having to identify the anchor element of a node.