easyUI03（tree后台工作）

最新推荐文章于 2024-08-01 15:05:06 发布

--mq--

最新推荐文章于 2024-08-01 15:05:06 发布

阅读量489

点赞数 1

分类专栏： Bootstrap 文章标签： java mvc

本文链接：https://blog.csdn.net/m12120426/article/details/124655754

版权

Bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上次我们是从JSON中拿到的数据，今天从数据库拿

tree属性

每个节点都具备以下属性：

id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。

使用MVC实现

根据以上属性，实体类的属性就可以确定了

在数据库中建一个 tb_module 功能模块表

实体类：

package com.zking.entity;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

/**
 * 实体类：功能模块类
 * @author Administrator
 *
 */
public class Module implements Serializable{

	
	private static final long serialVersionUID = 1L;
	
	private int id;
	private int pid;
	private String text;
	private String iconCls;
	private String url;
	private int sort;
	
	private List<Module> children=new ArrayList<Module>();

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public int getPid() {
		return pid;
	}

	public void setPid(int pid) {
		this.pid = pid;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public String getIconCls() {
		return iconCls;
	}

	public void setIconCls(String iconCls) {
		this.iconCls = iconCls;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	public int getSort() {
		return sort;
	}

	public void setSort(int sort) {
		this.sort = sort;
	}

	public List<Module> getChildren() {
		return children;
	}

	public void setChildren(List<Module> children) {
		this.children = children;
	}
	
	public Module() {
		// TODO Auto-generated constructor stub
	}

	public Module(int id, int pid, String text, String iconCls, String url, int sort, List<Module> children) {
		this.id = id;
		this.pid = pid;
		this.text = text;
		this.iconCls = iconCls;
		this.url = url;
		this.sort = sort;
		this.children = children;
	}
	
	public Module(int pid, String text, String iconCls, String url, int sort, List<Module> children) {
		this.pid = pid;
		this.text = text;
		this.iconCls = iconCls;
		this.url = url;
		this.sort = sort;
		this.children = children;
	}

	@Override
	public String toString() {
		return "module [id=" + id + ", pid=" + pid + ", text=" + text + ", iconCls=" + iconCls + ", url=" + url
				+ ", sort=" + sort + ", children=" + children + "]";
	}
	
	
	
}

在数据库访问层中写一个方法

接口：

   /**
   * 根据父级id找到其对应的子节点的集合
   * @param pid 父级id
   * @return 功能模块的集合
   */
   public List<Module> getAllByPid(int pid);

实现类：

package com.zking.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.zking.entity.Module;
import com.zking.util.DBHelper;

/**
 * 数据库访问层
 * @author Administrator
 *
 */
public class ModuleDao implements IModuleDao{

	@Override
	public List<Module> getAllByPid(int pid) {
		List<Module> lm=new ArrayList<Module>();
		Connection con=null;
		PreparedStatement ps=null;
		ResultSet rs=null;
		try {
			//获得连接
			con=DBHelper.getCon();
			//定义sql语句
			String sql="select * from tb_module where pid=? order by sort";
			//获得执行对象
			ps=con.prepareStatement(sql);
			//给占位符赋值
			ps.setInt(1, pid);
			//获得结果集
			rs=ps.executeQuery();
			//遍历结果集
			while(rs.next()) {
				//实例化module对象
				Module m=new Module();
				m.setId(rs.getInt(1));
				m.setPid(rs.getInt(2));
				m.setText(rs.getString(3));
				m.setIconCls(rs.getString(4));
				m.setUrl(rs.getString(5));
				m.setSort(rs.getInt(6));
				//加到集合
				lm.add(m);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			DBHelper.myClose(con, ps, rs);
		}
		return lm;
	}
	

}

在业务逻辑层封装children

package com.zking.biz;

import java.util.List;

import com.zking.dao.IModuleDao;
import com.zking.dao.ModuleDao;
import com.zking.entity.Module;

public class ModuleBiz implements IModuleBiz{

	//调用数据库访问层
	IModuleDao imd=new ModuleDao();
	
	
	@Override
	public List<Module> getAllByPid(int pid) {//-1 20
		List<Module> ls = imd.getAllByPid(pid);
		for (Module m : ls) {
			if(m.getPid()==-1) {//说明是父节点  理应有子节点
				//递归
				m.setChildren(getAllByPid(m.getId()));
			}
		}
		return ls;
	}
	
	
}

Servlet:

package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.zking.biz.IModuleBiz;
import com.zking.biz.ModuleBiz;
import com.zking.entity.Module;


@WebServlet("/module.do")
public class IndexServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//设置编码方式
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=UTF-8");
		
		//获取out对象
		PrintWriter out = response.getWriter();
		
		//servlet调用biz biz调用dao
		IModuleBiz imb=new ModuleBiz();
		//调用方法
		List<Module> ls = imb.getAllByPid(-1);
		//把集合转成json格式字符串
		String str = JSON.toJSONString(ls);
		//把响应输送到客户端
		out.write(str);
		out.flush();
		out.close();
		
	}
}

index.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 引入公共页面 -->
<%@ include file="common/head.jsp" %>
<!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>

<script type="text/javascript">
	$(function(){
		$('#myTree').tree({    
		    url:gcp+'/module.do',//请求地址  
		    animate:true,//折叠或者展开的到时候是否显示动画效果
		    onDblClick: function(node){
				/* alert(node.text+"   "+node.id+"   "+node.state);  */ // 在用户双击的时候提示
				//alert(node.iconCls);//图标
				//拿到对应的后代节点的集合
				var cs = $('#myTree').tree('getChildren',node.target);
				if(cs.length==0){
					//判断是否存在
					 var f = $('#myTab').tabs('exists',node.text);
	    			 if(!f){//说明不存在
	    				//新打开一个选项卡(tab页)   iconCls:'icon-ok'
	    			    	$('#myTab').tabs('add',{    
	    			    	    title:node.text,   //标题 
	    			    	    content:'<iframe scrolling="no" frameborder="0" width="99%" height="99%" src="'+node.url+'"></iframe>', //内容
	    			    	    closable:true, //是否可关闭   
	    			    	    iconCls:node.iconCls
	    			    	});
	    			 }
	    			 else{//说明存在 让其对应选中
	    				 $('#myTab').tabs('select',node.text);
	    			 }
				}
				
				
			}
		}); 
	})
</script>
</head>
<body class="easyui-layout">   
    <div data-options="region:'north',split:true" style="height:99px;text-align:center">
    	
