treeview.htc

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

    {
        if (selectedNodeIndex != "" && selectedNodeIndex != null)
        {
            // unselect previous item
            selectedNode = getNodeFromIndex(selectedNodeIndex);
            if (selectedNode != null && selectedNode.subtree != null)
            {
                oOldItem = selectedNode.subtree.all.item("_tntext", 0);
                SetAnchorClass(oOldItem, "defaultstyle");
                oOldItem.parentElement.tabIndex = -1;
                // restore old icon
                if (selectedNode.getAttribute("expanded") == true)
                    strImage = "ExpandedImageUrl";
                else
                    strImage = "ImageUrl";
                changeIcon(selectedNode, strImage);
            }
        }

        if (node)
        {
            oItem = node.subtree.all.item("_tntext", 0);
            applySelection(node, oItem);
        }
                
        if (selectedNodeIndex.length > 0)
        {
            // Fire event
            g_event = createEventObject();
            g_event.newTreeNodeIndex = nodeIndex;
            g_event.oldTreeNodeIndex = selectedNodeIndex;
            prop_selectedNodeIndex = nodeIndex;
            if (delay != true)
                _tvevtSelect.fire(g_event);
            else
            {
                if (g_timer != -1)
                    window.clearTimeout(g_timer);
                g_timer = window.setTimeout(autoSelect, 500, "JScript");
                if (g_selectedNodeBeforeDelay == "")
                    g_selectedNodeBeforeDelay = g_event.oldTreeNodeIndex;
            }
        }
        else
            prop_selectedNodeIndex = nodeIndex;

        // Because we use a timeout to set focus, between a nodeclick and changing the selected node
        // a user's event, which could have an alert, can occur.  An alert blurs the tree, which
        // leaves the old selected node with a 50% filter.  So if we're blurred when we unselect the
        // old node, call focusFilter to it to correct the problem.  
        if (!g_bFocus && g_bInteractive)
        {
            if (oOldItem != null)
                focusFilter(oOldItem);
        }     
    }
    setHiddenHelperValue();  // here instead of inside the main IF to preserve focus change
}

function autoSelect()
{
    g_timer = -1;
    if (selectedNodeIndex != g_selectedNodeBeforeDelay)
    {
        navigateNode(getNodeFromIndex(g_event.newTreeNodeIndex));
        _tvevtSelect.fire(g_event);
        fireQueuedEvents();
    }
    g_selectedNodeBeforeDelay = "";
}

//
// applySelection()
//
function applySelection(node, oItem)
{
    SetAnchorClass(oItem, "SelectedStyle");
    
    // set new icon
    changeIcon(node, "SelectedImageUrl");

    scrollTree(node);
    
    if (selectedNodeIndex.length > 0)
    {
        if (g_bFocus)
            changeFocus(node, getNodeFromIndex(selectedNodeIndex));
    }
    
    //  We need to blur node if we re-selected it while blurred (which can happen when using client OM)
    if (!g_bFocus && g_bInteractive)
    {
        blurFilter(oItem);
    }
}

//
// reselectNode()
//
function reselectNode(el)
{
    if (selectedNodeIndex == getNodeIndex(el))
        applySelection(el, el.subtree.all.item("_tntext", 0));
}

//
// tryToBuildTreeFromRoot()
//
function tryToBuildTreeFromRoot()
{
    if (g_bNodesReady == true && g_bTypesReady == true)
    {
        var bRebuilding = g_bCreated;
        
        buildTreeFromRoot();

        if (selectedNodeIndex.length == 0)
        {
            prop_selectedNodeIndex = "0";
        }
        var node = getNodeFromIndex(selectedNodeIndex);
        prop_selectedNodeIndex = "";
        selectNode(node);
    }
}

