EasyUI-前端工作

_十二.

已于 2022-04-13 13:53:21 修改

阅读量523

点赞数 2

文章标签： easyui

于 2022-04-12 12:51:32 首次发布

本文链接：https://blog.csdn.net/weixin_57287269/article/details/124119897

版权

1. 动态绑定Tree菜单数据&动态添加选项卡

实现效果

实现代码

2. 菜单数据绑定

1. 动态绑定Tree菜单数据&动态添加选项卡

实现效果

实现代码

$(function(){
		// 绑定树形菜单数据
		$('#menuTree').tree({    
		    url:path + '/ModuleServlet', //数据返回的必须是JSON格式  
		   	// 给 tree节点添加事件
		    onDblClick: function(node){ //node表示每一个节点（父节点/子节点）
		    	// 获取节点的子节点集合（getChildren）
		    	var children = $("#menuTree").tree("getChildren",node.target)
				if(children <= 0){//没有子节点
					//解决重复添加选项卡
					if(!$("#myTab").tabs("exists",node.text)){
						// 动态添加选项卡
				    	$('#myTab').tabs('add',{    
				    	    title:node.text,    
				    	    content:'<iframe frameborder=0 src='+path+'/'+node.url+' style="width:100%;height:100%" />',    
				    	    closable:true, //设置选项卡是否显示关闭按钮 默认false
				    	}); 
					}else{// 否则，当前点击的菜单已经添加了选项卡，那么就切换到当前所点击的菜单对应的选项卡
						$("#myTab").tabs("select",node.text);
					}
				}
			}
		}); 
	})

html

<body class="easyui-layout">   
    <div data-options="region:'north',title:'网上书城',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'版本/链接',split:true" style="height:100px;"></div>   
    <div data-options="region:'west',title:'菜单管理',split:true" style="width:200px;">
	    <!-- 左侧菜单绑定 -->
	    <ul id="menuTree" class="easyui-tree"></ul> 
    </div>   
    <div data-options="region:'center',title:'内容区域'" style="background:#eee;">
    	<div id="myTab" class="easyui-tabs" style="width:100%;height:100%;">   
		    <div title="首页" style="padding:20px;display:none;">   
		        	首页区域内容
		    </div>   
		</div>  
    </div>   
</body>

2. 菜单数据绑定

实现代码

dao方法

public class ModuleDao implements IModuleDao{
	private List<Module> listModule;
	private com.zking.entity.Module module;
	private Connection con;
	private String sql;
	private PreparedStatement ps;
	private ResultSet rs;
	
	@Override
	public List<Module> query(Integer pid) throws SQLException{
		listModule = new ArrayList<>();
		con = DBAccess.getConnection();
		sql = "select id,pid,text,url from t_module where pid = ? order by sort";
		ps = con.prepareStatement(sql);
		ps.setInt(1, pid);
		rs = ps.executeQuery();
		while(rs.next()) {
			module = new Module();
			module.setId(rs.getInt("id"));
			module.setPid(rs.getInt("pid"));
			module.setText(rs.getString("text"));
			module.setUrl(rs.getString("url"));
			listModule.add(module);
		}
		DBAccess.close(con, ps, rs);
		return listModule;
	}	
}

servlet

@WebServlet("/ModuleServlet")
public class ModuleServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			req.setCharacterEncoding("utf-8");
			resp.setContentType("text/html;charset=utf-8");
			PrintWriter out = resp.getWriter();
		
		
			IModuleBiz imb = new ModuleBiz();
			List<Module> listModule = imb.query(-1);
			// 将节点集合数据listModule转换成JSON数据
			String jsonString = JSON.toJSONString(listModule);
			
			out.write(jsonString);
			out.flush();
			out.close();
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

实体类

public class Module {
	private Integer id;// 节点 id
	private Integer pid;// 节点父 id
	private String text;// 节点标题
	private String icon;// 节点图标
	private String url;// 节点对应的页面地址(只有子节点的这个属性才有值)
	private int sort;// 排序
	private List<Module> children = new ArrayList<>();// 存放当前节点的子节点集合

	public Integer getId() {
		return id;
	}

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

	public Integer getPid() {
		return pid;
	}

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

	public String getText() {
		return text;
	}

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

	public String getIcon() {
		return icon;
	}

	public void setIcon(String icon) {
		this.icon = icon;
	}

	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;
	}

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