您的位置：首页 > Web前端 > JQuery

一个jQuery EasyUI tree+Struts2+MyBatis例子

2014-03-25 23:55 267 查看

效果：

前台代码，没什么好说的，照搬官方文档的。采用异步加载子节点的方式，展开一个节点时把这个节点的id传到后台，获取该节点的子节点。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="js/themes/icon.css"/>
<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css"/>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tree').tree({
url: "json_getNodes.action",
checkbox:true,
loadFilter: function(data){
if (data.treeNodes){
return data.treeNodes;
} else {
return data;
}
}
});
});
</script>
</head>
<body>
<ul id="tree" class="easyui-tree"></ul>
</body>
</html>

按照官方文档的说明，后台方法传回的json数组必须是下面这种形式，数据才能帮到tree上。

[{
"id": 1,
"text": "Node 1",
"state": "closed",
"children": [{
"id": 11,
"text": "Node 11"
},{
"id": 12,
"text": "Node 12"
}]
},{
"id": 2,
"text": "Node 2",
"state": "closed"
}]

其中的id、text、state和children都是tree中节点的属性。id是节点的编号，这个例子里使用的是数据库表的主键；text是节点上显示的文本；state是节点的状态，默认是打开；children是节点的子节点。为了符合tree的要求，我建立了一个TreeNode类来对应这些属性。

TreeNode类代码如下：

public class TreeNode {
private Integer id;//节点编号
private String text;//节点文本
private String state="closed";//节点状态
private List<TreeNode> children=new ArrayList<TreeNode>();//子节点集合
public TreeNode() {}
public TreeNode(Integer id, String text) {
this.id = id;
this.text = text;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public List<TreeNode> getChildren() {
return children;
}
public void setChildren(List<TreeNode> children) {
this.children = children;
}
}

测试用的实体类：

public class Privilege implements Serializable {

private static final long serialVersionUID = -104941301217905290L;
private Integer id;//权限编号
private String name;//权限名称
private Integer level;//权限层级
private Integer parentId=0;//上级权限
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 Integer getLevel() {
return level;
}
public void setLevel(Integer level) {
this.level = level;
}
public Integer getParentId() {
return parentId;
}
public void setParentId(Integer parentId) {
this.parentId = parentId;
}
}

MyBatis的mapper：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="Privilege">
<resultMap type="easyui.entity.Privilege" id="privilegeResultMap">
<id property="id" column="id"/>
<result property="name" column="name"/>
<result property="level" column="level"/>
</resultMap>
<!-- 用上级权限编号查权限 -->
<select id="selectByParentId" resultMap="privilegeResultMap" parameterType="int">
select p.id,p.name,p.level from privilege p where p.parentId=#{parentId}
</select>
</mapper>

因为要返回json数组，所以在struts.xml里做相应的配置：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd" >
<struts>
<package name="Json" extends="json-default">
<action name="json_*" class="easyui.action.JsonAction" method="{1}">
<result type="json">
<param name="root">result</param>
</result>
</action>
</package>
</struts>

Action类代码：

package easyui.action;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import easyui.entity.Node;
import easyui.entity.Privilege;
import easyui.entity.User;
import easyui.util.TreeNode;

@SuppressWarnings("serial")
public class JsonAction extends BasAction<User>{

private Map<String, Object> result=new HashMap<String, Object>();

public Map<String, Object> getResult() {
return result;
}

public void setResult(Map<String, Object> result) {
this.result = result;
}

public String getNodes(){
//声明一个变量储存前台传递的节点编号
int id=0;
//如果key为id的参数不为空
if(parameters.get("id")!=null){
//把key为id的参数的第一个值放在id中
id=Integer.parseInt(parameters.get("id")[0]);
}
//建立一个TreeNode类集合存放节点
List<TreeNode> treeNodes=new ArrayList<TreeNode>();
//查询上级权限编号等于id的权限
List<Privilege> privileges=sqlSession.selectList("selectByParentId", id);
//遍历查询结果
for(Privilege privilege:privileges){
//实例化TreeNode类对象
TreeNode treeNode=new TreeNode(privilege.getId(), privilege.getName());
//如果当前遍历到的权限没有下级权限
if(sqlSession.selectList("selectByParentId", privilege.getId()).size()<1){
//设置节点状态为打开
treeNode.setState("open");
}
//把节点放入集合中
treeNodes.add(treeNode);
}
result.put("treeNodes",treeNodes);
return SUCCESS;
}
}

页面加载时后台返回的数据：

{"treeNodes":[{"children":[],"id":1,"state":"closed","text":"系统管理"},{"children":[],"id":40,"state":"closed","text":"审批流转"},{"children":[],"id":41,"state":"closed","text":"实用工具"}]}

效果：

展开第一个节点时后台返回的数据：

{"treeNodes":[{"children":[],"id":4,"state":"closed","text":"部门管理"},{"children":[],"id":5,"state":"closed","text":"岗位管理"},{"children":[],"id":6,"state":"closed","text":"用户管理"}]}

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery easyui struts2 mybatis json

相关文章推荐

新的分享

章节导航