业务层方法
public String query() {
List<Role> list = roledao.query();
List<Map<String,Object>> rolelist = new ArrayList<Map<String,Object>>();
for (Role role : list) {
Map<String,Object> roles= new HashMap<String, Object>();
roles.put("id", String.valueOf(role.getRid()));
roles.put("text", role.getName());
roles.put("cls", "folder");
List<Map<String,Object>> userlist =new ArrayList<Map<String,Object>>();
for (Users users : role.getUsers()) {
Map<String,Object> user=new HashMap<String, Object>();
user.put("id", String.valueOf(users.getId()));
user.put("text",users.getUsername());
user.put("leaf", true);
//包含checked属性时, 生成的树中带有复选框
user.put("checked", false);
userlist.add(user);
}
roles.put("children", userlist);
rolelist.add(roles);
}
// Map<String,List<Map<String,Object>>> map= new HashMap<String, List<Map<String,Object>>>();
// map.put('root',rolelist );
return JSONArray.fromObject(rolelist).toString();
}
控制层方法
public class RoleAction implements Action {
private IRoleService rsi;
private String json;//注入json
public String getJson() {
return json;
}
public void setJson(String json) {
this.json = json;
}
public void setRsi(IRoleService rsi) {
this.rsi = rsi;
}
public String execute() throws Exception {
// TODO Auto-generated method stub
return null;
}
public String query(){
json=rsi.query();//赋值
return SUCCESS;
}
}
js文件读取json数据
Ext.onReady(function() {
var tree = new Ext.tree.TreePanel( {
renderTo : 'tree-div',
title : '用户权限表',
height : 768,
width : 1024,
useArrows : true,
autoScroll : true,
animate : true,
enableDD : true,
containerScroll : true,
rootVisible : false,
frame : true,
root : {
nodeType : 'async',
setRootNode: 'root',
id:'root'
},
// auto create TreeLoader
dataUrl : 'queryAll.action',
listeners : {
'checkchange' : function(node, checked) {
if (checked) {
node.getUI().addClass('complete');
} else {
node.getUI().removeClass('complete');
}
}
},
buttons : [ {
text : 'Get Completed Tasks',
handler : function() {
var msg = '', selNodes = tree.getChecked();
Ext.each(selNodes, function(node) {
if (msg.length > 0) {
msg += ', ';
}
msg += node.text;
});
Ext.Msg.show( {
title : 'Completed Tasks',
msg : msg.length > 0 ? msg : 'None',
icon : Ext.Msg.INFO,
minWidth : 200,
buttons : Ext.Msg.OK
});
}
} ]
});
tree.getRootNode().expand(true);
});
jsp页面
<html>
<head>
<title>Checkbox TreePanel</title>
<link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.2.1/ext-all.js"></script>
<script type="text/javascript" src="js/check-tree.js"></script>
</head>
<body>
<div id="tree-div"></div>
</body>
</html>
分享到：
相关推荐
- Upgraded to Latest Ext JS release (3.3.0) - UniTrackBar: Set Max at runtime - UniDBGrid: DataSet AfterEdit: Reload grid only when needed - New Demo: Chart Demo 0.79.1.788 +----------------------...
Ext Tree 3.2.1 是一个用于构建交互式树形结构的JavaScript库，它是Ext JS框架的一个组件。Ext JS是一个强大的客户端JavaScript库，用于创建富互联网应用程序（RIA）。在这个3.2.1版本中，它包含了完整的源代码、...
Ext.js 是一个强大的JavaScript库，专门用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件和数据绑定功能，使得开发者可以构建出具有桌面应用级别的交互式网页应用。本教程和API文档聚焦于Ext.js 3.0版本...
本文主要针对Ext JS中的树(Tree)和表格(Grid)控件进行深入探讨，详细介绍其拖拽功能的实现原理及应用场景。 #### 二、拖拽功能概述 在Ext JS中，拖拽功能主要通过`DragSource`和`DropTarget`两个核心概念来实现。 -...
EXT 3.2.1是Ext JS库的一个版本，它是一个强大的JavaScript框架，主要用于构建富客户端Web应用程序。这个"EXT 3.2.1 Demo 最全实例"包含了一系列的示例，展示了EXT JS 3.2.1版本的各种功能和组件，帮助开发者深入...
ExtJS是一个广泛使用的JavaScript库，特别适用于构建富客户端应用程序。这个文档压缩包“Ext+3.1~3.3-中文API文档.rar”包含了ExtJS从版本3.1到3.3的中文API文档，这对于开发者来说是极其宝贵的资源，因为它们提供了...
EXT 3.0 是一个流行的JavaScript库，专用于构建富互联网应用程序（Rich Internet Applications, RIA）。这个库提供了丰富的组件和功能，使开发者能够创建功能强大、交互性强的Web界面。EXT 3.0 中文版是EXT 3.0的...
5. **EXT Tree**: ExtJS是Sencha公司的一款强大的JavaScript框架，用于构建富客户端应用程序。EXT Tree是其内置的一个组件，提供了丰富的功能和高度的可定制性。EXT Tree支持JSON数据源，可以实现复杂的树形布局和...
Ext3.0中文API.CHM是一个关于Ext JavaScript库的离线帮助文档，它包含了Ext3.0版本的所有中文API详细信息。这个CHM文件（Compiled Help Manual）是微软开发的一种帮助文档格式，用户可以通过它方便地查找和学习Ext库...
var tree = new Ext.tree.TreePanel({ title: 'Checkbox Tree', width: 300, height: 300, autoScroll: true, rootVisible: false, checkboxModel: true, useSimpleItems: false, ... }); ``` 接下来，你...
1. **类体系结构**：Ext3.0采用面向对象的编程方式，其类系统基于JavaScript的原型继承。文档会展示各个类之间的层级关系，如Container类是许多UI组件的基础，而GridPanel则继承自Container，增加了表格展示功能。 ...
if (i == clist.size() -1) {//last row result += genChildTest(list,n) +" ] \n"; } else if( i ==0 ){//first row result += " [ "+ genChildTest(list,n) +"," ; } else {//middle row result += ...
Ext2.0是一个广泛使用的JavaScript库，主要用于构建富互联网应用程序（Rich Internet Applications，RIA）。它提供了丰富的组件模型、数据绑定机制以及高效的用户界面框架。这个API文档是开发者理解和使用Ext2.0的...
- Fully support of N-level nested tree of requirements specifications. - Requirements relations - Requirements versioning - Requirements version comparison - Requirement freeze - URL Links from ...
首先，EXTJS3是一款基于JavaScript的富客户端框架，它提供了丰富的组件库，包括Grid、Form、Tree等，用于构建交互式Web应用。在EXTJS3中，我们主要利用Grid组件来展示数据，并通过特定的方法将其转换为Excel格式。 ...
Ext JS是一个用于构建富互联网应用程序（RIA）的JavaScript框架，它提供了许多组件，包括树形控件。在示例中，`Ext.tree.TreeNode`用于创建树节点，`Ext.tree.TreePanel`用于创建包含这些节点的可交互的树形面板。 ...
ExtJS 是一个强大的JavaScript应用程序框架，专为构建富互联网应用（RIA）而设计。这个“ExtJs 最新最全中文API帮助文档 CHM版”包含了关于ExtJS 3.0版本的所有API信息，使得开发者无需在线查找，即可在本地进行离线...
ExtJs 是一个流行的JavaScript库，专门用于构建富客户端应用程序。版本3.1是该库的一个重要里程碑，提供了许多功能和改进。在这个压缩包中，包含了ExtJs 3.1的所有示例源代码，这对于初学者和有经验的开发者来说都是...
ExtJS是一个广泛使用的JavaScript库，特别适用于构建富客户端应用程序。3.0版本是该库的一个重要里程碑，提供了许多功能和改进。这篇文档将详细介绍ExtJS 3.0的中文API，帮助开发者更好地理解和使用这个框架。 一、...