    </div>   
    <div data-options="region:'south',split:true" style="height:100px;text-align:center">
    	&copy;
    </div>   
    <div data-options="region:'west',title:'功能导航',split:true" style="width:150px;">
    
    	<!-- 左侧tree控件 -->
    	<ul id="myTree" class="easyui-tree">   
       		
		</ul>  
    	
    </div>   
    
    <div data-options="region:'center'" style="padding:5px;background:#fff;">
    
    <!-- 中间的tab控件 -->
    <div id="myTab" data-options="pill:true" class="easyui-tabs" style="width:99%;height:99%;">   
    <div data-options="iconCls:'icon-application-home'" title="首页" style="padding:20px;display:none;">   
           <img src="images/背景.jpg" width="100%" height="100%">
    </div>   
     
</div>
    
    </div>   
</body>  
</html>

注意：引入的公共页面是因为在其他页面封装了引入的五个类库

好啦，今天就到这里~~~

--mq--

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyUI03（tree后台工作）

上次我们是从JSON中拿到的数据，今天从数据库拿tree属性每个节点都具备以下属性： id：节点ID，对加载远程数据很重要。 text：显示节点文本。 state：节点状态，'open'或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。 checked：表示该节点是否被选中。 attributes: 被添加到节点的自定义属性。 children: 一个节点数组声明了若干节点。使用MVC实现根.
复制链接

扫一扫

专栏目录