treeview.htc

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

<!----------------------------------------------------------------------
//  Copyright (c) 2000-2003 Microsoft Corporation.  All Rights Reserved.
//---------------------------------------------------------------------->

<public:component tagname=treeview literalcontent=true>
    <public:attach event=oncontentready onevent="oncontentready()" />
    <public:attach event=ondocumentready onevent="ondocumentready()" />
    <public:attach event="onscroll" onevent="onScroll()" />
    <public:event name="onexpand" id="_tvevtExpand" />
    <public:event name="oncollapse" id="_tvevtCollapse" />
    <public:event name="onselectedindexchange" id="_tvevtSelect" />
    <public:event name="oncheck" id="_tvevtCheck" />
    <public:event name="onfirequeuedevents" id="_tvevtFireQueuedEvents" />
    <public:event name="onnodebound" id="_tvevtNodeBound" />
    <public:event name="onnodetypesbound" id="_tvevtNodeTypesBound" />
    <public:event name="onhover" id="_tvevtHover" />
    <public:event name="onunhover" id="_tvevtUnhover" />
    <public:property name="clickedNodeIndex" GET="getClickedNodeIndex" />
    <public:property name="defaultStyle" id="_tvpropDefaultStyle" GET="getDefaultStyle" PUT="setDefaultStyle" />
    <public:property name="hoverStyle" id="_tvpropHoverStyle" GET="getHoverStyle" PUT="setHoverStyle" />
    <public:property name="selectedStyle" id="_tvpropSelectedStyle" GET="getSelectedStyle" PUT="setSelectedStyle" />
    <public:property name="childType" id="_tvpropChildType" GET="getChildType" PUT="setChildType" />
    <public:property name="imageUrl" id="_tvpropImageUrl" GET="getImageUrl" PUT="setImageUrl" />
    <public:property name="expandedImageUrl" id="_tvpropExpandedImageUrl" GET="getExpandedImageUrl" PUT="setExpandedImageUrl" />
    <public:property name="selectedImageUrl" id="_tvpropSelectedImageUrl" GET="getSelectedImageUrl" PUT="setSelectedImageUrl" />
    <public:property name="target" id="_tvpropTarget" GET="getTarget" PUT="setTarget" />
    <public:property name="treeNodeSrc" id="_tvpropTreeNodeSrc" GET="getTreeNodeSrc" PUT="setTreeNodeSrc" />
    <public:property name="treeNodeXsltSrc" id="_tvpropTreeNodeXsltSrc" GET="getTreeNodeXsltSrc" PUT="setTreeNodeXsltSrc" />
    <public:property name="selectExpands" id="_tvpropSelectExpands" GET="getSelectExpands" PUT="setSelectExpands" />
    <public:property name="expandLevel" id="_tvpropExpandLevel" GET="getExpandLevel" PUT="setExpandLevel" />
    <public:property name="autoSelect" id="_tvpropAutoSelect" GET="getAutoSelect" PUT="setAutoSelect" />
    <public:property name="treeNodeTypeSrc" id="_tvpropTreeNodeTypeSrc" GET="getTreeNodeTypeSrc" PUT="setTreeNodeTypeSrc" />
    <public:property name="showLines" id="_tvpropShowLines" GET="getShowLines" PUT="setShowLines" />
    <public:property name="showPlus" id="_tvpropShowPlus" GET="getShowPlus" PUT="setShowPlus" />
    <public:property name="showToolTip" id="_tvpropShowToolTip" GET="getShowToolTip" PUT="setShowToolTip" />
    <public:property name="indent" id="_tvpropIndent" GET="getIndent" PUT="setIndent" />
    <public:property name="selectedNodeIndex" id="_tvpropSelectedNodeIndex" GET="getSelectedNodeIndex" PUT="setSelectedNodeIndex" />
    <public:property name="systemImagesPath" id="_tvpropSystemImagesPath" GET="getSystemImagesPath" PUT="setSystemImagesPath" />
    <public:method name="queueEvent" />
    <public:method name="getTreeNode" />
    <public:method name="addAt" />
    <public:method name="createTreeNode" />
    <public:method name="getTreeNodeType" />
    <public:method name="createTreeNodeType" />
    <public:method name="addTreeNodeType" />
    <public:method name="add" />
    <public:method name="databind" />
    <public:method name="databindTypes" />
    <public:method name="getChildren" />
    
</public:component>

<script language=javascript>

