一个简单的JavaScript类--Tree

最新推荐文章于 2019-07-04 23:07:30 发布

zhangjp

最新推荐文章于 2019-07-04 23:07:30 发布

阅读量1k

点赞数

文章标签： javascript function image html border null

本文链接：https://blog.csdn.net/zhangjp/article/details/2737608

版权

    最近作一个项目，在项目中需要使用一个Tree控件，但是手头上没有这方面的Javascript脚本，于是从网上查询了一番，没有使用Javascript类的，于是自己写了一个简单的JavaScript类,完成现在的功能：
/************************************
      *    创建人：张静普                 *
      *    创建时间：2008-07-29 16:33     *
      *    功能描述：TreeView的基类       *
      *************************************/
      // Tree View Icon
      var Icon ={
            folderOpen: "Open.gif",
            folderClose: "Close.gif"；
            fileimage: "file.gif",

    plus: "Rplus.gif",
    minus: "Rminus.gif",
    blank: "blank.gif"
}

//set the directory of the pictures
setImagePath = function(sPath)
{
    for(o in Icon){
        tmp = sPath + Icon[o];
        Icon[o] = new Image();
        Icon[o].src = tmp;
    }
}

window.Tree = [];

// Constructor
function TreeView(Text,target,href)
{
    this.id = window.Tree.length;
    window.Tree[this.id] = this;
    this.target = target;
    this.nodes = {
        0:{
            id:0,
            superID: -1,
            Text: Text,
            childrenNodes: new Array(),
            href : href
        }
    };
}

// create a instence of the TreeView
var tr = TreeView.prototype;

// Function Add Node;
// key -- Current Node id
// superid -- Parent Node
// text -- Node Text
tr.add = function(key, superid, text, href)
{
    this.nodes[key] = {
        id: key,
        superID:superid,
        Text: text,
        childrenNodes: new Array(),
        href : href
    };
    var ch = this.getNode(superid).childrenNodes;
    ch[ch.length] = this.nodes[key];
}

// get a certain node by id
tr.getNode = function(key)
{
    if (typeof this.nodes[key] != "undefined")
    {
        return this.nodes[key];
    }
    return null;
}

//get a node's parent
tr.getParent = function(key)
{
    if(this.getNode(key) != null)
    {
        var skey = this.getNode(key).superID;
        if(typeof this.nodes[skey] != "undefined")
        {
            return this.getNode(skey);
        }
        else
        {
            return null;
        }
    }
    else
    {
        return null;
    }
}

//the status of the children
tr.hasChildren = function(key)
{
    return this.getNode(key).childrenNodes.length > 0;
}

//get root
tr.getRoot = function(key)
{
    if(key == 0)
    {
        return this.getNode(key);
    }
    var par = this.getParent(key);
    if (this.getNode(key).id == 0)
    {
        return this.getNode(key);
    }
    else
    {
        return this.getRoot(par.id);
    }
}

//draw a node
tr.drawNode = function(key)
{
    var html = "";
    var node = this.getNode(key);
    var rootID = this.getRoot(key);
    var hc = this.hasChildren(key);
    //html += '<div nowrap>' +this.drawIndent(key) + '<a id="node'+key+'" href = "javascript:void(0)" target = "' +this.target+ '" onclick = "window.Tree[' +this.id+ '].openFolder(' +key+ ')">';
    html += '<div nowrap>' +this.drawIndent(key);
    //if(this.getNode(key).nodeType==true)
    if(this.hasChildren(key)==true)
    {
        html += '<image id="image'+key+'" style="border:0px" height="16px" width="16px" id="expan' +key+ '" src='+Icon.folderClose.src+' align="absmiddle">';
    }
    else
    {
        html += '<image id="image'+key+'" style="border:0px" height="16px" width="16px" id="expan' +key+ '" src=' +Icon.fileimage.src+' align="absmiddle">';
    }
    //html += '<span id="span'+key+'">' +node.Text+ '</span></a></div>/n';
    html += '<span id="span'+key+'" οndblclick="javascript:void window.Tree['+this.id+'].openHandler('+key+');" οnclick="javascript:void window.Tree[0].NodeClick('+key+');">' +node.Text+ '</span></div>/n';
    if(hc)
    {
        var io = key == rootID.id;
        html += ('<div id="container'+key+'" style="display:'+(io ? '' : 'none')+'">/n');
        html += this.drawChild(key);
        html += '</div>/n';
    }
    return html;
}

//draw indent
tr.drawIndent = function(key)
{
    var s = ''
    var ir = this.getRoot(key).id == key;
    var node = this.getNode(key);
    var hc = this.hasChildren(key);
    if(this.getParent(key) != null)
    {
        s = hc ? '<a href="javascript:void window.Tree['+this.id+'].openHandler('+key+');" target="_self"><image id="handler'+key+'" style="border:0px" height="16px" width="16px" src ="' + Icon.plus.src+'" align="absmiddle"></a>' : '<image id="handler'+key+'" style="border:0px" height="16px" width="16px" src ="' + Icon.blank.src +'" align="absmiddle">';
    }
    var p = this.getParent(key);
    while(p != null)
    {
        if(this.getParent(p.id) == null)
        {
            break;
        }
        s = ('<image style="border:0px" height="16px" width="16px" src="'+ Icon.blank.src + '" align="absmiddle">')+s;
        p = this.getParent(p.id);
    }
    return s;
}

//draw a node's children nodes
tr.drawChild = function(key)
{
    var node = this.getNode(key);
    var html = "";
    for(var i = 0; i < node.childrenNodes.length; i++)
    {
        html += this.drawNode(node.childrenNodes[i].id);
    }
    return html;
}

// Handler the Event When Open Folder
tr.openHandler = function(key)
{
    if(this.hasChildren(key)==false)
    {
        return;
    }
    var handler = document.getElementById("handler"+key);
    var container = document.getElementById("container"+key);
    var fimage = document.getElementById("image"+key);
    if(container.style.display =='')
    {
        container.style.display = 'none';
        handler.src = Icon.plus.src;
        fimage.src = Icon.folderClose.src;
    }
    else
    {
        container.style.display = '';
        handler.src = Icon.minus.src;
        fimage.src = Icon.folderOpen.src;
    }
}