当前位置: 代码迷 >> JavaScript >> EXT js -Tree之一:n
  详细解决方案

EXT js -Tree之一:n

热度:433   发布时间:2012-10-06 17:34:01.0
EXT js -------Tree之1:n


业务层方法

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>

?

  相关解决方案