var contentNode;
var treeviewNode;
var g_typesNode;
var g_styles;
var g_event;
var g_timer = -1;
var g_nodeClicked = null;
var g_strQueuedEvents = "";
var g_bInteractive = false;
var g_numStop = 0;
var g_selectedNodeBeforeDelay = "";
var g_bFocus = false;
var g_bCreated = false;
var g_typeIsland = null;
var g_bNodesReady = false;
var g_bTypesReady = false;
var g_bMouseDown = false;
var g_pendingBinds = new Array(0);
var g_pendingSyncBinds = new Array(0);
var g_bindTimer = -1;
var g_bLock = false;
var g_bInTypesBoundEvent = false;
var L_strMSXMLError_Text = "Error creating MSXML object.  Please make sure the MSXML library is installed on your computer.";
var L_strRetrievingNodes_Text = "Retrieving nodes...";
var L_strXMLError_Text = "Error loading XML file %s";
var L_strInvalidXML_Text = "Invalid XML in %s";
var L_strXSLTError_Text = " or unsupported XSLT in %s";
var L_fontSize_Text = "10pt";
var L_fontName_Text = "Times";
var L_strToolTip_Text = "Use +/- to expand/collapse";

// properties
var prop_defaultStyle = null;
var prop_hoverStyle = null;
var prop_selectedStyle = null;
var prop_childType = null;
var prop_imageUrl = null;
var prop_expandedImageUrl = null;
var prop_selectedImageUrl = null;
var prop_target = null;
var prop_treeNodeSrc = null;
var prop_treeNodeXsltSrc = null;
var prop_selectExpands = null;
var prop_expandLevel = -1;
var prop_autoSelect = false;
var prop_treeNodeTypeSrc = null;
var prop_showLines = true;
var prop_showPlus = true;
var prop_showToolTip = true;
var prop_indent = 19;
var prop_selectedNodeIndex = null;
var prop_systemImagesPath = null;

//
// QueueEvent()
//
// Queue an event for later posting to the server, when the
// _tvevtFireQueuedEvents event fires.
//
function queueEvent(strEvent, strParams)
{
    if (g_strQueuedEvents.length > 0)
        g_strQueuedEvents += ";";
    g_strQueuedEvents += (strEvent + "," + strParams);
    setHiddenHelperValue();
}

function getQueuedEvents()
{
    return g_strQueuedEvents;
}

function fireQueuedEvents()
{
    if (g_strQueuedEvents != "")
    {
        if (getAttribute("onfirequeuedevents") != null)
        {
            if (g_timer != -1)
            {
                // force pending autoSelect to trigger
                window.clearTimeout(g_timer);
                autoSelect();
            }
            else
            {
                g_bInteractive = false;
                g_numStop = 0;
                _tvevtFireQueuedEvents.fire();
            }
        }
    }
}

//
// SetAnchorClass()
//
// Set the cssText property in addition to the className, since just setting className
// doesn't do the trick.  
//
// node: Anchor to which we're applying a new class
// name: the class to apply
//       DefaultStyle: Apply DefaultStyle
//       HoverStyle: Apply DefaultStyle, then HoverStyle
//       SelectedStyle: Apply DefaultStyle, then SelectedStyle
//

function SetAnchorClass(node, name)
{
    var strStyle = "";
    var lname = name.toLowerCase();
    
    // Everything is based on DefaultStyle
    strStyle += cascadeStyle(getParentTreeNode(node), "defaultstyle");

    if (lname != "defaultstyle")
    {
        var str = cascadeStyle(getParentTreeNode(node), lname);
        if (str != null)
        {
            strStyle += ";" + str;
        }        
    }
    node.style.cssText = strStyle;
    if (lname == "hoverstyle" && g_bFocus == false)
        blurFilter(node);
                
    node.className = lname;
}

//
// getParentTreeNode()
//
// Walk up the display tree (NOT the TREENODE tree) until we find an element with
// a treenode expando.
//
function getParentTreeNode(node)
{
    var el = node;
    while (el != null && el.getAttribute("treenode") == null)
        el = el.parentElement;
    return el.getAttribute("treenode");
}

//
// HoverNode()
//
// Apply hover effect to given text node
//
// textnode: textnode (id: _tntext) to apply hover to, or treenode
//
function HoverNode(textnode)
{
    var node;
    
    if (textnode.tagName.toLowerCase() == "treenode")
        node = textnode.subtree.all.item("_tntext", 0);
    else
        node = textnode;

    var nodeIndex = getNodeIndex(getParentTreeNode(node));

    if (node.className == "defaultstyle")
    {
        SetAnchorClass(node, "hoverstyle");
        HoverNodeIndex = nodeIndex;
    }
    else if (node.className != "hoverstyle")
        HoverNodeIndex = "";
    e = element.document.createEventObject();
    e.treeNodeIndex = nodeIndex;
    _tvevtHover.fire(e);
    setHiddenHelperValue();
}

//
// UnhoverNode()
//
// Remove hover effect from given text node
//
// textnode: textnode (id: _tntext) to remove hover from, or treenode
//
function UnhoverNode(textnode)
{
    if (textnode != null)
    {
        var node;
        if (textnode.tagName.toLowerCase() == "treenode")
            node = textnode.subtree.all.item("_tntext", 0);
        else
            node = textnode;
            
        if (node.className == "hoverstyle")
        {
            SetAnchorClass(node, "defaultstyle");
        }
        e = element.document.createEventObject(event);
        if (HoverNodeIndex == "")
            e.treeNodeIndex = getNodeIndex(getParentTreeNode(node))
        else
            e.treeNodeIndex = HoverNodeIndex;
        _tvevtUnhover.fire(e);
        HoverNodeIndex = "";
        setHiddenHelperValue();
    }
}
    
