easyUI的入门

ui框架
easyui=jquery+html4（用来做后台的管理界面）

1、通过layout布局
    2、通过tree加载菜单
    3、通过菜单去打开不同的tab页
    var content = '<iframe scrolling="no" frameborder="0" src="'+menuUrl+'" width="99%" height="99%"></iframe>';
 

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

将css和js给导入进去

[{    
    "id":1,    
    "text":"Folder1",    
    "iconCls":"icon-save",    
    "children":[{    
        "text":"File1",    
        "checked":true   
    },{    
        "text":"Books",    
        "state":"open",    
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100    
        },    
        "children":[{    
            "text":"PhotoShop",    
            "checked":true   
        },{    
            "id": 8,    
            "text":"Sub Bookds",    
            "state":"closed"   
        }]    
    }]    
},{    
    "text":"Languages",    
    "state":"closed",    
    "children":[{    
        "text":"Java"   
    },{    
        "text":"C#"   
    }]    
}]  

将tree的布局也给导进去

之后去数据库里面捞tree的字段 将表格给打印出来

同时也要建立对于的类

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

但是这是在数据库里面区出来的是不能直接展示的，所以要把他转成json格式。

/**
	 * 查询后台需要属性展示的菜单表数据
	 * 注意：该数据转换成json对象，是不符合easyUI的tree主键展现的json格式 
	 * @param map
	 * @param pageBean
	 * @return
	 * @throws Exception 
	 */
		public List<Map<String, Object>>  menuList(Map<String, String[]> map,PageBean pageBean) throws Exception{
			String sql="select * from t_easyui_menu where true";
			String menuid = JsonUtils.getMapVal(map, "Menuid");
			if(StringUtils.isNotBlank(menuid)) {
				sql+=" and parentid="+menuid;
			}else {
				sql+=" and parentid=-1";
			}
			return super.executeQuery(pageBean, sql);
		}
		
		/**
		 * 查出来的数据不能战术，转换为可展示的数据
		 * @param map
		 * @param treeNode
		 * @throws Exception 
		 */
		private void mapToTreeNode(Map<String , Object > map ,TreeNode treeNode) throws Exception {
			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> treeNodeslist) throws Exception {
			TreeNode treeNode=null;
			for (Map<String, Object> map : list) {
				treeNode = new TreeNode();
				mapToTreeNode(map, treeNode);
				treeNodeslist.add(treeNode);
			}
		}
		
		/**
		 * 这个方法的返回值，才是符合easyui的tree组件需要的
		 * @param map
		 * @param pageBean
		 * @return
		 * @throws Exception
		 */
		public List<TreeNode> menuTreeList(Map<String, String[]> map,PageBean pageBean) throws Exception{
			List<Map<String, Object>> menuList = this.menuList(map, pageBean);
			List<TreeNode> TreeNodelist= new ArrayList<>();
			mapListToTreeNodeList(menuList, TreeNodelist);
			return TreeNodelist;
		}
		

这里会用递归给转成json格式

给表格加上事件，这里我加的是单击事件。

$(function(){
	$('#menuTree').tree({    
    url:'menuAction.action?methodName=menuTreeList',
    onClick: function(node){
//		alert(node.attributes.menuURL);// 在用户点击的时候提示
//判断是第几次进入  如果是第二次就给他选中之前打开的页面，如果不是就给他打开一个新的页面
    	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:true   
    		});  
    	}
	}
});  
});