前言：给大家讲解tree前端实现
码字不易，点个关注
转载请说明！
开发工具:eclipse
接着我上篇博客讲：
复制粘贴easyui的demo中tree的tree_data1.json到WebContent文件夹下
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
在static静态文件夹叫js的文件夹里新建一个file叫index.js
导入index.js：
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script> 左侧菜单栏：
<div data-options="region:'west',title:'菜单栏',split:true" style="width:200px;">
<!--
缺陷:
1样式缺陷
2不好做数据的渲染，树形结构的动态显示
-->
<ul id="stuMenu"></ul>
</div>右侧内容区:
<div data-options="region:'center',title:'内容区'" style="padding:5px;background:#eee;">
<div id="stuTabs" class="easyui-tabs" style="width:100%;height:100%;"></div>
</div> 创建两个jsp界面：
demo1：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
intel页面
</body>
</html>
------------------------------------------------
demo2:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
java页面
</body>
</html>改写 tree_data1.json：
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel",
"attributes":{
"url":"dome1.jsp",
"p2":"Custom Attribute2"
}
},{
"id":122,
"text":"Java",
"attributes":{
"url":"dome2.jsp",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
改写index.js：
$(function() {
/**
* $.ajax无刷新 $.hello
* $.extends("hello",function(){
* alert("hello");
* })
* 1.tree方法是通过$.extends()拓展出来的
* 2.tree方法做的事
* $('#tt').append("<li<span>Friend</spa></li>");
* .append("<li<span>Friend</spa></li>");
*
* 需求:
* 1.点击左侧显示右侧Tab
* 1.1给菜单添加点击事件
* 1.2调用tabs选项卡打开对应的页面
* 选项卡打开
* 选项卡对应页面展示
* 1.3新建对应的打开页面
* 2.不能打开重复的窗口
* 拿到目前所有打开的tabs选项卡，与将要打开的选项卡做对比(exists)
* 存在true:不打开
* 存在false :打开
* 3.对于已经存在的Tab选项,被点击的时候应该默认被选中
* 4.点击菜单，能够访问对应的页面，而非文字内容
*/
$('#stuMenu').tree({
url:'tree_data1.json',
onClick: function(node) {
//alert(node.text);//用户在点击的时候提示
// add a new tab panel
//判断当前将要打开的选项卡是否存在
var exists = $('#stuTabs').tabs('exists',node.text);
//alert(node.attributes.url);
if(exists){
$('#stuTabs').tabs('select',node.text);
}else{
//iframe
$('#stuTabs').tabs('add',{
title:node.text,
content:'<iframe src="'+node.attributes.url+'"></ifrane>',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}
}
});
})运行index.jsp界面
对于已经存在的Tab选项,被点击的时候应该默认被选中
不会有重复的页面出现
点击intel选项卡打开对应的demo1.jsp
点击java选项卡打开对应的demo2.jsp
不会使用EasyUi前端框架的朋友， 多看看EasyUi的api（使用手册），demo开发人员自己做的案例，勤能补拙
到这里就结束了，我依旧是那个学IT的小学生
欢迎大佬指点