欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

EASYUI

程序员文章站 2024-03-21 12:45:10
...

easyUI学习笔记

  • easyUI学习必备 easyUI组件 和 easyUI API 官网或者csdn下载
  • esayui组件的导入顺序不可以改变，因为插件的使用是依赖上一个插件，导致效果出不来
  • 使用Jquery Easy UI要导入的js顺序

<1>.引用Jquery的Js文件

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-easyui-1.5.1/jquery.min.js"></script>

<2>.引用Easy UI的Js文件

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

<3>.导入Easy UI的主题Css文件

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-easyui-1.5.1/themes/default/easyui.css">

<4>.导入Easy UI的图标Css文件

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-easyui-1.5.1/themes/icon.css">

<5>.引用Easy UI的国际化文件 以下为让它显示中文

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>

<6>.页面上加上UTF-8编码 防止jquery.easyui.min.js 内容乱码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

1 layout布局

  1. 使用完整页面创建布局
<body class="easyui-layout">   
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>   
</body>

2 Menu菜单

<div id="mm" class="easyui-menu" style="width:120px;">   
    <div>New</div>   
    <div>   
        <span>Open</span>   
        <div style="width:150px;">   
            <div><b>Word</b></div>   
            <div>Excel</div>   
            <div>PowerPoint</div>   
        </div>   
    </div>   
    <div data-options="iconCls:'icon-save'">Save</div>   
    <div class="menu-sep"></div>   
    <div>Exit</div>   
</div>

3 tabs选项卡

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div>

4 jsp页面和后台交互的核心代码

public class MenuDao extends JsonBaseDao{
	/**
	 * 查询后台所需要展示的菜单表
	 * 该数据转换成json对象，是不符合esayui组件展示的json格式
	 * @param paramap
	 * @param pageBean
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	public List<Map<String, Object>> menuList(Map<String, String[]> prameMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String Menuid = JsonUtils.getParmeMap(prameMap, "Menuid");
		String sql ="select * from t_easyui_menu where 1=1";
		if(StringUtils.isNotBlank(Menuid)) {
			sql +=" and parentid = "+Menuid;
		}else {
			sql +=" and parentid = -1";
		}
		return super.executeQuery(sql, pageBean);
		}
	
		
			/**此时数据库查出来的数据是不能展示在页面然后通过此方法转成即可展示的
	/
	public 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);
		/*
		 * 当前节点的id当做父id
		 */
		Map<String, String[]> prameMap = new HashMap<>();
		prameMap.put("Menuid", new String[] {treeNode.getId()});
		List<Map<String, Object>> menuList = this.menuList(prameMap, null);
		List<TreeNode> treeNodeList = new ArrayList<>();
		mapListToTreeNodeList(menuList, treeNodeList);
		treeNode.setChildren(treeNodeList);
		
	}
	

	
	public 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的格式
	 * @param prameMap
	 * @param pageBean
	 * @return
	 * @throws InstantiationException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public List<TreeNode> menuTreeList(Map<String, String[]> prameMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		List<Map<String,Object>> menuList = this.menuList(prameMap, null);
		List<TreeNode> treeNodeList = new ArrayList<>();
		mapListToTreeNodeList(menuList, treeNodeList);
		return treeNodeList;
		
	}

上一篇： ssh免密登录

下一篇： java WebSocket 服务端代码  

推荐阅读