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

今天下午刚写的树形控件

阅读更多
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里.

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

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

相关推荐

    树形控件拖曳放置及移动_labview_labview树形控件_树形控件(tree)

    在LabVIEW编程环境中,树形控件(Tree Control)是一种常用的数据展示和交互工具,它以层次结构的方式显示数据,用户可以通过展开、折叠节点来查看和操作数据。本教程将详细讲解如何在LabVIEW中使用树形控件进行拖曳...

    labview树形控件的使用

    在LabVIEW中,树形控件是一种非常实用的数据组织和显示工具,它可以帮助用户以层次结构的方式展示和操作数据。在本文中,我们将详细探讨如何在LabVIEW2019中有效地使用树形控件。 首先,树形控件的基本概念。在...

    LabVIEW中树形控件的基本操作

    在LabVIEW编程环境中,树形控件是一种非常实用的用户界面元素,用于展示层次结构的数据。本教程将深入探讨LabVIEW中树形控件的基本操作,包括创建、配置、数据绑定以及交互方式。 首先,创建树形控件是通过拖拽“树...

    权限管理系统 树形控件

    树形控件则是权限管理系统中常见的一种交互方式,用于直观地展示复杂的层级关系。下面将详细介绍权限管理系统的概念、作用以及树形控件在其中的应用。 权限管理系统的概念: 权限管理系统是一种软件工具,用于定义...

    动态添加、删除树形控件的节点,获取树形控件的选中项

    在MFC(Microsoft Foundation Classes)开发环境中,树形控件(CTreeCtrl)是一种常见的用户界面元素,用于显示层次结构的数据。本篇将详细讲解如何动态地添加、删除树形控件的节点以及如何获取选中的节点信息。 一...

    vc树形控件创建和使用

    在VC++编程环境中,树形控件(Tree Control)是一种常用的数据展示工具,它以层次结构的方式呈现数据,常用于文件浏览器、系统设置界面等。本文将深入探讨如何在VC++中创建和使用树形控件,以实现高效的数据管理和...

    jquery超漂亮树形控件

    在这个场景中,我们关注的是一个基于jQuery的"超漂亮树形控件",这通常用于构建可交互的、层次化的数据展示。树形控件是一种常见的用户界面元素,用于显示具有层级关系的数据,比如文件系统、组织结构或菜单。 标题...

    常用树形控件

    树形控件是计算机图形用户界面(GUI)中常见的一种数据可视化组件,它以树状结构展示信息,常用于文件管理、菜单系统、组织结构展示等场景。在本主题中,我们将深入探讨树形控件的基本概念、工作原理、常见用途以及...

    在树形控件中插入背景图

    在计算机用户界面设计中,树形控件是一种常见的数据展示方式,它以树状结构来组织和显示信息,便于用户浏览和操作。树形控件通常由节点、子节点和层级关系组成,允许用户展开或折叠节点以查看或隐藏详细信息。在...

    labVIEW 实现树形控件的值拖拽的另一个树形控件中,任意形成节点

    labVIEW 实现树形控件的值拖拽的另一个树形控件中,任意形成节点

    树形控件封装

    在IT领域,尤其是在GUI(图形用户界面)设计中,树形控件是一种常见的组件,用于显示数据的层次结构。在本篇文章中,我们将深入探讨如何使用Qt库进行树形控件的封装,以及如何结合数据库来展示和操作数据。首先,...

    非常好用的vb树形控件 找了好久的

    在VB中,树形控件(Treeview Control)是一种常见的用户界面元素,它以层级结构展示数据,通常用于菜单系统、文件浏览器或者复杂的导航界面。这种控件可以让用户通过展开和折叠节点来查看和操作层次化的信息。 在VB...

    安卓树形控件相关-Android使用ListView实现一个高性能无限层级显示的树形控件.rar

    在Android开发中,树形控件(Tree View)是一种常用的数据展示组件,它能够以层次结构展示数据,常用于文件系统、目录结构等场景。在Android SDK中,并没有内置的树形控件,但开发者可以通过自定义View或者利用现有...

    可编辑节点的树形控件

    在Microsoft Foundation Classes (MFC)库中,树形控件(CTreeCtrl)是一种常见的用户界面元素,用于显示层次结构的数据。在这个经典示例中,我们将深入探讨如何创建一个允许用户编辑其节点文本的树形控件。这在许多...

    vc树形控件

    VC树形控件,全称为Visual C++ TreeView控件,是MFC(Microsoft Foundation Classes)库中的一个重要组件,常用于构建用户界面,展示层次结构的数据。它在Windows应用程序开发中广泛使用,允许用户通过节点的展开和...

    MCF 树形控件与列表控件的结合,给初学者很好学习资料

    本资料重点讲解的是MFC中的树形控件(CTreeCtrl)和列表控件(CListCtrl)的结合使用,这对初学者来说是一份非常有价值的学习材料。 首先,我们来看树形控件CTreeCtrl。树形控件通常用于展示层次结构的数据,例如...

    javascript 树形控件

    JavaScript树形控件是一种在网页中用于展示层次结构数据的交互式组件,它通常以节点的形式呈现,每个节点可以展开或折叠,展示其子节点。这种控件在各种应用场景中非常常见,例如文件目录浏览、组织结构展示、菜单...

    组态王6.53树形控件实例

    在本实例中,我们主要探讨的是“树形控件”的应用,这是一个在可视化设计中常用的元素,能够帮助用户以层级结构的形式展示数据,方便进行导航和操作。 树形控件在组态王中的作用主要体现在以下几个方面: 1. **...

    安卓树形控件相关-Android任意层级树形控件无jar版.rar

    本资源"安卓树形控件相关-Android任意层级树形控件无jar版.rar"提供了一个无依赖jar包的树形控件实现,适用于那些希望自定义和控制底层逻辑的开发者。 在Android系统中,原生并未提供直接支持树形结构的控件,但...

    树形控件和列表控件的结合

    在本项目中,我们关注的是"树形控件(CTreeCtrl)"和"列表控件(CListCtrl)"的结合使用。这两种控件在Windows应用程序中非常常见,它们各自具有独特的功能,而将它们整合在一起可以实现更复杂的界面布局和数据展示...

Global site tag (gtag.js) - Google Analytics