【EasyUI】EasyUI主页面布局:左侧菜单tree、tabs选项卡、tabs右键菜单

EasyUI布局、tree、tabs、tabs+menu

【EasyUI】EasyUI主页面布局:左侧菜单tree、tabs选项卡、tabs右键菜单_第1张图片

1.页面布局

  1. 北(north)部
  2. 西(west)部:tree的ul标签
  3. 中(center)部:左侧菜单点击加载页面的位置
  4. tab-tools:tabs右键点击菜单事件的menu
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>




<%@ include file = "head.jsp" %>

首页面


	
默认一个主页面tab
刷新
关闭当前标签
关闭非当前标签
关闭左侧标签
关闭右侧标签
关闭所有标签

2.左侧菜单tree

2.1json数据

  1. 自定义tree图标
  2. 自定义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.总结

可能遇到的问题与解决方法、注意点:
  1. tabs新增的页面无法加载js/css文件:把引入文件的方法放到内即可。
  2. tree只可选择子节点:
    var isLeaf = $(this).tree('isLeaf',node.target);//如果为子节点返回true,否则为false。
  3. json添加注释:直接用key:value代替即可。
  4. 修改tree默认图标:此处直接在json数据中添加iconCls属性获取;其他方法请自行搜索。
  5. 加载tree:如果需要从后台获取数据,数据格式必须与官网demo一致。此处直接使用了官网demo的json数据。
  6. tabs右键事件:onContentMenu
  7. tabs刷新按钮:tools
源码位置(github):https://github.com/BeHappyWsz/easyui-validate.git
其他问题敬请留言讨论。




你可能感兴趣的:(Easyui)