EasyUI主页面布局：左侧菜单tree、tabs选项卡、tabs右键菜单详解
程序员文章站
2022-04-06 20:26:36
EasyUI主页面布局：左侧菜单tree、tabs选项卡、tabs右键菜单详解
1.页面布局
北(north)部
西(west)部：tree的ul标签
中(center...
EasyUI主页面布局：左侧菜单tree、tabs选项卡、tabs右键菜单详解
北(north)部
西(west)部：tree的ul标签
中(center)部：左侧菜单点击加载页面的位置
tab-tools：tabs右键点击菜单事件的menu
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file = "head.jsp" %>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/main.js"></script>
<title>首页面</title>
</head>
<body>
<p class="easyui-layout" data-options="fit:true">
<p data-options="region:'north',collapsible:false,hideCollapsedContent:false" data-id="head" style="height:45px;overflow:hidden">
</p>
<!-- 左侧菜单 -->
<p data-id="leftmenu" style="width:190px;overflow:auto;" data-options="region:'west',split:false,collapsible:false,style:{textAlign:'left'}">
<ul id="menutree"></ul>
</p>
<p data-options="region:'center',split:true"><!-- -->
<p id="mainTabs" class="easyui-tabs" data-options="toolPosition:'right',fit:true,border:false">
<p title="主页">默认一个主页面tab</p>
</p>
</p>
</p>
<!-- 以下为tabs右击事件 -->
<p id="tab-tools" class="easyui-menu" style="width:100px;">
<p id="1" data-options="iconCls:'icon-arrow_refresh'">刷新</p>
<p class="menu-sep"></p>
<p id="2" data-options="iconCls:'icon-cross'">关闭当前标签</p>
<p id="3" data-options="iconCls:'icon-cross'">关闭非当前标签</p>
<p class="menu-sep"></p>
<p id="4" data-options="iconCls:'icon-cross'">关闭左侧标签</p>
<p id="5" data-options="iconCls:'icon-cross'">关闭右侧标签</p>
<p class="menu-sep"></p>
<p id="6" iconCls="icon-cancel">关闭所有标签</p><!-- 也可这样设置图标 -->
</p>
</body>
</html>
2.左侧菜单tree
2.1json数据
自定义tree图标自定义onSelect事件的跳转页面
[{
"id":1,
"text":"My Documents",
"iconCls":"icon-page", "这是注释(注意逗号)":"自定义tree图标",
"children":[{
"id":11,
"text":"Photos",
"iconCls":"icon-page", "这是注释(注意逗号)":"自定义tree图标",
"children":[{
"id":111,
"text":"Friend",
"iconCls":"icon-page",
"page":"newWin.jsp", "这是注释(注意逗号)":"自定义点击的目标页面"
},{
"id":112,
"text":"Wife",
"page":"grid.jsp", "这是注释(注意逗号)":"自定义点击的目标页面"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"iconCls":"icon-page",
"state":"closed",
"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"
}]
}]
2.2js渲染+onSelect事件
/** 左侧menu菜单 * */
renderLeftMenu();
function renderLeftMenu() {
$("#menutree").tree({
url : "json/treedata.json",
rootWidth : "184",
kidWidth : "180",
height : "auto",
onSelect : function(node) {
var isLeaf = $(this).tree('isLeaf',node.target);//只可选择tree子节点
if(isLeaf){
openLeftWin(node);//打开新的tabs
}
}
});
}
3.新增tabs
3.1tabs新增
刷新小按钮需要8*8像素的小图标，只有16*16像素的导致图标不漂亮啊(ー`′ー)。
/**打开新的tabs **/
function openLeftWin(node) {
var tabName = node.text;
if($("#mainTabs").tabs("exists", tabName)) {// 如果已存在，选中
$("#mainTabs").tabs("select", tabName);
}else {
$("#mainTabs").tabs("add", {
title : tabName,
selected : true,
closable : true,
// href : "newWin.jsp",//此处可动态跳转页面
href : node.page,//此处可动态跳转页面,在加载的json、或者后台数据中组合添加属性即可
tools : [ { //加载刷新小按钮
iconCls : "icon-page_refresh",//应该使用8*8像素图片,没有找到8*8
handler : function() {
var currentTab = $("#mainTabs").tabs('getSelected');
refreshTab(currentTab);
}
} ]
});
}
}
/**
* 通用刷新tabs方法
* currentTab 刷新的tabs对象
*/
function refreshTab(currentTab) {
var url = $(currentTab.panel('options')).attr('href');
$('#tabs').tabs('update', {
tab : currentTab,
options : {
href : url //重新获取目标页面
}
});
currentTab.panel('refresh');//刷新
}
3.2tabs右击事件
/**
* 新增tabs右击事件
*/
$("#mainTabs").tabs({
onContextMenu:function(e,title,index){
e.preventDefault();
$("#tab-tools").menu('show', {
left : e.pageX,
top : e.pageY
});
}
});
3.3tabs右击菜单事件
点击事件的关闭方法参考其他博客文章。
/**
* tabs右击菜单绑定事件
*/
$("#tab-tools").menu({
onClick : function (node) {
closeTab(this, node.id);
}
});
/**
* 相关右击菜单的点击事件
* menu 此处没有用到,即当前选择的menu菜单
* id menu菜单的id标识，可用其他唯一标识代替
*/
function closeTab(menu, id){
var tab = $("#mainTabs").tabs('getSelected');//当前所选tab
var index = $("#mainTabs").tabs('getTabIndex',tab);//当前所选tab的下标位置
var tablist = $("#mainTabs").tabs('tabs'); //所有的tabs列表
switch (id){
case '1' ://刷新
RefreshTab(tab);
break;
case '2' ://关闭当前标签
$("#mainTabs").tabs("close", index);
break;
case '3' ://关闭非当前标签
for(var i=tablist.length-1;i>index;i--){
$("#mainTabs").tabs('close',i);
}
var num = index-1;
for(var i=num;i>=0;i--){
$("#mainTabs").tabs('close',0);
}
break;
case '4' ://关闭左侧
var num = index-1;
for(var i=num;i>=0;i--){
$("#mainTabs").tabs('close',0);
}
break;
case '5' ://关闭右侧
for(var i=tablist.length-1;i>index;i--){
$("#mainTabs").tabs('close',i);
}
break;
case '6'://关闭所有
for(var i=tablist.length-1;i>=0;i--){
$("#mainTabs").tabs("close", i);
}
break;
default:
}
}
4.完整main.js
$(function() {
var URL = {
//获取数据url
};
/** 左侧menu菜单 * */
renderLeftMenu();
function renderLeftMenu() {
$("#menutree").tree({
url : "json/treedata.json",
rootWidth : "184",
kidWidth : "180",
height : "auto",
onSelect : function(node) {
var isLeaf = $(this).tree('isLeaf',node.target);//只可选择tree子节点
if(isLeaf){
openLeftWin(node);//打开新的tabs
}
}
});
}
/**打开新的tabs **/
function openLeftWin(node) {
var tabName = node.text;
if($("#mainTabs").tabs("exists", tabName)) {// 如果已存在，选中
$("#mainTabs").tabs("select", tabName);
}else {
$("#mainTabs").tabs("add", {
title : tabName,
selected : true,
closable : true,
// href : "newWin.jsp",//此处可动态跳转页面
href : node.page,//此处可动态跳转页面,在加载的json、或者后台数据中组合添加属性即可
tools : [ { //加载刷新小按钮
iconCls : "icon-page_refresh",//应该使用8*8像素图片,没有找到8*8
handler : function() {
var currentTab = $("#mainTabs").tabs('getSelected');
refreshTab(currentTab);
}
} ]
});
}
}
/**
* 通用刷新tabs方法
* currentTab 刷新的tabs对象
*/
function refreshTab(currentTab) {
var url = $(currentTab.panel('options')).attr('href');
$('#tabs').tabs('update', {
tab : currentTab,
options : {
href : url //重新获取目标页面
}
});
currentTab.panel('refresh');//刷新
}
/**
* 新增tabs右击事件
*/
$("#mainTabs").tabs({
onContextMenu:function(e,title,index){
e.preventDefault();
$("#tab-tools").menu('show', {
left : e.pageX,
top : e.pageY
});
}
});
/**
* tabs右击菜单绑定事件
*/
$("#tab-tools").menu({
onClick : function (node) {
closeTab(this, node.id);
}
});
/**
* 相关右击菜单的点击事件
* menu 此处没有用到,即当前选择的menu菜单
* id menu菜单的id标识，可用其他唯一标识代替
*/
function closeTab(menu, id){
var tab = $("#mainTabs").tabs('getSelected');//当前所选tab
var index = $("#mainTabs").tabs('getTabIndex',tab);//当前所选tab的下标位置
var tablist = $("#mainTabs").tabs('tabs'); //所有的tabs列表
switch (id){
case '1' ://刷新
RefreshTab(tab);
break;
case '2' ://关闭当前标签
$("#mainTabs").tabs("close", index);
break;
case '3' ://关闭非当前标签
for(var i=tablist.length-1;i>index;i--){
$("#mainTabs").tabs('close',i);
}
var num = index-1;
for(var i=num;i>=0;i--){
$("#mainTabs").tabs('close',0);
}
break;
case '4' ://关闭左侧
var num = index-1;
for(var i=num;i>=0;i--){
$("#mainTabs").tabs('close',0);
}
break;
case '5' ://关闭右侧
for(var i=tablist.length-1;i>index;i--){
$("#mainTabs").tabs('close',i);
}
break;
case '6'://关闭所有
for(var i=tablist.length-1;i>=0;i--){
$("#mainTabs").tabs("close", i);
}
break;
default:
}
}
});
5.总结
可能遇到的问题与解决方法、注意点： tabs新增的页面无法加载js/css文件：把引入文件的方法放到内即可。tree只可选择子节点：
var isLeaf = $(this).tree('isLeaf',node.target);//如果为子节点返回true，否则为false。
json添加注释：直接用key：value代替即可。修改tree默认图标：此处直接在json数据中添加iconCls属性获取；其他方法请自行搜索。加载tree：如果需要从后台获取数据，数据格式必须与官网demo一致。此处直接使用了官网demo的json数据。tabs右键事件：onContentMenutabs刷新按钮：tools 源码位置（github）：
上一篇： javascript椭圆旋转相册实现代码
下一篇： 如何修改tomcat项目的图标(两种)