easyui入门

2024-03-17 18:21:52

ui框架：

分为三种：
easyui=jquery+htm14(用来做后台的管理界面)
bootstrap=jquery+html5（收费）
layui(现在较流行，免费，)
之所以将相对low的easyui,主要还是bootstrap部分收费，不适用，layui有些bug，不稳定。就来和大家讲讲easyui.（组件式开发）
首先，我们来个简单的布局（导入j包）
案例一：
1、通过layout布局
下载程序库并导入EasyUI的CSS和Javascript文件到您的页面。

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">   
<script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>   
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

index.jsp

<%@ 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">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/easyui5/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/easyui5/jquery.easyui.min.js"></script>  

<title>Insert title here</title>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'"></div>
</body>
</html>

(在导入之后，找到正确的全路径)

效果如下：
easyui入门
（当然我们在配置路径的时候，要特别主要，不要引错，可以在调制的时候找到，同时，我们在前端js引入也要注意顺序！）

案例二：
2、通过tree加载菜单
组件式开发
在west展示Tree
在index.jsp里面找到全路径：

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>

在对应的位置：

<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
	后台管理界面的菜单
	<ul id="tt"></ul>  
	</div>

在同级位置建立index.js
导入案例：

[{
	"id":1,
	"text":"My Documents",
	"children":[{
		"id":11,
		"text":"Photos",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"Friend"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]


$(function(){
	$('#tt').tree({    
	    url:'tree_data1.json'   
	});  

})

效果如下：
easyui入门
现在，我们只要做加载菜单
通过描述对象转成json串
写一个实体类：（）

package com.zking.entity;

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

public class TreeNode {
	private String id;
	private String text;
	private List<TreeNode> children = new ArrayList<>();
	private Map<String, Object> attributes = new HashMap<>();
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public List<TreeNode> getChildren() {
		return children;
	}
	public void setChildren(List<TreeNode> children) {
		this.children = children;
	}
	public Map<String, Object> getAttributes() {
		return attributes;
	}
	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}
	@Override
	public String toString() {
		return "TreeNode [id=" + id + ", text=" + text + ", children=" + children + ", attributes=" + attributes + "]";
	}
	
}

写dao方法继承JsonBaseDao

public List<TreeNode> list(Map<String, String[]> map ,PageBean pageBean){
		return null;
		
	}

但我们在这个方法里面不能直接去写sql语句
因为查出来的并不是TreeNode,是menu表

/**
	 * 查询menu表的数据
	 * @param map
	 * @param pageBean
	 * @return
	 */
	public List<Map<String, Object>> listMenu(Map<String, String[]> map ,PageBean pageBean){
		String sql = "select * from t_easyui_menu where true";
		String id = JsonUtils.getParamVal(map, "id");
		if(StringUtils.isNotBlank(id)) {
			sql = sql + " and parentid = "+id;
		}else {
			sql = sql + " and parentid = -1";
		}
		return null;
		
	}

这是子节点，我们需要把子节点的数据插入到父节点去。
需要写两个方法
1.目前查出的数据格式是menu表，不是id对应text,需要把menu数据转成对应数据

/**
	 * menu表的数据不符合easyui树形展示的数据格式
	 * 需要转成easyui所能识别的数据格式
	 * @param map
	 * @param treeNode
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	private void menu2TreeNode(Map<String, Object> map,TreeNode treeNode) throws InstantiationException, IllegalAccessException, SQLException {
		treeNode.setId(map.get("Menuid").toString());
		treeNode.setText(map.get("Menuname").toString());
		treeNode.setAttributes(map);
		
		//treeNode.setChildren(children);
		Map<String, String[]> jspMap = new HashMap<>();
		jspMap.put("id", new String[] {treeNode.getId()});
		List<Map<String, Object>> listMenu = this.listMenu(jspMap, null);
		List<TreeNode> treeNodeList = new ArrayList<>();
		menuList2TreeNodeList(listMenu, treeNodeList);
		treeNode.setChildren(treeNodeList);
	}
	private void menuList2TreeNodeList(List<Map<String, Object>> mapList,List<TreeNode> treeNodeList) throws InstantiationException, IllegalAccessException, SQLException {
		TreeNode treeNode = null;
		for (Map<String, Object> map : mapList) {
			treeNode = new TreeNode();
			menu2TreeNode(map, treeNode);
			treeNodeList.add(treeNode);
		}
	}

调用方法：

public List<TreeNode> list(Map<String, String[]> map ,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		List<Map<String, Object>> listMenu = this.listMenu(map, pageBean);
		List<TreeNode> treeNodeList = new ArrayList<>();
		menuList2TreeNodeList(listMenu, treeNodeList);
		return treeNodeList;
		
	}

接下来 ，写web层（继承ActionSupport）

package com.ly.web;

import java.sql.SQLException;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.ly.dao.MenuDao;
import com.ly.entity.TreeNode;
import com.ly.framework.ActionSupport;
import com.ly.util.ResponseUtil;

public class MenuAction extends ActionSupport {
	private MenuDao menuDao = new MenuDao();
	public String treeMenu(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException {
		try {
			List<TreeNode> list = this.menuDao.list(req.getParameterMap(), null);
			ObjectMapper om = new ObjectMapper();
			//将list集合转换成json串
			String jsonStr = om.writeValueAsString(list);
			ResponseUtil.write(resp, jsonStr);
		} catch ( Exception e) {
			e.printStackTrace();
		}
		return null;
		
	}
}

mvc.xml配置

<action path="/menuAction" type="com.ly.web.MenuAction">
	</action>

效果如下：
easyui入门
左边部分搞定了，我们还要做到点击左边显示右边文字：
选项卡tabs

$(function(){
	$('#tt').tree({    
	    url:'menuAction.action?methodName=treeMenu'   ,
	    onClick:function(node){
	    	alert(node.text);
	    }
	});  

})

jsp页面：

</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'"></div>
	<div id="menuTabs" class="easyui-tabs" style="">   
    <div title="Tab1" style="padding:20px;display:none;">   
        欢迎使用  
    </div>   
   
</div>

js:

$(function(){
	$('#tt').tree({    
	    url:'menuAction.action?methodName=treeMenu'   ,
	    onClick:function(node){
	    	var content = '<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>';
	    	if($('#menuTabs').tabs('exists',node.text)){
	    		$('#menuTabs').tabs('select',node.text);
	    	}else{
	    		$('#menuTabs').tabs('add',{    
		    	    title:node.text,    
		    	    content:content,    
		    	    closable:true,    
		    	    tools:[{    
		    	        iconCls:'icon-mini-refresh',    
		    	        handler:function(){    
		    	            alert('refresh');    
		    	        }    
		    	    }]    
		    	});  

		    	alert(node.text);
	    	}
	    }
	});  

})

效果如下：
easyui入门

上一篇：easyui(一)


下一篇：如何修改jquery easyui select中option背景颜色