一个jQuery EasyUI tree+Struts2+MyBatis例子

最新推荐文章于 2023-10-11 15:59:39 发布

后来他死了

最新推荐文章于 2023-10-11 15:59:39 发布

阅读量2.2k

点赞数

分类专栏： jquery 文章标签： jquery easyui struts2 mybatis json

本文链接：https://blog.csdn.net/u011145753/article/details/22108603

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果：

前台代码，没什么好说的，照搬官方文档的。采用异步加载子节点的方式，展开一个节点时把这个节点的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":"用户管理"}]}

效果：

后来他死了

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
一个jQuery EasyUI tree+Struts2+MyBatis例子

效果：前台代码，没什么好说的，照搬官方文档的。采用异步加载子节点的方式，展开一个节点时把这个节点的id传到后台，获取该节点的子节点。<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>Insert title here $(document).r
复制链接

扫一扫