基于easyUI实现经典系统主界面

2022-09-30 10:34:54

一. 相关文件介绍

　　1. home.jsp：系统主界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>

 <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>企业信息管理系统</title>

    <%@ include file="/common/basePath.jsp"%>

    <!--加载960CSS框架-->

    <link href="content/css/960/fluid/grid.css" rel="stylesheet" type="text/css" />

    <!--加载主题CSS-->

    <link href="content/css/style.css" rel="stylesheet" type="text/css" />

    <link href="content/js/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" />

    <!--加载组件CSS-->

    <link href="content/js/jquery-plugin/ztree/css/zTreeStyle.css" rel="stylesheet" type="text/css"  />

    <link href="content/js/jquery-plugin/jnotify/jquery.jnotify.css" rel="stylesheet" type="text/css" />

    <link href="content/js/jquery-plugin/jqgrid/default/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />

    <!--加载样式修正CSS-->

    <link href="content/css/hack/fix.css" rel="stylesheet" type="text/css" />

    <!--加载图标库CSS-->

    <link href="content/images/icon/icon.css" rel="stylesheet" type="text/css" />

    <!--本页面样式-->

    <link href="content/css/page/home.css" rel="stylesheet" type="text/css" />

 </head>

 <body class="easyui-layout" fit="true" scroll="no">

    <noscript>

        <div class="noscript">

            <img src="content/images/noscript.gif" alt="抱歉，请开启脚本支持！" />

        </div>

    </noscript>

    <div region="north" class="head-north" split="true" border="false"  >

        <div class="head head-right" >

            <div style="padding-top:20px;">

                <a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#mm_user',iconCls:'icon-user'">当前用户:admin</a>

                <div id="mm_user" style="width:150px;">

                    <div data-options="iconCls:'icon-edit'" class="changepwd">修改密码</div>

                    <div class="menu-sep"></div>

                    <div data-options="iconCls:'icon-user_go'" class="loginOut">安全退出</div>

                </div>

            </div>

        </div>

        <span class="head-left">

            企业信息管理系统

        </span>

    </div>

    <div region="west" split="true" title="导航菜单" style="width:180px;" id="west">

        <div id="wnav"></div>

    </div>

    <div region="south" split="true" class="head-south">

        <div class="footer">Copyright &copy; 2016 ims, All Rights Reserved</div>

    </div>

    <div region="center" id="mainPanle" style="background: #eee; overflow-y:hidden">

        <div id="tabs" class="easyui-tabs"  fit="true" border="false" >

            <div title="我的桌面" style="overflow:hidden;" id="home"></div>

        </div>

    </div>

    <div id="w"></div>

    <div id="notity"></div>

    <div id="closeMenu" class="easyui-menu hide" style="width:150px;">

        <div id="refresh">刷新</div>

        <div class="menu-sep"></div>

        <div id="close">关闭</div>

        <div id="closeall">全部关闭</div>

        <div id="closeother">除此之外全部关闭</div>

        <div class="menu-sep"></div>

        <div id="closeright">关闭右侧标签</div>

        <div id="closeleft">关闭左侧标签</div>

        <div class="menu-sep"></div>

        <div id="exit">退出</div>

    </div>

    <script type="text/html" id="password-template">

        <div class="container_12" style="width:90%;margin:5%;">

            <div class="grid_3 lbl">登陆名：</div>

            <div class="grid_9 val"><input type="text" class="txtBox readonly " name="userCode" value="admin" disabled="disabled"/></div>

            <div class="grid_3 lbl">原密码：</div>

            <div class="grid_9 val"><input type="password" class="txtBox" /></div>

            <div class="grid_3 lbl">新密码：</div>

            <div class="grid_9 val"><input type="password" class="txtBox" /></div>

            <div class="grid_3 lbl">确　认：</div>

            <div class="grid_9 val"><input type="password" class="txtBox"  /></div>

            <div class="clear"></div>

        </div>

        <div style="text-align:center;" class="z-toolbar-dialog">

            <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)"  id="pwd_confirm" >确定</a>

            <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" id="pwd_close">取消</a>

        </div>

    </script>

    <script type="text/javascript" src="content/js/jquery/jquery-1.8.1.min.js"></script>

    <script type="text/javascript" src="content/js/core/utils.js"></script>

    <script type="text/javascript" src="content/js/core/common.js"></script>

    <script type="text/javascript" src="content/js/core/jquery.easyui.fix.js"></script>

    <script type="text/javascript" src="content/js/jquery-plugin/jnotify/jquery.jnotify.js"></script>

    <script type="text/javascript" src="content/js/jquery-plugin/ztree/jquery.ztree.all-3.2.min.js"></script>

    <script type="text/javascript" src="content/js/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="content/js/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript" src="viewModel/home.js"></script>

  </body>

