关于easyui与ztree的初步学习

最新推荐文章于 2021-06-26 14:10:23 发布

ugly_birds

最新推荐文章于 2021-06-26 14:10:23 发布

阅读量690

点赞数 1

文章标签： easyui jquery

本文链接：https://blog.csdn.net/ugly_birds/article/details/76917920

版权

由于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 代码为

可以自己设置 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（建议）

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