Easyui入门

最新推荐文章于 2024-04-14 16:01:44 发布

qq_43226824

最新推荐文章于 2024-04-14 16:01:44 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/qq_43226824/article/details/82833363

版权

1.使用easyui ,首先在easyui官网上下载；http://www.jeasyui.net/download/。

2.将下载好的zip压缩包解压之后，就可以放入项目中使用了。

3.在项目中需要引用

//前面四种引入地址是需要下载jra包导入的
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
//自定义插件的引入
<script type="text/javascript" src="${pageContext.request.contextPath}/js/index.js"></script>

4.给页面布局

<body class="easyui-layout">
<input id="ctx" type="hidden" value="${pageContext.request.contextPath}">
	<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content
	<ul id="menuTree"></ul>
	</div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
	<div data-options="region:'center',title:'Center'">
	
	<div id="menuTab" class="easyui-tabs" style="">   
    <div title="Tab1" style="padding:20px;display:none;">   
        首页   
    </div>   
</div>  
	</div>
</body>

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

Easyui 菜单栏(连数据库的做法)

package com.zking.dao;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.zking.entity.TreeNode;
import com.zking.util.EntityBaseDao;
import com.zking.util.JsonUtil;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;

public class MenuDao extends EntityBaseDao{
//从数据库中把菜单栏表中数据查出来
	public List<Map<String, Object>> menuList(Map<String, String[]> paramMap,PageBean pageBean) throws SQLException{
		String sql="select * from t_easyui_menu where true";
		String menuid = JsonUtil.getParamVal(paramMap, "Menuid");
		if(StringUtils.isNotBlank(menuid)) {
			sql+=" and parentid="+menuid;
		}else {
			sql+=" and parentid=-1";
		}
		return super.executeQuery(sql, pageBean, null);
	}
	//对数据库里的数据进行处理(把数据库里的数据转换成easyui格式)
	private void mapListToTreeNodeList(List<Map<String, Object>> list,List<TreeNode> TreeNodeList) throws SQLException {

		TreeNode treeNode=null;
		for (Map<String, Object> map : list) {
			treeNode=new TreeNode();
			mapToTreeNode(map,treeNode);
			TreeNodeList.add(treeNode);
		}
	}
//添加子菜单
	private void mapToTreeNode(Map<String, Object> map, TreeNode treeNode) throws SQLException {
		// TODO Auto-generated method stub
		treeNode.setId(map.get("Menuid").toString());
		treeNode.setText(map.get("Menuname").toString());
		treeNode.setAttributes(map);
		//treeNode.setChildren(children);
		Map<String, String[]> paramMap=new HashMap<>();
		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);
	    
	}
	
	 //这个方法的返回值，才是easyui的Tree组件
	public List<TreeNode> menuTreeList(Map<String, String[]> paramMap,PageBean pageBean) throws SQLException{
		List<Map<String, Object>> menuList = this.menuList(paramMap, null);
		List<TreeNode> treeNodeList=new ArrayList<>();
		mapListToTreeNodeList(menuList, treeNodeList);
		return treeNodeList;
		
	}
	
}