</html>

　　2. home.js：绑定主界面的功能按钮

var wrapper = {};

//设置

wrapper.settings = {

    homeTabTitle: '我的桌面',

    homeTabUrl: 'http://www.baidu.com',

    maxTabCount: 10

};

//初始化

wrapper.init = function () {

    com.ajax({ type: 'POST', url: rootPath+'/sys/menu!getUserMenu.do', success: wrapper.initMenu });

    $('.loginOut').click(wrapper.logout);

    $('.changepwd').click(wrapper.changePassword);

    $('#notity').jnotifyInizialize({ oneAtTime: true, appendType: 'append' }).css({ 'position': 'absolute', '*top': '2px', 'left': '50%', 'margin': '20px 0px 0px -120px', '*margin': '0px 0px 0px -120px', 'width': '240px', 'z-index': '9999' });

    $('#closeMenu').menu({ onClick: wrapper.rightMenuClick });

    $('#tabs').tabs({

        tools: [{ iconCls: 'icon-arrow_refresh', handler: wrapper.tabRefresh },

                { iconCls: 'icon-screen_full', handler: wrapper.setFullScreen },

                { iconCls: 'panel-tool-close', handler: wrapper.tabClose }],

        onContextMenu: wrapper.tabContextMenu,

        onClose: wrapper.setLocationHash,

        onSelect: wrapper.setLocationHash

    });

};

wrapper.initMenu = function (d) {

    if (!d || !d.length) {

        $.messager.alert("系统提示", "<font color=red><b>您没有任何权限！请联系管理员。</b></font>", "warning", function () { location.href = '/login'; });

        return;

    }

    $('body').data('menulist', d);

    var visibleMenu = $.grep(d, function (row) {return row.isVisible;});

    $.each(visibleMenu, function () {

        var urlStart = this.menuUrl.substring(0,7);

        if(urlStart!="#" && urlStart!="http://"){

            this.menuUrl = rootPath+this.menuUrl;

        }

    })

    var menus = utils.toTreeData(visibleMenu, 'id', 'parentId', 'children');

    switch (wrapper.settings.navigation) {

        case "tree":

            wrapper.menuTree(menus);

            break;

        case "accordion":

            wrapper.menuAccordion(menus);

            break;

        default:

            wrapper.menuAccordion(menus);

            break;

    }

    wrapper.initLocationHash(d);

    $("#home").html(wrapper.createFrame(wrapper.settings.homeTabUrl));

};

//菜单生成

wrapper.menuAccordion = function (menus) {

    var $obj = $('#wnav');

    $obj.accordion({ animate: false, fit: true, border: false });

    $.each(menus, function () {

        var html = '<ul>';

        var temple = '<li><div><a ref="{0}" href="javascript:void(0)" rel="{1}"><span class="icon {2}">&nbsp;</span><span class="nav">{3}</span></a></div></li>';

        $.each(this.children || [], function () {

            html += utils.formatString(temple, this.menuCode, this.menuUrl, this.iconClass, this.menuName);

        });

        html += '</ul>';

        $obj.accordion('add', {

            title: this.menuName,

            content: html,

            iconCls: 'icon ' + this.iconClass,

            border: false

        });

    });

    var panels = $obj.accordion('panels');

    $obj.accordion('select', panels[0].panel('options').title);

    $obj.find('li').click(function () {

        $obj.find('li div').removeClass("selected");

        $(this).children('div').addClass("selected");

        var link = $(this).find('a');

        var title = link.children('.nav').text();

        var url = link.attr("rel");

        var code = link.attr("ref");

        var icon = link.children('.icon').attr('class');

        wrapper.addTab(title, url, icon);

    }).hover(function () {

        $(this).children('div').addClass("hover");

    }, function () {

        $(this).children('div').removeClass("hover");

    });

};

