jQuery easyUI入门

引用官网介绍：http://www.jeasyui.net/
easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。

easyUI下载地址：http://www.jeasyui.com/download/v16.php
案例：
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>

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

2、通过tree加载菜单
导入EasyUI的tree_data1.json文件，放在WebContent下

 	**创建一个实体类**
    private String id;
	private String text;
	//描述父子节点，用于递归字节点.
	private List<TreeNode> children = new ArrayList<>();
	//树形菜单的节点，除了id以及展示文本，可能还伴有跳转页面，或者图片展示，等等一系列的描述都将其放到属性的map集合中
	private Map<String, Object> attributes = new HashMap<>();

//jsonBaseDao

**dao包**
public class MenuDao extends JsonBaseDao{
	/**
	 * 查询后台需要树形展示的菜单表数据
	 * 注意：该数据转换成json对象，是不符合easyui的tree组件展现的json格式
	 * @param paramMap
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<Map<String, Object>> menuList(Map<String, String[]> paramMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql = "select * from t_easyui_menu where true";
		String menuId = JsonUtils.getParamVal(paramMap, "Menuid");
		//如果Menuid不为空就通过menuid去查，如果为空的话我们就给他通过默认值
		if (StringUtils.isNotBlank(menuId)) {
			sql += " and parentid="+menuId;
		} else {
			sql += " and parentid=-1";
		}
		return super.executeQuery(sql, pageBean);
	}
	/**
	 * 直接查出来的数据不能展示，转换成可展示的数据
	 * @param map
	 * @param treeNode
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	private void mapToTreeNode(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);
		
		Map<String, String[]> paramMap = new HashMap<>();
		//把当前节点的id当作父id,查出所有的子节点
		paramMap.put("Menuid", new String[] {treeNode.getId()});
		List<Map<String, Object>> menuList = this.menuList(paramMap, null);
		List<TreeNode> treeNodeList = new ArrayList<>();
		mapListToTreeNodeList(menuList, treeNodeList);
		treeNode.setChildren(treeNodeList);
	}
	
	private void mapListToTreeNodeList(List<Map<String, Object>> list,List<TreeNode> treeNodeList) throws InstantiationException, IllegalAccessException, SQLException {
		TreeNode treeNode = null;
		for (Map<String, Object> map : list) {
			treeNode = new TreeNode();
			mapToTreeNode(map, treeNode);
			treeNodeList.add(treeNode);
		}
	}
	/**
	 * 符合easyui的tree组件所需要的json格式
	 * @param paramMap
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<TreeNode> menuTreeList(Map<String, String[]> paramMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		List<Map<String,Object>> menuList = this.menuList(paramMap, pageBean);
		List<TreeNode> treeNodeList = new ArrayList<>();
		mapListToTreeNodeList(menuList, treeNodeList);
		return treeNodeList;
	}
}

**web包**
	private MenuDao menuDao = new MenuDao();
	public String menuTreeList(HttpServletRequest req,HttpServletResponse resp) {
		try {
			List<TreeNode> treeList = this.menuDao.menuTreeList(req.getParameterMap(), null);
			ObjectMapper om = new ObjectMapper();
			ResponseUtil.write(resp, om.writeValueAsString(treeList));
		} catch (InstantiationException e) {
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (JsonProcessingException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}

3、通过菜单去打开不同的tab页

//这段div加在<div data-options="region:'center',title:'Center'"></div>中
	<div id="menuTab" class="easyui-tabs" style="">   
		   <div title="Tab1" style="padding:20px;display:none;">   
		       tab1    
		 </div>   
	</div>

	$(function(){
	//树形菜单
	$('#menuTree').tree({
		url:'menuAction.action?methodName=menuTreeList',//去数据库查询的url
		onClick: function(node){
		//如果选项卡打开了就选中打开的选项卡，没打开就添加一个选项卡
			if ($('#menuTab').tabs('exists',node.text)) {
				$('#menuTab').tabs('select',node.text)
			}else{
			//添加选项卡
				$('#menuTab').tabs('add',{    
					title:node.text,    
					content:'<iframe scrolling="no" frameborder="0" src="'+node.attributes.menuURL+'" width="99%" height="99%"></iframe>',    
					closable:false
				}); 
			}
		}
	});
})

猜你喜欢