`

yui+dwr实现动态tree

    博客分类:
  • java
阅读更多

YUI脚本

<script><!--
YAHOO.example.treeExample = function() {

    var tree, currentIconMode;

    function changeIconMode() {
        var newVal = parseInt(this.value);
        if (newVal != currentIconMode) {
            currentIconMode = newVal;
        }
        buildTree();
    }
    
        function loadNodeData(node, fnLoadComplete)  {
         
            var nodeLabel = encodeURI(node.label);
            
            //prepare URL for XHR request:
            var sUrl = "assets/ysuggest_proxy.php?query=" + nodeLabel;
            
            //prepare our callback object
            var callback = {
            
                //if our XHR call is successful, we want to make use
                //of the returned data and create child nodes.
                success: function(oResponse) {
                    YAHOO.log("XHR transaction was successful.", "info", "example");
                    //YAHOO.log(oResponse.responseText);
                    var oResults = eval("(" + oResponse.responseText + ")");
                    if((oResults.ResultSet.Result) && (oResults.ResultSet.Result.length)) {
                        //Result is an array if more than one result, string otherwise
                        if(YAHOO.lang.isArray(oResults.ResultSet.Result)) {
                            for (var i=0, j=oResults.ResultSet.Result.length; i<j; i++) {
                                var tempNode = new YAHOO.widget.TextNode(oResults.ResultSet.Result[i], node, false);
                            }
                        } else {
                            //there is only one result; comes as string:
                            var tempNode = new YAHOO.widget.TextNode(oResults.ResultSet.Result, node, false)
                        }
                    }
  
                    oResponse.argument.fnLoadComplete();
                },
                
                failure: function(oResponse) {
                    YAHOO.log("Failed to process XHR transaction.", "info", "example");
                    oResponse.argument.fnLoadComplete();
                },

                argument: {
                    "node": node,
                    "fnLoadComplete": fnLoadComplete
                },
                
                //timeout -- if more than 7 seconds go by, we'll abort
                //the transaction and assume there are no children:
                timeout: 7000
            };
            YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
        }

        function buildTree() {
        	
            tree = new YAHOO.widget.TreeView("treeDiv1");
            tree.setDynamicLoad(loadNodeData, currentIconMode);
            var root = tree.getRoot(); 
            var arrRoot=new Array();
            DWREngine.setAsync(false);
            arrRoot=OrganizationService.getRootNodes();
			OrganizationService.getRootNodes(
					function(data){
						arrRoot=data;
			});
			for (var m=0, n=arrRoot.length; m<n; m++) {
				
				var division = new YAHOO.widget.TextNode(arrRoot[m], root, true);
	            var div=encodeURI(division.label);
	            division.href="#";
	            division.expanded=false;
	            division.target="#";
	            
				var aStates=new Array();
				DWREngine.setAsync(false);
				OrganizationService.getChildNodes(arrRoot[m],
						function(data){
							aStates=data;
				});
	            for (var i=0, j=aStates.length; i<j; i++) {
	            	var depNode = new YAHOO.widget.TextNode(aStates[i], division, false);
	            	var department=encodeURI(aStates[i]);
	            	depNode.href="frameUserAction.html?department="+department;
	            	depNode.target="rightFrame";
	            	depNode.isLeaf=true;
	            }
			}
            tree.draw();        
         }
    return {
        init: function() {
            YAHOO.util.Event.on(["mode0", "mode1"], "click", changeIconMode);
            var el = document.getElementById("mode1");
            if (el && el.checked) {
                currentIconMode = parseInt(el.value);
            } else {
                currentIconMode = 0;
            }

            buildTree();
        }

    }
} ();

//once the DOM has loaded, we can go ahead and set up our tree:
YAHOO.util.Event.onDOMReady(YAHOO.example.treeExample.init, YAHOO.example.treeExample,true)

--></script>

 HTML code

<div id="treeDiv1" style="margin-top: 10px"></div>

 dwr.xml配置

<dwr>
    <allow>
        <create creator="new" javascript="validator">
            <param name="class" value="org.apache.struts2.validators.DWRValidator"/>
        </create>
        <convert converter="bean" match="com.opensymphony.xwork2.ValidationAwareSupport"/>
        
        <convert converter="bean" match="com.byd.bqs.model.Organization" javascript="Organization">
            <param name="include" value="division,department" />
        </convert>
        
         <create creator="spring" javascript="OrganizationService">
            <param name="class" value="com.byd.bqs.OrganizationService"/>
            <param name="beanName" value="organizationService"/>
            <include method="getChildNodes"/>
            <include method="getHelloworld"/>
            <include method="getRootNodes"/>
            
         </create>
    </allow>

    <signatures>
        <![CDATA[
        import java.util.Map;
        import org.apache.struts2.validators.DWRValidator;

        DWRValidator.doPost(String, String, Map<String, String>);
        ]]>
    </signatures>
</dwr>
分享到:
评论
1 楼 apm32s 2011-11-06  
只有代码?

相关推荐

    YUI+Ant 实现JS CSS压缩

    标题:“YUI+Ant 实现JS CSS压缩” 在Web开发中,为了提高页面加载速度和优化用户体验,开发者通常会使用代码压缩工具来减少JavaScript(JS)和CSS文件的大小。YUI Compressor是 Yahoo! 推出的一款开源的压缩工具,...

    dwr-yui实现分页

    在本场景中,"dwr-yui实现分页"指的是利用DWR和YUI库来实现网页的分页功能。 分页是Web应用程序中常见的功能,尤其是处理大量数据时,它可以提高用户体验,避免一次性加载过多内容导致页面加载慢或者浏览器崩溃。...

    YUI3 中tree的两种实现

    这篇博文“YUI3 中tree的两种实现”探讨了如何在YUI3中创建和管理树形结构。 1. **YUI3 TreeView组件** YUI3 TreeView组件是YUI3核心库的一部分,它允许开发者创建交互式的树结构。这个组件支持节点的添加、删除、...

    使用YUI+Ant 实现JS CSS压缩

    YUI库是一组工具和控件,它们用JavaScript写成, 为的是用DOM 脚本,DHTML和AJAX等技术创建丰富的网页交互式应用程序。YUI 基于BSD协议,对所有的使用方式都是免费的。YUI 项目包括YUI 库和两个创建时工具:YUI ...

    YUI3 实现overlay展开是tree,并且树节点可以拖拽-drag和drop

    在这个场景中,我们讨论的是如何使用`YUI3`实现一个特殊的组件——一个可展开的`Overlay`,它内部展示了一个树形结构(Tree),并且树节点支持拖放(Drag and Drop)功能。 首先,`Overlay`是`YUI3`中的一个基础...

    YAHOO yui2.7 文档+ 代码+例子

    - **Ajax通信**:YUI的Ajax组件支持异步与服务器进行数据交换,实现无刷新页面更新。 **2. YUI的可扩展性** YUI的设计非常注重模块化和可扩展性,开发者可以通过编写新的模块来扩展其功能。YUI的模块化结构使得代码...

    基于yui的layout,tree的demo

    基于yui的layout,tree的一个demo

    DWR与界面开发 资料大全

    1. **创建动态表单**:利用DWR实现实时验证和动态加载数据。 2. **构建富客户端应用**:结合DWR和JavaScript库(如jQuery)创建复杂的交互式用户界面。 3. **优化性能**:了解如何优化DWR的性能,如缓存策略、压缩...

    YUI Comprocess+ant成功压缩css文件的例子

    通过研究和实践这个示例,你可以更好地理解如何将这两个工具集成到你的项目中,以实现自动化CSS压缩。 总的来说,结合YUI Compressor和Ant可以为前端开发者提供一个高效、可重复的CSS压缩流程,有助于优化网站性能...

    基于javascript+html实现的在线编辑器

    User Interface(YUI)库实现的在线编辑器。YUI Editor提供了许多插件和主题,用户可以根据需要进行自定义。YUI Editor支持多种格式的文本输入,例如HTML、XHTML、XML等。 NicEdit是一个基于JavaScript实现的在线...

    Struts2中使用JSON+YUI之一[包含功能代码段]

    在Struts2中整合JSON(JavaScript Object Notation)和YUI(Yahoo User Interface Library)可以实现高效的异步数据交互,提升用户体验。JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和...

    yui3-master.zip

    YUI3还包含了丰富的动画功能,如“anim”模块,能够实现复杂的CSS属性动画,如淡入淡出、滑动等效果。通过“yui3-master.zip”,我们可以研究并理解这些动画是如何实现的。 6. **IO与Ajax** 在“io”模块中,YUI3...

    Struts2+JSON+YUI组合应用之二构建RichClient

    4. **页面动态更新**:结合JSON和YUI,可以实现实时的页面更新。当用户触发一个操作(如点击按钮),Struts2 Action处理请求并返回JSON数据,YUI通过监听Ajax请求完成事件,接收到数据后更新DOM元素,实现无刷新的...

    使用YUI2.8 实现多选 ,支持Ctrl 和Shift

    使用YUI2.8 仿照JQuery UI 的select插件写的一个函数 详情见我的博客http://hi.baidu.com/hjzheng

    yui 资源包

    《深入理解YUI 3.9.0 r2:界面设计与资源优化》 YUI,全称为Yahoo! User Interface Library,是由雅虎公司开发的一个开源JavaScript库,它旨在简化Web应用程序的构建,特别是对于界面设计和交互效果的实现。在3.9.0...

    yahoo yui 实例教程

    利用Yahoo YUI库做的一个TREE实例,很详细的阐述了YUI的使用原理

    yui.rar 例子

    在这个例子中,左中右三个模块的划分,正是通过YUI的Container组件和Grids CSS实现的,它们使得页面结构清晰,代码可读性强。 接下来,我们要讨论的是YUI的模块化设计。YUI遵循了“按需加载”的原则,这意味着...

    YUI3.6文档及示例

    4. **样式与动画**:YUI3.6包含了CSS类操作和动画效果的实现,可以轻松实现复杂的页面过渡和动画效果。 5. **数据管理**:提供了数据存储和模型层管理,方便在客户端进行数据操作和同步。 6. **用户界面组件**:...

    使用YUI2.8 实现多个LI拖拽

    这是对YUI拖拽例子的改编,大家可以去访问的博客 http://hi.baidu.com/hjzheng

Global site tag (gtag.js) - Google Analytics