`
micrexp
  • 浏览: 12110 次
  • 来自: ...
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

今天下午刚写的树形控件

阅读更多
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();

今天下午完成的,发上来给大家看看
  • 描述: 图片
  • 大小: 13.5 KB
  • Script.rar (19.7 KB)
  • 描述: 里面还有树,TAB页,GRID,WEBSERVICE 只支持IE
  • 下载次数: 701
分享到:
评论
16 楼 andy54321 2007-10-23  
老兄您真是太有才了,研究中
15 楼 tianyidan 2007-06-01  
你应该还没写完吧?等完善些了再传上来给我们看看。各个实现尽量分开,这样别人看起来轻松些,自己也好修改。
14 楼 liujx2005 2007-05-31  
感觉写的好,可我看不懂呀
13 楼 过儿oO 2007-05-22  
挖,用这个实现树,强啊
12 楼 jianfeng008cn 2007-05-17  
鼓励创作 鼓励 持之以恒 不断完善 的创作
11 楼 xieye 2007-05-16  
xyTree出新版本了!
跨浏览器的支持,
精美的文档,
还等什么!立刻下载http://www.iteye.com/topic/77760
10 楼 micrexp 2007-05-12  
引用

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

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

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


其实最初我也是这么想的.这个是我写的第二个版本,第一个版本也是照你的方法做的.有很强的树结构模型.后来我才发现,其实这么做很头痛.特别是在对节点的添加删除上有很大的麻烦.所以我就把树节点的HTML对像放在了整个数的节点模型里面.不知道XD在这个一点上是怎么考虑的.

还有一个观点.我觉得JAVASCRIPT不能太讲究对像的模型.有时候简单一点最好.因为性能毕竟如此.
9 楼 micrexp 2007-05-12  
hexiaodong 写道
你展开子节点的时候,把兄弟节点间的连线断开了!


其实这是因为图片的原因,只要找到第一个子节点和最后一个子节点,线自然就连上了
8 楼 micrexp 2007-05-12  
fins

那是,我觉你得说的相当对.真的
7 楼 fins 2007-05-12  
在功能点上其实你不光缺少你所说的那个基本的功能.
关于树的多层次联动的功能你也没有提供.

假如树形结构如下:
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,这时候树形必须要同步的.

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

总之,一个树形控件要考虑的东西其实很多.
继续加油啊
(我不是来给你挑毛病的,别生气,也别误会,我是真心的希望你写的这个可以变得更好,加油 )
6 楼 fins 2007-05-12  
micrexp 写道
fins 写道
这种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() 之类的)

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






5 楼 hexiaodong 2007-05-12  
你展开子节点的时候,把兄弟节点间的连线断开了!
4 楼 micrexp 2007-05-12  
hexiaodong 写道
父子节点间的连线实现起来的确不容易的。加油!


父子节点间的连线其实很简单的.看看代码你就知道了
3 楼 micrexp 2007-05-12  
fins 写道
这种JS组件里建议不要和 外部资源文件耦合,
例如 nodeImage.src="images/plus.gif"; 
建议使用 span 代替img 这样可以把图片相关信息提取到css里.

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

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


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

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

2 楼 hexiaodong 2007-05-11  
父子节点间的连线实现起来的确不容易的。加油!
1 楼 fins 2007-05-11  
这种JS组件里建议不要和 外部资源文件耦合,
例如 nodeImage.src="images/plus.gif"; 
建议使用 span 代替img 这样可以把图片相关信息提取到css里.

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

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

相关推荐

Global site tag (gtag.js) - Google Analytics