//
// buildTreeFromRoot()
//
function buildTreeFromRoot()
{
    // Create TREEVIEW surrogate div, to encapsulate all other DIVs.
    treeviewNode = element.document.createElement("HTML");
    var bodyNode = element.document.createElement("BODY");
    bodyNode.dir = element.getAttribute("dir");
    bodyNode.style.direction = element.currentStyle.direction;        
    
    var head = element.document.createElement("HEAD");
    var base = element.document.createElement("BASE");
    var path = null;
    if (window.location.pathname != null)
    {
        var lastslash = window.location.pathname.lastIndexOf("/");
        if (lastslash != -1)
            path = window.location.pathname.substr(0, lastslash + 1);
        else
            path = window.location.pathname;
    }
    var protocol = window.location.protocol.toLowerCase();
    base.href = window.location.protocol + (protocol != "mailto:" && protocol != "news:" ? "//" : "") + window.location.host + path;
    head.appendChild(base);
    treeviewNode.appendChild(head);
    
    var kids = contentNode.children.tags("treenode");
    if (kids[0] != undefined)
    {
        for (var i = 0; i < kids.length; i++)
        {
            kids[i].sibIndex = i;
            var subtree = buildTree(kids[i], 0);
            bodyNode.appendChild(subtree);
        }
    }
    treeviewNode.appendChild(bodyNode);
    
    // Create viewlink.
    treeviewNode.style.display = "block";
    treeviewNode.subtree = bodyNode;
    defaults.viewLink = treeviewNode.document;
    setHiddenHelperValue();

    g_bCreated = true;
}       

//
// buildTree()
//
// Recursively traverses the
// parsed TREEVIEW tree and creates the document tree of nested
// DIVs for the viewlink.
//
// root: Root node of the subtree to build
// level: level of the tree
//
// returns: created subtree
//
function buildTree(root, level)
{  
    var display = true;
    if (root.subtree != null && root.subtree.style.display == "none")
        display = false;
        
    root.detachEvent("onclick", DefaultNodeOnClick);
    root.attachEvent("onclick", DefaultNodeOnClick);
    
    // clear all cached values for this node
    root.inheritedType = undefined;
    root.nodetypeIndex = undefined;

    // process expandLevel
    var exp = makeBoolean(root.getAttribute("expanded"));
    if (exp == null)
    {
        if (level < element.getAttribute("ExpandLevel"))
        {
            root.setAttribute("expanded", true, 0);
            exp = true;
        }
        else
            exp = false;
    }
    
    //
    // convert string values to boolean
    //
    if (!verifyBooleanAttribute(root, "expanded"))
        root.setAttribute("expanded", false, 0);
    if (!verifyBooleanAttribute(root, "checked"))
        root.setAttribute("checked", false);
    verifyBooleanAttribute(root, "checkBox");
    verifyBooleanAttribute(root, "checkedExpandable");
             
    if (root.getAttribute("type") != null)
        root.setAttribute("type", root.getAttribute("type").toLowerCase(), 0);
    if (root.getAttribute("childType") != null)
        root.setAttribute("childType", root.getAttribute("childType").toLowerCase(), 0);
        
    // Create this node first
    var collChildren = root.children.tags("treenode");
    var iChildren = collChildren.length;
    var expandable = getNodeAttribute(root, "expandable");
    if (expandable == null && root.getAttribute("TreeNodeSrc") != null)
        expandable = "checkOnce";
    if (root.getAttribute("_bound") != "binding")
    {
        var subtree = generateItem(root, iChildren > 0 || (expandable == "always" || (expandable == "checkOnce" && root.getAttribute("checkedExpandable") != true)) ? "parent" : "child");
        if (display == false)
            subtree.style.display = "none";
            
        if (exp == true && root.getAttribute("TreeNodeSrc") != null && root.getAttribute("_bound") != "complete")
        {
            // Databind.  When databinding is finished, this subtree will be built automatically
            root.setAttribute("expanded", true, 0);
            saveSubtree(root, subtree);
            databindNode(root);
        }
        else
        {
            // Create children
            if (root.getAttribute("expanded") == true)
            {
                for (var i = 0; i < iChildren; i++)
                {
                    collChildren[i].sibIndex = i;
                    var sub2 = buildTree(collChildren[i], level + 1);
                    if (sub2 != undefined)
                        subtree.appendChild(sub2);
                }
            }
            else
            {
                for (var i = 0; i < iChildren; i++)
                {
                    if (collChildren[i].getAttribute("subtree") != null)
                        collChildren[i].subtree = null;
                }
            }
            saveSubtree(root, subtree);
        }
    }
    
    return root.subtree;
}

//
// saveSubtree(el, subtree)
//
function saveSubtree(el, subtree)
{
    if (el.getAttribute("subtree") == null)
        el.subtree = subtree;
    else {
        el.subtree.replaceNode(subtree);
        el.subtree = subtree;
    }
}
     
