【EasyUI之Layout(布局)】

最新推荐文章于 2024-04-08 13:00:00 发布

么卡

最新推荐文章于 2024-04-08 13:00:00 发布

阅读量1.3k

点赞数 2

分类专栏：前端UI 文章标签： EasyUI

本文链接：https://blog.csdn.net/weixin_43943548/article/details/91473443

版权

前端UI 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

今天要给大家带来的是EasyUI
嘛，之前也说了下EasyUI，其实现在的EasyUI已经用不上了，因为现在普遍的在用bootstrap啊，或者layui等。

easyui=jquery+html4（用来做后台的管理界面）
bootstrap=jquery+html5

但是呢，因为EasyUI的出现时间比较久，那么相对应的完善的也是比较好的，所以单论功能来讲的话，学习前端框架的话还是学EasyUI好一些。

Layout之panel(面板)

额，面板是什么。
就是这个
在这里插入图片描述
主要是它提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。

加入到web页面的第一种方法
用html代码：

<div id="p" class="easyui-panel" title="第一个面板 "    
style="width:500px;height:150px;padding:10px;background:#fafafa;"   
data-options="iconCls:'icon-save',closable:true, collapsible:true,minimizable:true,maximizable:true">   
    <p>panel content.</p>   
    <p>panel content.</p>  
 </div>

这个只需要知道easyui-panel就差不多了。
加入到web页面的第二种方法
搞一个id为p的div

<div id="p"  title="第二个面板 "    

 </div>

然后用到javaScript

$('#p').panel({    
  width:500,    
  height:150,    
  title: 'My Panel',    
  tools: [{    
    iconCls:'icon-add',    
    handler:function(){alert('new')}    
  },{    
    iconCls:'icon-save',    
    handler:function(){alert('save')}    
  }]    
});

这样就没问题，的面板

Layout之树形tree(目录栏)

树形菜单是比较难得，因为它的结构是已经订好了的，如果你不按照格式来，是用不了Layout的目录,
结构：

[{
	"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"
	}]
}]

只有这种结构才能运行
一：id , text , children , attributes
所以我们要写一个实体类：TreeNode

public class TreeNode {
	private String id;
	private String text;
	private List<TreeNode> children = new ArrayList<>();
	private Map<String, Object> attributes = new  HashMap<String, Object>();
	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 + "]";
	}
	

}

然后需要从数据库中获取到信息，但是获取的信息是不会跟Layout的格式一样的，所以需要转换。
转换的过程可能比较麻烦：

public class MenuDao extends JsonBaseDao{
	
	/*格式：menu:			类型				意思			
	 * 			menuid     String			表id
	 * 			menuname   String			名字
	 * 			menuURL    String			路径
	 * 			parentid   String			上一级的id
	 * 		treeNode:
	 * 			id         String			节点的id
	 * 			text	   String			节点的名字
	 * 			children   List<treeNode>	该节点下的子节点
	 * 			attributes map<String,Object>节点的对应路径
	 * 
	 	*/	
	
	//流程：第一步
	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> treeNodesList = new ArrayList<>();//先搞一个容器准备装着
		menuList2TreeNodeList(listMenu, treeNodesList);//调用来将查询过来的menu数据转换为treeNode数据
		
		return treeNodesList;
	}
	
	/**
	 * 查询menu表的数据
	 * @param map
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	//流程：第二步
	public List<Map<String, Object>> listMenu(Map<String, String[]> map,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		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 super.executeQuery(sql, pageBean);
	}

	/**转换的单个转换
	 * 
	 * menu表的数据不符合easyui树形展示的数据格式
	 * 需要转化成easyui所能识别的数据格式
	 * 
	 * @param map
	 * @param treeNode
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	//流程：第四步
	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()});//给参数中加入一个id的参数
			List<Map<String, Object>> listMenu = this.listMenu(jspMap, null); // 重点!!! 如果第二次查询没有这个id的话就结束,否则 二，三，四流程继续
			List<TreeNode> treeNodeList = new ArrayList<>();  //用一个List<TreeNode>集合准备装着子节点的所有东西
			menuList2TreeNodeList(listMenu, treeNodeList); //如果有的话就继续运行，否则不运行
			treeNode.setChildren(treeNodeList); //将treeNode的children属性赋值
	}
	
	//流程：第三步
	private void menuList2TreeNodeList(List<Map<String, Object>> mapList,List<TreeNode> treeNodeList) throws InstantiationException, IllegalAccessException, SQLException{
			TreeNode treeNode = null;		//准备最后放入集合内部TreeNode
			for (Map<String, Object> map : mapList) {//遍历List<Menu>中然后两者相互转换。因为最后的结果就是List<TreeNode>
				treeNode = new TreeNode();
				menu2TreeNode(map, treeNode);//调用到第一流程中的最后一步：为TreeNode设值
				treeNodeList.add(treeNode);//将转换完成的加入到treeNode
			}
	}
	
}

写好dao 方法后就可以写个 MenuAction了

public class MenuAction extends ActionSupport {
	private MenuDao  menuDao = new MenuDao();
	
	
	public String treeMenu(HttpServletRequest req, HttpServletResponse resp) {
		
		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 (InstantiationException | IllegalAccessException | SQLException e) {
			e.printStackTrace();
		} catch (JsonProcessingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
		return null;
	}
	
}

mvc.xml的配置

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

在一运行的时候就执行：

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

效果图：
在这里插入图片描述

Layout之tabs(选项卡)

一个选项卡是一个界面能多个运用的基础

效果图
在这里插入图片描述

<div id="menuTabs" class="easyui-tabs" >   
    <div title="Tab1" style="padding:20px;display:none;">   
       欢迎使用   
    </div>  
</div>

重点在于运用到了树形tree的难点。如果树形搞好了也就没什么问题了

给它添加一个点击事件：

$(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');    
		    	        }    
		    	    }]    
		    	}); 
	    	}
	    	
	    }	
	   
	}); 

})

并且可以判断重复。

Layout之accordion(分类)

什么叫分类呢，其实学过bootstrap的人都知道，就类似于手风琴效果。

更方便大家寻找对应的东西。

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">   
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">   
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>   
        <p>第一个</p>   
    </div>   
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">   
        第二个  
    </div>   
    <div title="Title3">   
     	第三个   
    </div>   
</div>  
</div>

这就行啦，可是如果不加事件的话,也没什么事

一些功能以后再重新创建它，这个感觉上是就是那种很快的感觉。

不太好看

$('#aa').accordion({    
	    animate:false   
	});

这个就是在选中的面板上刷新，

var pp = $('#aa').accordion('getSelected'); // 获取选择的面板 
	if (pp){    
	    pp.panel('refresh','new_content.php');  // 调用'refresh'方法刷新 
	}

在这里插入图片描述

不停的刷。。。。

总结

EasyUI里最难的就是格式的转换了，我还得花时间去消化消化。。。

么卡

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录