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

今天下午刚写的树形控件

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

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

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

相关推荐

    代码生成器Mgicode生成器JAVA代码生成器

    你可能就要改一个下午。 能不能有这样的方法呢?修改一处其它处跟着改,这时就需要把原来的线性流程乾变换,改成为无前置的试,即卫星城的方式,中心城就是模型,可以称为Domain、域、实体,在实体的基础是加上一些...

    ExtAspNet_v2.3.2_dll

    -重新设计模拟树的下拉列表的实现,避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode,保持和...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -重新设计模拟树的下拉列表的实现,避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode,保持和...

    2031740029_李浚淇_毕业论文(设计)材料(1) (1).rar

    2031740029_李浚淇_毕业论文(设计)材料(1) (1).rar

    CH7219A-IMG.G000.08.03.05.IMG

    CH7219A-IMG.G000.08.03.05.IMG

    是德科技2023下一代无线通信技术6G基础指南英文版40页.pdf

    是德科技2023下一代无线通信技术6G基础指南英文版40页.pdf

    elasticsearch-9.0.0-windows-x86-64.zip

    Elasticsearch是一个基于Lucene的搜索服务器

    20250414,java面试资料

    20250414,java面试资料

    文化遗产保护:MATLAB点云处理在古建筑形变监测中的实践.pdf

    文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位,文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常,无任何异常情况,敬请您放心查阅与使用。文档仅供学习参考,请勿用作商业用途。 你是否渴望高效解决复杂的数学计算、数据分析难题?MATLAB 就是你的得力助手!作为一款强大的技术计算软件,MATLAB 集数值分析、矩阵运算、信号处理等多功能于一身,广泛应用于工程、科学研究等众多领域。 其简洁直观的编程环境,让代码编写如同行云流水。丰富的函数库和工具箱,为你节省大量时间和精力。无论是新手入门,还是资深专家,都能借助 MATLAB 挖掘数据背后的价值,创新科技成果。别再犹豫,拥抱 MATLAB,开启你的科技探索之旅!

    声学仿真优化:MATLAB-COMSOL多物理场耦合分析.pdf

    文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位,文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常,无任何异常情况,敬请您放心查阅与使用。文档仅供学习参考,请勿用作商业用途。 你是否渴望高效解决复杂的数学计算、数据分析难题?MATLAB 就是你的得力助手!作为一款强大的技术计算软件,MATLAB 集数值分析、矩阵运算、信号处理等多功能于一身,广泛应用于工程、科学研究等众多领域。 其简洁直观的编程环境,让代码编写如同行云流水。丰富的函数库和工具箱,为你节省大量时间和精力。无论是新手入门,还是资深专家,都能借助 MATLAB 挖掘数据背后的价值,创新科技成果。别再犹豫,拥抱 MATLAB,开启你的科技探索之旅!

    ### 房地产行业竞争格局趋势研究:央国企市场份额提升与新势力房企崛起、总论

    本文详细分析了中国房地产行业竞争格局的变化趋势,指出央国企市场份额显著提升,而民营房企受市场冲击较大,但未来在市场重新平衡后,民营房企的市场份额或将有所恢复。核心城市及成熟城市群成为房企聚焦的重点,行业集中度下降,千亿企业数量急剧减少,新势力房企崛起。专业化是房企未来发展的方向,轻资产、资产管理等领域将迎来发展机遇,代建企业与资产管理公司(AMC)凭借其专业能力在行业调整中获得更多机会。此外,数智化营销借助大数据、人工智能等技术,正重塑房地产营销的各个环节,提高营销效率和服务质量。

    使用51单片机制作的一个温度计. 硬件有很多替代品,你也可以选择自己喜欢的硬件进行开发&复刻 蓝牙调试、随便找一款能够进行蓝牙串口调试的软件就行了

    51单片机温湿度计、这个分支采用低功耗蓝牙(BLE)接收数据。 硬件有很多替代品,你也可以选择自己喜欢的硬件进行开发&复刻。蓝牙调试、随便找一款能够进行蓝牙串口调试的软件就行了。

    【图像加密解密】基于matlab GSVD结合线性正则变换彩色图像加密解密(含PSNR SSIM)【含Matlab源码 13169期】.zip

    Matlab领域上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    【计算机科学】数据结构课程核心知识点梳理:从基础概念到经典应用项目设计数据结构这门

    内容概要:本文系统介绍了数据结构这门计算机科学核心课程,强调其作为程序世界骨架的重要性。首先解释了数据结构的概念,即计算机中组织、管理和存储数据的方式,以确保数据能被高效访问和修改。接着列举了经典的数据结构及其应用场景,包括数组、链表、栈、队列、哈希表、树、图和堆,并简要说明了每种结构的操作复杂度。然后归纳了常见知识点与典型题型,涵盖线性结构、树与二叉树、哈希与散列、图论基础以及查找与排序算法。文中还提供了多个课程设计/项目的示例,如通讯录管理

    Java新学习计划.zip

    Java新学习计划.zip

    【房地产领域】2022年美国家装改造报告:家装项目成本与价值回收分析及业主满意度调查

    该报告由美国房地产经纪人协会发布,深入探讨了2022年美国家装改造的趋势、成本及业主满意度。报告指出,家装改造的原因多样,包括升级陈旧表面、增加功能性和改善居住体验等。疫情期间,家装项目规模有所扩大,约60%的受访者表示因疫情而增加了改造面积或项目数量。报告还提供了19项室内和室外改造项目的典型成本及预期回收价值,如重新铺设硬木地板可回收147%的成本,地下室改造成生活区的成本回收率为86%。此外,报告引入了“Joy Score”来衡量业主对项目的满意度,多个项目获得了满分10分。

    【Go语言编程】Go语言入门与实战:高性能并发编程及应用场景详解

    内容概要:本文介绍了 Go 语言的特点、应用场景、基础语法、并发编程优势、常用框架与工具链、项目结构以及学习路线。Go 语言由 Google 推出,具有简洁高效的语法、原生并发支持和优越的性能,适用于 Web 后端开发、云原生、微服务架构、网络编程和工具开发等多个领域。文中还提供了第一个 Go 程序示例、模块与包管理、创建 Goroutine 和使用 Channel 的代码片段。最后给

    打印机修复局域网共享软件

    打印机修复局域网共享软件等

    UniApp中使用renderjs进行AI对话实现流式请求及流式响应方式

    通过UniApp+vueJs+renderJs的前端框架实现一个AI对话的小功能,AI回答使用流式请求,响应流式输出的小案例。解决兼容低版本的手机端运行不支持流式Fetch的请求方式;

    ### 美妆医美行业2023年中期策略总结

    本文为美妆医美行业中银证券2023年中期策略报告,指出随着消费者信心恢复和需求释放,2023年第一季度化妆品和医美零售额逐渐回升。化妆品行业呈现弱复苏趋势,预计第二季度将进一步提升。医美方面,短期线下客流有所恢复,未来重点关注玻尿酸、胶原蛋白和再生针剂注射领域。新兴电商平台增长迅速,头部品牌在抖音等平台销量增长显著。化妆品行业转向爆品驱动,营销与产品双重能力成为制胜关键。医美市场中,轻医美用户规模和市场规模预计在2025年分别达到2,820万人和2,046亿元,细分领域中玻尿酸、胶原蛋白和再生针剂值得关注。

Global site tag (gtag.js) - Google Analytics