// mOver()
//
// onmouseover handler for the anchor of a treenode
//
function mOver()
{
    if (g_bInteractive == true)
    {
        var oItem = this.all.item("_tntext", 0);
        if (HoverNodeIndex.length > 0)
            UnhoverNode(getNodeFromIndex(HoverNodeIndex));
        HoverNode(oItem);
    }
}

//
// mOut()
//
// onmouseout handler for the anchor of a treenode
//
function mOut()
{
    if (g_bInteractive == true)
    {
        var node = this.parentElement.treenode;
        var nodeIndex = getNodeIndex(node)
        if (nodeIndex == HoverNodeIndex)
        {
            UnhoverNode(node);
            window.status = window.defaultStatus;
        }
        else if (nodeIndex == selectedNodeIndex)
        {
            e = element.document.createEventObject(event);
            e.treeNodeIndex = nodeIndex;
            _tvevtUnhover.fire(e);
        }        
    }
}

//
// onkeydown
//
function onkeydown()
{
    if (!g_bInteractive)
        return;
    
    if (event.altKey == true)
        return;
            
    var oldNode;
    var hoverNode = null;
    if (HoverNodeIndex.length > 0)
    {
        oldNode = getNodeFromIndex(HoverNodeIndex);
        hoverNode = oldNode;
    }
    else
        oldNode = getNodeFromIndex(selectedNodeIndex);
    switch (event.keyCode)
    {
        case 187:   // keyboard +/=
            if (event.shiftKey != true)
                break;
            // else fall through
        case 107:   // keypad +
            if (oldNode.getAttribute("expanded") != true)
            {
                doNodePlusMinusClick(oldNode);
                fireQueuedEvents();
            }
            event.returnValue = false;    
            break;
        case 189:   // keyboard -/_
            if (event.shiftKey == true)
                break;
            // else fall through
        case 109:   // keypad -
            if (oldNode.getAttribute("expanded") == true)
            {
                doNodePlusMinusClick(oldNode);
                fireQueuedEvents();
            }
            event.returnValue = false;
            break;   
        case 39:    // right arrow
            event.returnValue = false;
            if (oldNode.children.tags("treenode").length == 0)
            {
                var exp = getNodeAttribute(oldNode, "expandable");
                if (exp == null && oldNode.getAttribute("TreeNodeSrc") != null)
                    exp = "checkOnce";
                if (oldNode.getAttribute("expanded") == true || !(exp == "always" || (exp == "checkOnce" && oldNode.getAttribute("checkedExpandable") != true)))
                    break;
            }
            if (oldNode.getAttribute("expanded") != true)
            {
                doNodePlusMinusClick(oldNode);
                updateStatus(oldNode);
                fireQueuedEvents();
                break;
            }
            // fall through
        case 40:    // down arrow
            var node = getNextVisibleNode(oldNode);
            if (node != null)
            {
                if (element.getAttribute("autoselect") == true)
                {
                    selectNode(node, true);
                    updateStatus(node);
                    UnhoverNode(hoverNode);
                }
                else
                {                    
                    UnhoverNode(oldNode);
                    HoverNode(node);
                    changeFocus(node, oldNode);                    
                    updateStatus(node);
                }
                scrollTree(node);
            }
            event.returnValue = false;
            break;
        case 37:    // left arrow
            if (oldNode.getAttribute("expanded") == true)
            {
                doNodePlusMinusClick(oldNode);
                fireQueuedEvents();
            }
            else
            {
                // jump the hover up to the parent node
                var node = oldNode.parentElement;
                while (node.tagName.substr(0,4).toLowerCase() != "tree")
                    node = node.parentElement;
                if (node.tagName.toLowerCase() == "treenode")
                {
                    if (element.getAttribute("autoselect") == true)
                    {
                        selectNode(node, true);
                        updateStatus(node);
                        UnhoverNode(hoverNode);
                    }
                    else
                    {
                        UnhoverNode(oldNode);
                        HoverNode(node);
                        changeFocus(node, oldNode);
                        updateStatus(node);
                    }
                    scrollTree(node);
                }
            }
            event.returnValue = false;
            break;
        case 38:    // up arrow
            var node = getPreviousVisibleNode(oldNode);
            if (node != null)
            {
                if (element.getAttribute("autoselect") == true)
                {
                    selectNode(node, true);
                    updateStatus(node);
                    UnhoverNode(hoverNode);
                }
                else
                {
                    UnhoverNode(oldNode);
                    HoverNode(node);
                    changeFocus(node, oldNode);
                    updateStatus(node);
                }
                scrollTree(node);
            }
            event.returnValue = false;