这里仅仅是一个树控件的展现而已,并没有做其他操作,其目的主要是熟悉使用ExtJS实现树结构数据的展现。里面的一些具体参数的含义参照文档,这里我就把一些需要增加或修改地方的代码贴出来:
组织机构实体类:
@Entity
@Table(name="T_Org")
public class Organization {
@Id
@GeneratedValue
private Integer id;
private String name;
@Column(unique=true)
private String sn;
private String description;
@ManyToOne
@JoinColumn(name="pid")
private Organization parent;
//如果使用ExtJS,可以考虑不加载
@OneToMany(mappedBy="parent")
@LazyCollection(LazyCollectionOption.EXTRA)
private Set<Organization> children;
//在界面上显示的文本
public String getText(){
return name;
}
//是否是叶子节点
public boolean getLeaf(){
if(getChildren().size() == 0){
return true;
}
return false;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSn() {
return sn;
}
public void setSn(String sn) {
this.sn = sn;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public Organization getParent() {
return parent;
}
public void setParent(Organization parent) {
this.parent = parent;
}
public Set<Organization> getChildren() {
return children;
}
public void setChildren(Set<Organization> children) {
this.children = children;
}
}
下面是请求action类:
@Controller("orgAction")
@Scope("prototype")
public class OrgAction extends BaseAction implements ModelDriven{
private Organization org;
private int parentId;
@Resource
private OrgManager orgManager;
//从界面上传递过来的参数
private String node;
//打开机构树
public void execute(){
int pid = 0;
//首次加载node为空,则将异常忽略掉
try {
pid = Integer.parseInt(node);
} catch (Exception e) {
}
PagerModel pm = orgManager.searchOrgs(pid);
toJSON(pm.getDatas());
}
public Object getModel() {
if(org == null){
org = new Organization();
}
return org;
}
public Organization getOrg() {
return org;
}
public void setOrg(Organization org) {
this.org = org;
}
public int getParentId() {
return parentId;
}
public void setParentId(int parentId) {
this.parentId = parentId;
}
}
下面贴出js文件:注意这里的nodeType: 'async',//异步请求,参数并未起作用,主要原因是由我们在实体类中设置了双向关联,hibernate加载数据时一块给加载了。
Ext.BLANK_IMAGE_URL = 'ext-3.1.1/resources/images/default/s.gif';//指定空白图片的位置,不指定会从网上查找
Ext.onReady(function(){
Ext.QuickTips.init();
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
rootVisible: false,//是否显示root
// auto create TreeLoader
dataUrl: 'org.action',
root: {
nodeType: 'async',//异步请求
text: '机构信息',
draggable: false,//是否可以拖放
id: 'src'
}
});
tree.on("click",
function(node,e){
alert("你点击的机构ID是:"+node.id);
}
);
// render the tree
tree.render('orgtree');
//tree.getRootNode().expand();
});
页面:
<div id="orgtree"></div>
下面来看看效果图吧:
- 大小: 19.3 KB
分享到:
相关推荐
详细说明了extjs中的树控件,正确无误的说明extjs树控件的强大之处
Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)
extjs时间空间精确秒
extjs表格、树控件
extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件
自己新写的extjs年份控件,直接new Ext.ux.MyYear 即可使用
extjs控件,是本科的毕业设计,最后获得优秀,老师评价非常好。主要有图表控件、一级、二级、三级联动下拉列表框控件
extjs 微调控件,时间微调控件,微调,javascript 微调 v2.0以上都可以用!!!
extjs 时间控件
NULL 博文链接:https://init-since.iteye.com/blog/2095766
extjs ip控件 extjs ip控件 extjs ip控件 extjs ip控件 extjs ip控件
ExtJs图片按钮控件:设置文字、文字颜色、背景图片、是否可用
EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0
一个extjs的分页控件,就是可以选择一页显示多少条记录,该控件非常灵活,便于集成
可以动态的新增和删除Ext控件,这里支持的上传控件的新增和删除。
extjs4.1部分控件示例 MVC2 VS2010
extjs 树形下拉列表框,可以进行数据选择,数据回显。
extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json...
同事写的extjs月份扩展控件,可以直接调用,用于只要求显示月份不显示日期的项目