今天下午刚写的树形控件

var HK_TreeNode = function(pNode){
    var me = this;
    var nodeValue = "";
    var nodeImage = document.createElement("img");
    var nodeElement = document.createElement("div");
    var nodeText = document.createElement("div");
    var childLayout = document.createElement("div");    
    nodeElement.appendChild(nodeImage);
    nodeElement.appendChild(nodeText);
    nodeElement.appendChild(childLayout);
    nodeImage.src="images/plus.png";
    nodeImage.className = "tree_nodeimage";
    nodeText.className = "tree_nodetext";
    childLayout.className = "tree_nodelayout";
    childLayout.style.display = "none";
    var nodeIndex = -1;
    var parentNode = null; 
    var level = 0;
    var items = new Array();
    if(parentNode!=null){
        level = pNode.level + 1;
        parentNode = pNode; 
    }
    this.tree = null;
    this.data = null;
    this.setActive = function(){
        var activeNode = this.tree.activeNode;
        if(activeNode!=null){
            activeNode.deActive();        
        }
        nodeText.className = "tree_nodetextActive";
        this.tree.activeNode = this;
    }
    this.deActive = function(){
        this.tree.activeNode = null;    
        nodeText.className = "tree_nodetext";
    }
    this.appendChild = function(node){
        nodeIndex = items.push(node);
        childLayout.appendChild(node.getElement()); 
        nodeImage.src="images/plus.gif";
    }
    this.expand = function(){
        if(childLayout.style.display != "none"){
                nodeImage.src="images/plus.gif";
                childLayout.style.display = "none";
        }else{
            if(items.length>0){
                nodeImage.src="images/plusExpand.gif";
                childLayout.style.display = "";
            }
        }
    }
    this.getCount = function(){
        return items.length;
    }    
    this.getLevel = function(){
        return level;
    }
    this.setParentNode = function(node){
        parentNode = node;
        node.appendChild(nodeElement);
    }
    this.getParentNode = function(){
        return node;
    }
    this.getElement = function(){
        return nodeElement;
    }
    this.getImageElement = function(){
        return nodeImage;
    }
    this.getTextElement = function(){
        return nodeText;
    }
    this.setText = function(value){
        nodeText.innerText = value;
    }
    this.getText = function(){
        return nodeText.innerText;
    }
    this.setValue = function(value){
        nodeValue = value;
        this.setText(value);
    }
    this.getValue = function(){
        return value;
    }    
    function onnodeclick(){
        me.expand();
    }
    function onnodetextclick(){
        me.setActive();
    }
    function ontextdblclick(){
        me.expand();
    }
    function onselect(){
        return false;
    }
    nodeElement.attachEvent("onselectstart",onselect);
    nodeText.attachEvent("onclick",onnodetextclick);
    nodeText.attachEvent("ondblclick",ontextdblclick);
    nodeImage.attachEvent("onclick",onnodeclick);
}

var HK_Tree = function(){
    var me = this;
    var layout = document.createElement("div");
    var items = new Array();
    var map = new Object();
    var root = new Array();
    var activeNode = null;    
    this.xml = null;
    this.parent = null;
    this.primaryField = "";
    this.parentField = "";
    this.valueField = "";
    this.textField = "";
    this.activeNode = null;
    this.appendNode = function(parentNode){
        var node = new HK_TreeNode(parentNode);
        if(parentNode!=null){
            parentNode.appendChild(node);
        }else{
            layout.appendChild(node.getElement());
            root.push(node);
        }
        node.tree = this;
        items.push(node);        
        return node;
    }
    this.getNodeByIndex = function(index){
        if(items[i]!=undefined){
            return items[i];
        }
        return null;
    }
    this.getNodeByName = function(name){
        if(map[name]!=undefined){
            return map[name];
        }
        return null;        
    }
    this.getCount = function(){
        return items.length;
    }
    this.laodxml = function(){
        
    }
    this.databand = function(){
        var oRows = this.xml.getElementsByTagName("Row");
        var oCol,oCells,oRow;
        for(var i=0;i<oRows.length;i++){
            var parentId = oRows[i].selectSingleNode("./field[@name='"+this.parentField+"']");
            var nodeId = oRows[i].selectSingleNode("./field[@name='"+this.primaryField+"']");
            var nodeValue = oRows[i].selectSingleNode("./field[@name='"+this.valueField+"']");
            var nodeText = oRows[i].selectSingleNode("./field[@name='"+this.textField+"']");
            if(parentId!=null&&nodeId!=null){
                var node = this.appendNode(this.getNodeByName(parentId.text));
                node.data = oRows[i].xml;
                if(nodeValue!=null){
                    node.setValue(nodeValue.text);                    
                }
                if(nodeText!=null){
                    node.setText(nodeText.text);
                }
                map[nodeId.text] = node;
            }
            
        }
        this.ondataband();
    }
    this.init = function(){
        this.parent.appendChild(layout);
    }
    this.ondataband = function(){};
}

