阿圆-Easyui入门

1.ui框架

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

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

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

<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> （路径一定要跟项目里面的路径对应）

首先需要去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标签）

1.ui框架

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

猜你喜欢