//
// calcJunction(el)
//
// Determine if this node is at an L, T, or top root (R) junction.
//
function calcJunction(el)
{
    var elParent = el.parentElement;
    var collChildren = elParent.children.tags("treenode");
    
    if (elParent.tagName == "treeview"  && collChildren[0] == el)
    {
        if (collChildren.length > 1)
            return ('F');
        else
            return ('R');
    }
    else
    {
        if (collChildren[collChildren.length - 1] == el)
        {
            return ('L');
        }
        else
        {
            return ('T');
        }
    }
}

//
// generateItem(el, nodeclass)
//
// Creates the DOM object tree for a TREEVIEW item.
//
// el: TREENODE element for which the tree is generated
// nodeclass: "parent" or "child" (leaf)
//
function generateItem(el, nodeClass)
{
    var image;
    var plusminusNode;
    var elAnchor;
    
    var expImgUrl = getNodeAttribute(el, "ExpandedImageUrl");
    var imgUrl = getNodeAttribute(el, "ImageUrl");
    var node = el.document.createElement("DIV");
    var cJunction;
    var junctionNode;
    var str;
    
    node.className = nodeClass;
    node.treenode = el;
    node.noWrap = true; 
    node.style.display = "block";
    
    if (nodeClass == "child" && el.getAttribute("expanded") == true)
        el.setAttribute("expanded", false, 0);
        
    // Determine L, T, or root junction
    cJunction = calcJunction(el);
    junctionNode = generateJunctionNode(el, cJunction, nodeClass);          
    node.appendChild(junctionNode);
    
    addLinesAndWhitespace(node, el, junctionNode);  
    
    // Add checkbox
    if (getNodeAttribute(el, "checkBox") == true)
    {
        var cb = createCheckBox(el);
        node.appendChild(cb);
    }
             
    // Add anchor tag
    elAnchor = el.document.createElement("<A>");
    elAnchor.onclick = nodePlusMinusClick;
    junctionNode.applyElement(elAnchor, "outside");
        
    // Add second anchor for image/text
    elAnchor = el.document.createElement("<A tabindex=-1>");
    str = getNodeAttribute(el, "NavigateUrl");
    if (str != null && str != "")
    {
        elAnchor.href = str;
    }
    str = getNodeAttribute(el, "Target");
    if (str != null)
        elAnchor.target = str;
        
    // For accessibility, generate another anchor to enclose the text node
    var accessAnchor = elAnchor.cloneNode();
    accessAnchor.id = "_tnaccess";
    
    elAnchor.onclick = nodeClick;
    elAnchor.oncontextmenu = contextmenu;
    elAnchor.onmousedown = mousedown;
    elAnchor.onmouseup = mouseup;
    node.insertBefore(elAnchor);
        
    imageSrc = (nodeClass == "parent" && el.getAttribute("expanded") == true && expImgUrl != null ? expImgUrl : imgUrl);

    var spacer = null;
    if (imageSrc != null && imageSrc != undefined)
    {
        image = el.document.createElement("<IMG align='absmiddle' border='0' class='icon' id='_nodeicon'>");
        image.src = imageSrc;
        image.style.cssText = g_styles["icon"];
        elAnchor.appendChild(image);
        spacer = el.document.createElement("<SPAN>");
        spacer.style.width = 5;
        elAnchor.appendChild(spacer);
    }
    
    var textNode = generateTextNode(el);
    if (spacer != null)
    {
        spacer.style.cursor = textNode.style.cursor;
        image.style.cursor = textNode.style.cursor;
    }
    
    if (nodeClass == "parent" && element.getAttribute("showToolTip") != false)
        accessAnchor.title = textNode.innerText + " : " + L_strToolTip_Text;
    
    accessAnchor.appendChild(textNode);
    elAnchor.appendChild(accessAnchor);
    
    elAnchor.onmouseenter = mOver;
    elAnchor.onmouseleave = mOut;
        
    return node;
}

//
// createCheckBox
//
function createCheckBox(el)
{
    var form = el.document.createElement("<FORM style='display:inline' name='_fcb'>");
    var bChecked = el.getAttribute("checked");
    var cb = el.document.createElement("<INPUT style='display:inline' tabindex=-1 type=checkbox name='_cb'" + (bChecked ? " checked " : " ") + "/>");
    cb.onclick = checkboxClick;
    form.appendChild(cb);
    
    return form;
}

//
// generateJunctionNode()
//
function generateJunctionNode(el, cJunction, nodeClass)
{