var tree = new HK_Tree();
tree.parent = document.getElementById("treepanel");
tree.primaryField = "unitId";
tree.parentField = "parentUnitId";
tree.valueField = "name";
tree.textField = "name";
tree.init();

今天下午完成的,发上来给大家看看

这种JS组件里建议不要和 外部资源文件耦合,
例如 nodeImage.src="images/plus.gif";
建议使用 span 代替img 这样可以把图片相关信息提取到css里.

我没仔细看,但是感觉你这个树代码有点多,缺少一些常用功能.

没有打击或否定你的意思,只是希望你可以继续完善

父子节点间的连线实现起来的确不容易的。加油！

兄弟的想法我不是没有想过.只不过图的方便.
不过如果要用我也会用DIV,不会用SPAN,可以少写CSS呵呵

功能是少了一些.下班的时候才发现忘了写删除节点的方法.-_-!
不过这些扩充起来很快的.

父子节点间的连线其实很简单的.看看代码你就知道了

你展开子节点的时候，把兄弟节点间的连线断开了！

用DIV比SPAN可以少写CSS?? 没明白

<div class="i_am_a_image_a"></div>

<span class="i_am_a_image_a"></span>

css里

.i_am_a_image_a {
background-color:transparent;
background-image:url(../images/table/unchecked.gif);
background-repeat: no-repeat;
background-position: center;
width:22px;
height:22px;
}

不是一样的吗??

1000个div要比1000个span更消耗客户端的资源
能用span就不要用div


其实你这个最大的问题不是这些,而是把"树结构"与"树展现"的代码写到了一起.
我觉得更好的方式应该类似这样:
Tree对象中不应该包含关于展现的任何信息,存放的只是各个节点的子父关系.

然后用一个公共方法来画出这个树,该公共方法需要的参数就是这个Tree对象.
(当然也可以把这个方法作为Tree对象的方法,方法名可以是 treeObject.drawMe() 之类的)

总之,我建议将结构与展现分开,毕竟树是一个结构性很强,而且设计操作很多的结构,这样的分离便于进行各种树的相关操作.

在功能点上其实你不光缺少你所说的那个基本的功能.
关于树的多层次联动的功能你也没有提供.

假如树形结构如下:
root
--a
---a.1
-----a.1.1
-----a.1.2
---a.2
-----a.2.1
--b
---b.1
---b.2


有这样一个需求:
我想通过一个JS命令,直接展开 a.1.2所在的分支,这样的功能你也没有提供.
这样的需求还是很多的. 例如a.1.2是一个常用功能,
你提供一个快捷方式来打开a.1.2,这时候树形必须要同步的.

而且你还没有提供展开一个节点自动关闭/不关闭之前展开的节点,展开全部节点,关闭全部节点....

总之,一个树形控件要考虑的东西其实很多.
继续加油啊
(我不是来给你挑毛病的,别生气,也别误会,我是真心的希望你写的这个可以变得更好,加油)

fins

那是,我觉你得说的相当对.真的

其实这是因为图片的原因,只要找到第一个子节点和最后一个子节点,线自然就连上了