wrapper.initLocationHash = function (data) {

    var subUrl = location.hash.replace('#!', '');

    $.each(data, function () {

        var s = this.url;

        if (this.url && this.url != '#' && (subUrl == s || subUrl.indexOf(s + "/") > -1))

            wrapper.addTab(this.menuName, subUrl, this.iconClass);

    });

};

wrapper.setLocationHash = function(){

    try {

        var $obj = $('#tabs');

        var src = '', tabs = $obj.data().tabs.tabs;

        var tab = $obj.tabs('getSelected');

        var fnSrc = function (tab) {

            var iframe = tab.find('iframe');

            return iframe.length ? iframe[0].src.replace(location.host, '').replace('http://', '') : '';

        };

        if (tab) {

            src = fnSrc(tab);

            if (src) window.location.hash = '!' + src;   //如果src没有，就不设置，case在f5刷新时出现

            if (src == homeUrl) window.location.hash = '';

        }

        else {

            src = fnSrc(tabs[tabs.length - 1]); //关闭tabs时，当前tab为空

            window.location.hash = '!' + src;

        }

    }

    catch (e) { }

}

wrapper.addTab = function (subtitle, url, icon) {

    if (!url|| url == '#') return false;

    var $tab = $('#tabs');

    var tabCount = $tab.tabs('tabs').length;

    var hasTab = $tab.tabs('exists', subtitle);

    if ((tabCount <= wrapper.settings.maxTabCount) || hasTab)

        wrapper.openTabHandler($tab, hasTab, subtitle, url, icon);

    else

        $.messager.confirm("系统提示", '<b>您当前打开了太多的页面，如果继续打开，会造成程序运行缓慢，无法流畅操作！</b>', function (b) {

            if (b)

                wrapper.openTabHandler($tab, hasTab, subtitle, url, icon);

        });

};

wrapper.openTabHandler = function ($tab,hasTab, subtitle,url,icon) {

    if (!hasTab) {

        $tab.tabs('add', {title: subtitle,content: wrapper.createFrame(url),closable: true,icon: icon});

    } else {

        $tab.tabs('select', subtitle);

        wrapper.tabRefresh(url);   //选择TAB时刷新页面

    }

    wrapper.setLocationHash();

};

wrapper.tabRefresh = function (url) {

    var $tab = $("#tabs");

    var currentTab = $tab.tabs('getSelected');

    var src = $(currentTab.panel('options').content).attr('src');

    if (src == undefined){

        var fnSrc = function (tab) {

            var iframe = tab.find('iframe');

            return iframe.length ? iframe[0].src : '';

        };

        src = fnSrc(currentTab);

    }

    if (typeof url === 'string') src = url;

    $tab.tabs('update', { tab: currentTab, options: { content: wrapper.createFrame(src) } })

};

wrapper.createFrame = function (url) {

    return '<iframe scrolling="auto" frameborder="0"  style="width:100%;height:100%;" src="' + url + '" ></iframe>';

}

//事件

wrapper.tabContextMenu = function (e, title) {

    $('#closeMenu').menu('show', {left: e.pageX,top: e.pageY});

    $('#tabs').tabs('select', title);

    e.preventDefault();

};

wrapper.changePassword = function () {

    com.dialog({

        title: "&nbsp;修改密码",

        iconCls: 'icon-key',

        width: 320,

        height: 195,

        html: "#password-template",

        viewModel: function (w) {

            w.find("#pwd_confirm").click(function () { w.dialog('close'); });

            w.find("#pwd_close").click(function () { w.dialog('close'); });

        }

    });

};

wrapper.logout = function () {

    $.messager.confirm('系统提示', '您确定要退出本次登录吗?', function (r) {

        if (r) location.href = 'javascript:void(0)';

    });

};

