1Easyui-tree就是一个树形菜单.
2.它的作用是:获取数据库表中的数据,以树形结构的形式展示出来.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 引入公共的 -->
<%@ include file="common/head.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//alert(ctx);
$(function(){
//加载数的数据
$('#myTree').tree({
url:ctx+'/data/tree_data1.json',//请求地址
animate:true,//展开或者收缩节点显示动画效果
onDblClick: function(node){//节点
//alert(node.text+" "+node.id);//在用户双击点击的时候提示
//判断是否为子节点
var nodes=$('#myTree').tree('getChildren',node.target);
//alert(nodes.length);
if(nodes.length==0){//没有子节点
//判断选项卡是否存在
var f=$('#myTab').tabs('exists',node.text);
if(!f){
$('#myTab').tabs('add',{
title:node.text,
content:node.text ,
closable:true,
iconCls:node.iconCls//图表
});
}
else{//存在让其对应选中
$('#myTab').tabs('select',node.text);
}
}
}
});
})
</script>
</head>
<body>
<div class="easyui-layout" style="width:700px;height:350px;">
<div data-options="region:'north' ,split:true", style="height:85px;text-align:center;">
<h2>后台书籍管理系统</h2>
</div>
<div data-options="region:'south',split:true" title="沉上工作室" style="height:68px;text-align:center;">
©沉上工作室版权所有,维权必究
</div>
<div data-options="region:'west',split:true" title="功能导航" style="width:100px;">
<ul id="myTree" class="easyui-tree">
</ul>
</div>
<div data-options="region:'center'" style="padding: 5px;background: #fff;">
<div id="myTab" class="easyui-tabs" style="width:100%;height:100%">
<div data-options="iconCls:'icon-bricks' " title="首页" style="padding:10px">
<img src="img/lb1.png" style="width:100%;height:100%;"/>
</div>
</div>
</body>
</html>
3.前提是公共的界面必须引入css和js,
当然还可以引入代码防止运行的时候卡顿
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">