easyui入门

第一步 导入 EasyUI

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>   
<script type="text/javascript" src="js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="Treejs/tree.js"></script>

这是我的导入路径可根据自己的要求更改
easyui树形菜单

这是效果图
[{

    "id":1,    
    "text":"Folder1",    
    "iconCls":"icon-save",    
    "children":[{    
        "text":"File1",    
        "checked":true   
    },{    
        "text":"Books",    
        "state":"open",    
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100    
        },    
        "children":[{    
            "text":"PhotoShop",    
            "checked":true   
        },{    
            "id": 8,    
            "text":"Sub Bookds",    
            "state":"closed"   
        }]    
    }]    
},{    
    "text":"Languages",    
    "state":"closed",    
    "children":[{    
        "text":"Java"   
    },{    
        "text":"C#"   
    }]    
}]  

这是里面的数据参数

这是 参数的作用以及默认值
url string 检索远程数据的URL地址。 null
method string 检索数据的HTTP方法。（POST / GET） post
animate boolean 定义节点在展开或折叠的时候是否显示动画效果。 false
checkbox boolean 定义是否在每一个借点之前都显示复选框。 false
cascadeCheck boolean 定义是否层叠选中状态。 true
onlyLeafCheck boolean 定义是否只在末级节点之前显示复选框。 false
lines boolean 定义是否显示树控件上的虚线。 false
dnd boolean 定义是否启用拖拽功能。 false
data array 节点数据加载。
queryParams object 在请求远程数据的时候增加查询参数并发送到服务器。 {}
formatter function(node) 定义如何渲染节点的文本。
filter function(q,node) 定义如何过滤本地展示的数据，返回true将允许节点进行展示。 json loader
loader function(param,success,error) 定义如何从远程服务器加载数据。返回false可以忽略本操作。该函数具备以下参数：
param：发送到远程服务器的参数对象。
success(data)：当检索数据成功的时候调用的回调函数。
error()：当检索数据失败的时候调用的回调函数。 json loader
loadFilter function(data,parent) 返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数：
data：加载的原始数据。
parent: DOM对象，代表父节点。
以及如何在数据库你获取

public class MenuDao extends JsonBaseDao {

	/**
	 * 
	* @Title: findmenu
	* @Description: (查询数据库里的菜单项)
	* @param map 前台页面上的参数集合
	* @return 因为是树形菜单所以不用分页
	* @return List<Map<String,Object>>  返回数据库的菜单集合  不能直接用于展示
	 * @throws Exception 
	 */
	public   List<Map<String, Object>> findmenu(Map<String, String[]> map) throws Exception{
		StringBuilder sb=new StringBuilder();
		sb.append("SELECT * from t_easyui_menu where true");
		/**
		 * 如果获取到菜单id
		 * 就将这个id作为父id去查询
		 */
		String paramvalue = JsonUtils.getParamvalue(map, "Menuid");
		if(StringUtils.isBlank(paramvalue)) {
			sb.append(" and parentid=-1");//最大的一级菜单
		}else {
			sb.append(" and parentid="+paramvalue);//用当前的id作为父id去查询
		}
/**
 * 这里使用的是通用方法
 */
		return super.executeQuery(null, sb.toString());
	}
	
	
	/**
	 * 
	* @Title: mapTreeNode
	* @Description: (传入单个数据库菜单map集合)
	* @param map  数据库菜单对象
	* @param treeNode   树形菜单节点
	* @throws Exception
	* @return void
	 */
	public  void      mapTreeNode(Map<String, Object> map,TreeNode treeNode) throws Exception {
		 treeNode.setId(map.get("Menuid").toString());
		 treeNode.setText(map.get("Menuname").toString());
		treeNode.setAttributes(map);
		//还要设置子节点
		   /**
	     * 菜单的id作为父id去查询
	     */
		    Map<String, String[]> parammap=new HashMap<>();
    		  parammap.put("Menuid",new String[] {map.get("Menuid").toString()});
	         List<Map<String, Object>>lsmap = findmenu(parammap);
	         /**
	          * 如果有子节点
	          * 就调用MaplisttoTreeNodeList方法
	          * 将子节点复制
	          */
	         if(lsmap.size()>0) {
	         List<TreeNode> maplisttoTreeNodeList = MaplisttoTreeNodeList(lsmap);
	         treeNode.setChildren(maplisttoTreeNodeList);
	         }
	}
	
	/**
	 * 
	* @Title: MaplisttoTreeNodeList
	* @Description: (将传入的list<map>集合转换为list<TreeNode>集合)
	* @param lsmap  传入的数据库对象集合
	* @return
	* @throws Exception
	* @return List<TreeNode>
	 */
	public   List<TreeNode>  MaplisttoTreeNodeList(List<Map<String, Object>> lsmap) throws Exception{
		TreeNode treeNode=null;
		List<TreeNode> ls=new ArrayList<>();
		for (Map<String, Object> map : lsmap) {
			treeNode=new TreeNode();
			mapTreeNode(map, treeNode);
			ls.add(treeNode);
		}
		return ls;
	}
	
	/**
	 * 
	* @Title: getTreeNode
	* @Description: (返回一个TreeNode的集合)
	* @param map
	* @return
	* @throws Exception
	* @return List<TreeNode>
	 */
public  List<TreeNode>  getTreeNode(Map<String, String[]> map) throws Exception {
	/**
	 * 第一次手动查到数据
	 */
	List<Map<String, Object>> findmenu = this.findmenu(map);
	List<TreeNode> maplisttoTreeNodeList = this.MaplisttoTreeNodeList(findmenu);
	return maplisttoTreeNodeList;
}
	
	
	
}