`
hudixin1987
  • 浏览: 16119 次
  • 性别: Icon_minigender_1
  • 来自: 天津
文章分类
社区版块
存档分类
最新评论

extjs 加上dwr tree

 
阅读更多

这里是js类 创建一个树。。

从java 类中 直接返回一个 bean 的集合(List ,Set)都行。。。

Ext.BLANK_IMAGE_URL='js/resources/images/vista/s.gif';

Ext.onReady(
function()...{
vari=20;
//从DWR中加载数据自动转换成json格式
vartreeLoader=newExt.tree.DWRTreeLoader(...{


dwrCall:CheckBean.getTreeNode
//调用java方法
}
);

//定义树
varTree=Ext.tree;

vartree=newTree.TreePanel(...{

el:
'tree-div',//目标div容器



animate:
true,

enableDD:
true,

containerScroll:
true,

loader:treeLoader

}
);


//树中加入一个右键菜单事件
tree.on('contextmenu',onContextMenu);

functiononContextMenu(node,e)...{
varmenu;
if(!menu)...{
menu
=newExt.menu.Menu([...{

id:node.id
+'add',
text:
'添加一个文件',
handler:
function()...{

node.appendChild(
newTree.AsyncTreeNode(...{

text:node.childNodes.length.toString(),
id:i
+++'',
expanded:
true
}
));

}

}
,...{

id:node.id
+'del',
text:
'删除接点',
handler:
function()...{
if(node.id!=-1)...{
node.remove();
}
else...{

Ext.Msg.alert(
'错误','根结点不能删除');
}

}

}
]);

}


menu.showAt(e.getPoint());
node.on(
'append',onAppend);

functiononAppend(tree,thisNode,newNode,index)...{

alert();


}



}


//定义根节点
varroot=newExt.tree.AsyncTreeNode(...{

text:
'组织机构图',

draggable:
false,

id:
'-1'//默认的node值:?node=-1

}
);

tree.setRootNode(root);

tree.render();

root.expand();

}
);

bean 的命名 必须 遵守规范

所有字段 必须遵守命名规范

如何不想使用这样的命名 就要修改 Ext.tree.DWRTreeloader.js这个类

packagecom;

importjava.util.List;

publicclassOrgBean...{


//是否加载字节点下的所有节点
privatebooleanchildrenLoaded=false;
//是否用子节点
privatebooleanhasChildren=true;
//是否加载时候展开
privatebooleanexpanded=false;
//tree的id属性
privateStringid;
//tree的name属性
privateStringtext;
//当前类的集合
privateList<OrgBean>children;



publicList<OrgBean>getChildren()...{
returnchildren;
}


publicvoidsetChildren(List<OrgBean>children)...{
this.children=children;
}


publicStringgetId()...{
returnid;
}


publicvoidsetId(Stringid)...{
this.id=id;
}


publicStringgetText()...{
returntext;
}


publicvoidsetText(Stringtext)...{
this.text=text;
}






publicbooleanisChildrenLoaded()...{
returnchildrenLoaded;
}


publicvoidsetChildrenLoaded(booleanchildrenLoaded)...{
this.childrenLoaded=childrenLoaded;
}


publicbooleanisExpanded()...{
returnexpanded;
}


publicvoidsetExpanded(booleanexpanded)...{
this.expanded=expanded;
}


publicbooleanisHasChildren()...{
returnhasChildren;
}


publicvoidsetHasChildren(booleanhasChildren)...{
this.hasChildren=hasChildren;
}




}

OrgDwr.java

没什么好说的 一个 递归 加载数据

packagecom;

importjava.util.List;

publicclassOrgDwr...{

privateOrgDAOorgDAO=newOrgDAO();

publicList<OrgBean>getTreeNode(StringtreeId)...{
System.out.println(treeId);
List
<OrgBean>list=orgDAO.findByParentID(Integer.parseInt(treeId));



returnget(list);
}


privateList<OrgBean>get(List<OrgBean>list)...{

for(OrgBeanbean:list)...{
System.out.println(bean.getText());
List
<OrgBean>list2=orgDAO.findByParentID(Integer.parseInt(bean.getId()));


if(list2.size()>0)...{
bean.setChildren(list2);
get(list2);
break;
}


bean.setHasChildren(
false);

}


returnlist;
}


}

html 如何 引用 超级简单 把几个 js 加载进去就ok了

<%...@pagelanguage="java"import="java.util.*"pageEncoding="GBK"%>
<%...
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"
+request.getServerName()+":"+request.getServerPort()
+path+"/";
%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">

<title>MyJSP'org.jsp'startingpage</title>


<linkrel="stylesheet"type="text/css"
href
="js/resources/css/ext-all.css"/>
<scripttype="text/javascript"src="js/ext-base.js"></script>
<scripttype="text/javascript"src="js/ext-all.js"></script>
<scripttype="text/javascript"src="js/MyAsynTreeNode.js"></script>
<scripttype="text/javascript"src="js/DWRTreeLoder.js"></script>
<scripttype='text/javascript'
src='/ExtTree/dwr/interface/CheckBean.js'></script>
<scripttype='text/javascript'src='/ExtTree/dwr/engine.js'></script>

<scripttype='text/javascript'src='/ExtTree/dwr/util.js'></script>

<scripttype="text/javascript"src="js/extdwr.js"></script>
</head>

<body>
<!--树加载的位置-->
<divid="tree-div"
style
="overflow:auto;height:300px;width:200px;border:2pxsolid#c3daf9;"></div>

</body>
</html>

用需要 源码的话 把邮箱留下来 我给你们传过去

分享到:
评论

相关推荐

    extjs兼容dwr的代理和DWRTreeLoader

    ExtJS和Direct Web Remoting (DWR) 是两种在Web应用程序中实现客户端和服务器端通信的技术。DWR允许JavaScript直接调用Java方法,而无需页面刷新,极大地提升了用户体验。本主题将深入探讨如何在ExtJS中使用DWR的...

    基于s2sh+Extjs+dwr OA系统带全部JAR

    用的东西比较杂,主要为了学习一下知识呵呵: ssh2、dwr、jquery、extjs、jquery weekcalendar、jfreechart、jasperreport 联系人实现了拖动实现好友分组。可以把grid直接拖到tree,不同于其他的例子,拖动grid后会...

    Extjs Tree + JSON + Struts2 示例源代码

    ExtJS Tree + JSON + Struts2 示例源代码是结合了三种技术来实现一个动态的、交互式的树形数据展示的应用。这个示例中,ExtJS用于前端UI的构建,JSON作为数据交换格式,而Struts2则作为后端MVC框架处理请求和返回...

    ext 与 dwr 的结合

    1. **EXTJS组件使用**:了解EXTJS的基本组件,如面板(Panel)、表格(Grid)、表单(Form)、树形视图(Tree),以及如何配置和布局这些组件。 2. **DWR配置**:在服务器端设置DWR的Context和Engine,定义允许...

    Extjs+数据库+dwr+案例+xml

    在ExtJS应用中,DWR作为桥梁,帮助我们处理与服务器端的数据通信,使得动态更新、数据检索变得简单。 XML,全称可扩展标记语言(eXtensible Markup Language),是用于传输和存储数据的一种标准格式。在Web开发中,...

    ajax+DWR实战

    - **数据绑定**: 使用DWR获取的数据直接填充到ExtJS的Grid、Tree等组件,实现数据的实时刷新。 ### 5. 示例代码 ```java // 服务器端Java接口 public interface MyService { List&lt;String&gt; getNames(); } // ...

    ExtJS对Ajax的支持

    类似地,对于Tree控件,可以使用DWR TreeLoader来异步加载树结构数据。这使得树的加载过程更加高效和流畅,特别是在数据量较大时。 ##### 2.3 DWRProxy和ComboBox DWRProxy可以与ComboBox控件结合使用,实现实时...

    Extjs动态树的实现以及节点拖拽

    同时,ExtJS中的menu、tree、window等组件以及事件机制也是实现动态树的关键。 在实际项目中,动态树的实现可能还需要考虑到数据的存储结构,如导航数据表,以及页面的布局和源码组织。为了创建一个完整的动态树...

    DWRExt Tree

    【DWRExt Tree】是一种基于Web的用户界面技术,它结合了DWR(Direct Web Remoting)和ExtJS库来创建交互式的树形组件。在本文中,我们将深入探讨这两个技术以及它们如何协同工作,创建出动态且功能丰富的树结构。 ...

    整合--Struts2为extjs提供server数据

    Extjs的`JsonReader`会解析这个响应,将数据绑定到Grid、Tree或其他组件中。 例如,在给出的部分内容中,我们可以看到一个使用`Ext.data.GroupingStore`的例子,它通过`HttpProxy`与服务器进行通信,配置了`url`...

    精通JS脚本之ExtJS框架.part2.rar

    13.7 Ext.ux.DWR 13.7.1 Ext.data.DwrProxy 13.7.2 Ext.data.DWRTreeLoader 13.7.4 Web服务端配置 13.7.5 服务层接口 第14章 ExtJS扩展 14.1 利用Ext.extend实现继承 14.2 与ExtJS扩展相关的预备知识 14.2.1...

    ssh2 extjs oa

    用的东西比较杂,主要为了学习一下知识呵呵: ssh2、dwr、jquery、extjs、jquery weekcalendar、jfreechart、jasperreport 联系人实现了拖动实现好友分组。可以把grid直接拖到tree,不同于其他的例子,拖动grid后会在...

    DWR+jquery2.x+easyUI1.3.x开发富客户端应用

    2. **特性**:EasyUI 提供了许多常用的 UI 控件,如 Accordion、ComboBox、Menu、Dialog、Tabs、Tree、ValidateBox、Window 等,这些控件极大地简化了前端界面的开发工作。 3. **优势**:与 ExtJS 相比,EasyUI ...

    精通JS脚本之ExtJS框架.part1.rar

    13.7 Ext.ux.DWR 13.7.1 Ext.data.DwrProxy 13.7.2 Ext.data.DWRTreeLoader 13.7.4 Web服务端配置 13.7.5 服务层接口 第14章 ExtJS扩展 14.1 利用Ext.extend实现继承 14.2 与ExtJS扩展相关的预备知识 14.2.1...

    dwrproxy dwrtreeloader

    在Web应用程序开发中,ExtJS和Direct Web Remoting (DWR)是两种常见的技术,用于构建富客户端界面和实现服务器端交互。标题中的"dwrtproxy"和"dwrproxy.js"指的是DWR中的一个关键组件——DWR Proxy,而...

    ext2.0+dwr 实现的动态树

    ExtJS 是一款强大的JavaScript库,主要用于构建富客户端的Web应用程序,尤其在数据可视化和用户界面交互方面表现出色。其中,Ext2.0是该库的一个早期版本,它提供了丰富的组件和功能,包括我们今天要讨论的“动态树...

    自己用ssh2 和 ext 做的简单oa

    用的东西比较杂,主要为了学习一下知识呵呵: ssh2、dwr、jquery、extjs、jquery weekcalendar、jfreechart、jasperreport 联系人实现了拖动实现好友分组。可以把grid直接拖到tree,不同于其他的例子,拖动grid后会在...

    Ext 开发指南 学习资料

    2.7.3. 迫不得已,要加上后台脚本了。 2.7.4. 其实分页不一定要踩在脚下,也可以顶在头上。 2.7.5. 谣言说ext不支持前台排序 2.8. 爱生活,EditorGrid。 2.8.1. 旋动舞步,看我们怎么把这个EditorGrid炫出来。 2.8.2...

Global site tag (gtag.js) - Google Analytics