wrapper.setFullScreen = function () {

    var that = $(this);

    if (that.find('.icon-screen_full').length) {

        that.find('.icon-screen_full').removeClass('icon-screen_full').addClass('icon-screen_actual');

        $('[region=north],[region=west]').panel('close')

        var panels = $('body').data().layout.panels;

        panels.north.length = 0;

        panels.west.length = 0;

        if (panels.expandWest) {

            panels.expandWest.length = 0;

            $(panels.expandWest[0]).panel('close');

        }

        $('body').layout('resize');

    } else if ($(this).find('.icon-screen_actual').length) {

        that.find('.icon-screen_actual').removeClass('icon-screen_actual').addClass('icon-screen_full');

        $('[region=north],[region=west]').panel('open');

        var panels = $('body').data().layout.panels;

        panels.north.length = 1;

        panels.west.length = 1;

        if ($(panels.west[0]).panel('options').collapsed) {

            panels.expandWest.length = 1;

            $(panels.expandWest[0]).panel('open');

        }

        $('body').layout('resize');

    }

};

wrapper.tabClose = function () {

    if (confirm('确认要关闭所有窗口吗？'))

        wrapper.rightMenuClick({ id: 'closeall' });

};

wrapper.rightMenuClick = function (item) {

    var $tab = $('#tabs');

    var currentTab = $tab.tabs('getSelected');

    var titles = wrapper.getTabTitles($tab);

    switch (item.id) {

        case "refresh":

            var src = $(currentTab.panel('options').content).attr('src');

            if (src == undefined){

                var fnSrc = function (tab) {

                    var iframe = tab.find('iframe');

                    return iframe.length ? iframe[0].src : '';

                };

                src = fnSrc(currentTab);

            }

            $tab.tabs('update', { tab: currentTab, options: { content: wrapper.createFrame(src) } });

            break;

        case "close":

            var currtab_title = currentTab.panel('options').title;

            $tab.tabs('close', currtab_title);

            break;

        case "closeall":

            $.each(titles, function () {

                if (this != wrapper.settings.homeTabTitle)

                    $tab.tabs('close', this);

            });

            break;

        case "closeother":

            var currtab_title = currentTab.panel('options').title;

            $.each(titles, function () {

                if (this != currtab_title && this != wrapper.settings.homeTabTitle)

                    $tab.tabs('close', this);

            });

            break;

        case "closeright":

            var tabIndex = $tab.tabs('getTabIndex', currentTab);

            if (tabIndex == titles.length - 1) {

                alert('亲，后边没有啦 ^@^!!');

                return false;

            }

            $.each(titles, function (i) {

                if (i > tabIndex && this != wrapper.settings.homeTabTitle)

                    $tab.tabs('close', this);

            });

            break;

        case "closeleft":

            var tabIndex = $tab.tabs('getTabIndex', currentTab);

            if (tabIndex == 1) {

                alert('亲，前边那个上头有人，咱惹不起哦。 ^@^!!');

                return false;

            }

            $.each(titles, function (i) {

                if (i < tabIndex && this != wrapper.settings.homeTabTitle)

                    $tab.tabs('close', this);

            });

            break;

        case "exit":

            $('#closeMenu').menu('hide');

            break;

    }

};

wrapper.getTabTitles = function ($tab) {

    var titles = [];

    var tabs = $tab.tabs('tabs');

    $.each(tabs, function () { titles.push($(this).panel('options').title); });

    return titles;

};

wrapper.menuTree = function (menus) {

    var settings = { data: { key: { name: "menuName"} },callback: { onClick:wrapper.treeOnClick }};

    var $obj = $('#wnav').addClass("ztree");

    if (menus.length > 0) menus[0].open = true;

    $.fn.zTree.init($obj, settings, menus);

};

wrapper.treeOnClick = function(event, treeId, node){

    wrapper.addTab(node.menuName, node.menuUrl, node.iconClass);

};

$(wrapper.init);

二. 效果图

　　1. 访问：http://localhost:8080/ims/home.do，系统主界面

码农公寓

相关文章