jQueryeasyUI基础介绍

第一次：jquery easyui

query easyui ui框架（可以去官网下载jquery easyui的api和程序库）
easyui=jquery+html4（用来做后台的管理界面）
bootstrap=jquery+html5
案例：
1、通过layout布局
2、通过tree加载菜单
3、通过菜单去打开不同的tab页
var content = '<iframe frameborder="0" height="99%" scrolling="no" src="'+menuurl+'" width="99%"></iframe>';

 

1. 布局
 1.1layout

在下载的程序库里?jquery-easyui-1.5.1\demo\layout\full.html 找到full.html模板复制body的内容（包含body），导入easyui的css和javascript文件到您的页面。

<%@ page language="java" contenttype="text/html; charset=utf-8"
    pageencoding="utf-8"%>

<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>

north region

树形菜单

east region

south region

首页

2. tree、tabs
创建一个实体类（实现get、set方法和tostring方法）

    private string id;
	private string text;
	//描述父子节点，用于递归子节点
	private list children=new arraylist<>();
	//树形菜单节点，除了id和展示文本，可能还伴有页面跳转和图片展示等等，都放到属性的map集合中
	private map attributes=new hashmap<>();

dao层

public class menudao extends jsonbeandao {

	/**
	 * 查询需要展示树形菜单的数据 
	 * 注意：该数据转json对象，是不符合easyui的tree组件展示的json格式
	 * @param parammap
	 * @param pagebean
	 * @return
	 * @throws instantiationexception
	 * @throws illegalaccessexception
	 * @throws sqlexception
	 */
	public list> menulist(map parammap, pagebean pagebean)
			throws instantiationexception, illegalaccessexception, sqlexception {
		string menuid = jsonutils.getparanval(parammap, "menuid");
		string sql = "select * from t_easyui_menu where true";
        //如果menuid不为空就通过menuid去查，如果为空的话我们就给他通过默认值
		if (stringutils.isnotblank(menuid)) {
			sql += " and parentid=" + menuid;
		} else {
			sql += " and parentid='-1' ";
		}
		return super.executequery(sql, pagebean);
	}

	
	/**
	 *	直接查出来的数据不能展示，转换成可展示的数据
	 * @param map
	 * @param treenode
	 * @throws sqlexception 
	 * @throws illegalaccessexception 
	 * @throws instantiationexception 
	 */
	private void maptotreenode(map map, treenode treenode) throws instantiationexception, illegalaccessexception, sqlexception {
		treenode.setid(map.get("menuid").tostring());
		treenode.settext(map.get("menuname").tostring());
		treenode.setattributes(map);
		map parammap = new hashmap<>();
//		把当前节点的id当作父id去查子节点
		parammap.put("menuid", new string[] {treenode.getid()});
		list> menulist = this.menulist(parammap, null);
		list treenodelist = new arraylist<>();
		maptotreenodelist(menulist, treenodelist);
		treenode.setchildren(treenodelist);
	}

	private void maptotreenodelist(list> list, list treenodelist) throws instantiationexception, illegalaccessexception, sqlexception {
		treenode treenode=null;
		for (map map : list) {
			treenode = new treenode();
			maptotreenode(map, treenode);
			treenodelist.add(treenode);
		}
	}
	
	
	/**
	 * 这个方法的返回值才是符合easyui的tree组件所需要的json格式
	 * @param parammap
	 * @param pagebean
	 * @return
	 * @throws instantiationexception
	 * @throws illegalaccessexception
	 * @throws sqlexception
	 */
	public list menutreelist(map parammap, pagebean pagebean) throws instantiationexception, illegalaccessexception, sqlexception{
		list> menulist = this.menulist(parammap, null);
		list treenodelist = new arraylist<>();
		maptotreenodelist(menulist, treenodelist);
		return treenodelist;
	}
	

}

实现tree和tabs

$(function() {
	var ctx=$("#ctx").val();
//	树形菜单
	$('#menuterr').tree({    
	    url:ctx+'/menuaction.action?methodname=menutreelist',//去数据库查询的url
	    	onclick: function(node){
                //如果选项卡打开了就选中打开的选项卡，没打开就添加一个选项卡
	    		if($('#tabs').tabs('exists',node.text)){
	    			$('#tabs').tabs('select',node.text)
	    		}else{
	    			//添加选项卡
		    		$('#tabs').tabs('add',{   
		    		    title:node.text,//你要打开的页面    
		    		    //页面的内容    src为你打开的页面的url，node.attributes.menuurl数据库查询出来的url
		    		    content:'