由于easyui是一个可以用于jQuery的插件，所以要使用它就必须引用jQuery与easyui，把其放到项目中
之后再在jsp中引入<script type="text/javascript"src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
以及easyui的css文件<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">这样就可以开始使用了。
1.easyui-layout（页面布局）
把body分为五块
jsp 代码为
<body class="easyui-layout">
<div title="north" region="north" style="height: 100px"></div>
<div title="south" region="south" style="height: 100px"></div>
<div title="center" region="center" ></div>
<div title="east" region="east" style="width: 100px"></div>
<div title="west" region="west" style="width: 100px"></div>
</body>
可以自己设置 title，高度以及宽度，并且在每个div中还可以使用其他easyui样式。
2.accordion（折叠面板）
在title为 west的div中插入一个 accordion
效果如图所示
jsp代码为：
其中的 fit 参数表示自动填充满上一级，这里也就是 west div
3.tabs选项卡
效果图
代码为
其中 closable 表示可以关闭 如 效果图b与c所示有一个关闭按钮 x，href属性表示填充改选项卡的内容，本例是使用了index.jsp。详细使用可以参考api文档
4.动态添加一个选项卡
代码为：
需要结合easyui-linkbutton， 动态调用方法
变量 e是为了判断该选项卡是否存在，存在就选中，不存在才添加，防止多次添加同一个选项卡。
5 ztree
效果图
5.1 使用标准json数据构造ztree
<ul id="ztree1" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//当页面加载完成后，动态创建ztree菜单
var setting = {};//设置ztree相关的属性
//构造json数据
var zNodes = [
{name:'系统管理'},//每个json对象对应一个节点数据
{name:'用户管理',children:[
{name:'用户添加'},
{name:'用户修改'}
]},//每个json对象对应一个节点数据
{name:'权限管理'}//每个json对象对应一个节点数据
];
//创建ztree
$.fn.zTree.init($("#ztree1"),setting,zNodes);
});
</script>
5.2 使用简单json数据构造ztree（建议）
<!-- 展示树形菜单 ：使用简单json数据构造-->
<ul id="ztree2" class="ztree"></ul>
<script type="text/javascript">
$(function(){
//当页面加载完成后，动态创建ztree菜单
var setting2 = {
data: {
simpleData: {
enable: true//启用简单json数据描述节点数据
}
}
};//设置ztree相关的属性
//构造json数据
var zNodes2 = [
{id:'1',pId:'0',name:'系统管理'},//每个json对象对应一个节点数据
{id:'2',pId:'0',name:'用户管理'},//每个json对象对应一个节点数据
{id:'21',pId:'2',name:'用户添加'},//每个json对象对应一个节点数据
{id:'22',pId:'2',name:'用户修改'},//每个json对象对应一个节点数据
{id:'3',pId:'0',name:'权限管理'}//每个json对象对应一个节点数据
];
//创建ztree
$.fn.zTree.init($("#ztree2"),setting2,zNodes2);
});
</script>
5.3 发送ajax请求获取菜单数据构造ztree
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
$(function(){
var setting3 = {
data : {
simpleData : {
enable : true
//启用简单json数据描述节点数据
}
}
};//设置ztree相关的属性
//发送ajax请求获取json数据构造ztree
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function(data){
//创建ztree
$.fn.zTree.init($("#ztree3"), setting3, data);
},'json');
});
</script>
5.4 为ztree节点绑定事件
<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
$(function(){
var setting3 = {
data : {
simpleData : {
enable : true
//启用简单json数据描述节点数据
}
},
callback: {//绑定事件
onClick: function(a,b,treeNode){
var page = treeNode.page;
if(page != undefined){//需要打开选项卡
//判断当前选项卡是否已经打开
var e = $("#tt").tabs("exists",treeNode.name);
if(e){
//已经打开
$("#tt").tabs("select",treeNode.name);
}else{
$("#tt")
.tabs(
"add",
{
title : treeNode.name,
content : '<iframe frameborder="0" width="100%" height="100%" src="'+page+'"></iframe>',
closable : true,
iconCls : 'icon-edit'
});
}
}
}
}
};//设置ztree相关的属性
//发送ajax请求获取json数据构造ztree
var url = "${pageContext.request.contextPath}/json/menu.json";
$.post(url,{},function(data){
//创建ztree
$.fn.zTree.init($("#ztree3"), setting3, data);
},'json');
});
</script>