阿圆-Easyui入门

1.ui框架

easyui=jquery+html4（用来做后台的管理界面 界面没有bootstrap那么美观）
bootstrap=jquery+html5

下面用easyui去做一个简单的界面：

1、通过layout布局
    2、通过tree加载菜单
    3、通过菜单去打开不同的tab页

1. <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">  
2. <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">  
3. <script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>  
4. <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>  （路径一定要跟项目里面的路径对应）

首先需要去jQuery EasyUI 官方API文档中找到layout布局样式代码， 把想对应的代码放在jsp页面，（上面要先引用easyui的标签）下面需要展示tree型菜单，直接从api里面找代码是死的，我们要把这个tree变成数据库里面的，就得把要导的包都全部放进这个项目里面，然后写dao方法查到数据库里面这些要展示到tree的数据，直接查到的数据是不能展示到页面 要通过实体类把那些属性放进去（tree有id text 还有每个下面的子节点 还有其他属性 就通过下面方法互相调用来转换成可展示的对象）

//根据id查询不能直接展示
	public List<Map<String,Object>> list(Map<String,String[]> map,PageBean page) throws InstantiationException, IllegalAccessException, SQLException{
		String sql="select * from t_easyui_menu where true";
		String menuid = JsonUtil.getParam(map,"Menuid");
		if(StringUtils.isNotBlank(menuid)) {
			sql+=" and parentid="+menuid;
		}else {
			sql+=" and parentid=-1";
		}
		return super.execute(sql, page);
	}
	
	private void menuToTree(Map<String,Object> map,TreeNode treenode) throws InstantiationException, IllegalAccessException, SQLException {
		//把每一个对象转换成可以到页面展示的
		treenode.setId(map.get("Menuid").toString());//每一个对象id
		treenode.setText(map.get("Menuname").toString());//每一个对象name
		treenode.setMap(map);//每一个对象所有属性
		List<TreeNode> list=new ArrayList<>();//假如这个对象有子节点（下面的子类）如没有就不会进行下面的
		Map<String,String[]> parMap=new HashMap<String, String[]>();//写一个可获取属性的map
		//把当前id当作子节点父id 查出所有子节点
		parMap.put("Menuid", new String[] {treenode.getId()});//通过它拿到当前节点的id
		List<Map<String, Object>> list2 = this.list(parMap,null);//调用上面的方法根据拿到的id再查一次
		this.menulistToTreelist(list2, list);//查到有子节点再调下面查集合里面的方法把每一个子节点赋值
		treenode.setList(list);
	}
	//给集合里面的对象赋值（这个是为了给集合设置值）
	private void menulistToTreelist(List<Map<String,Object>> list,List<TreeNode> listTreeNode) throws InstantiationException, IllegalAccessException, SQLException {
		TreeNode treenode=null;//new一个实体类
		for(Map<String,Object> map:list) {//遍历这个Map<String,Object>的集合 拿到集合里面每一个map
			treenode=new TreeNode();//初始化每一个对象
			this.menuToTree(map, treenode);//调用上面给对象赋值的方法给每一个对象赋值
			listTreeNode.add(treenode);//用这个treenode集合把每一个map装进去
		}
	}
	/**
	 * 这个方法返回值 才是符合easyui的tree组件所需的json格式
	 * @param map
	 * @param page
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<TreeNode> Treelist(Map<String,String[]> map,PageBean page) throws InstantiationException, IllegalAccessException, SQLException {
		List<Map<String, Object>> list2 = this.list(map,page);//调用上面方法查到的是不能直接展示的
		List<TreeNode> list=new ArrayList<>();//写一个TreeNode集合
		this.menulistToTreelist(list2, list);//用这个集合赋值方法把list2转换成list就可展示
		return list;	
	}

然后通过servlet来调用最后这个可展示的方法，页面写一个<ui id="tree"></ui> 也是通过api找到的代码 页面上调用一个js页面来写那些js代码，就拿到这个tree的id来获取tree型菜单，后面就是点击菜单跳出对应的选项卡。

$('#tree').tree({
		url:'Treeservlet.action?methodName=TreeList',//调用那个配置的servlet里的方法就可拿到tree型菜单
      //当点击它的时候出现一个选项卡
		onClick:function(node){
			if($('#menutabs').tabs('exists',node.text)){//如果这个名字的选项卡存在的话
				$('#menutabs').tabs('select',node.text)//就选中这个选项卡
			}else{		//否则就重新加一个选项卡
				$('#menutabs').tabs('add',{    
					title:node.text,    //下面是跳到它自己的路径 map里的一个属性
					content:' <iframe scrolling="no" frameborder="0" src="'+node.map.menuURL+'" width="99%" height="99%"></iframe>',    
					closable:false,   
				});  
			}
		}
	});

2. easyui控件的二种创建方式

2.1 直接通过html标签创建(定义easyui属性)
 2.2写一个 JS创建（jsp页面引入这个js标签）