default.html

最新推荐文章于 2022-09-07 17:12:22 发布
「已注销」
最新推荐文章于 2022-09-07 17:12:22 发布
阅读量810
点赞数
文章标签： json xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/wzq806341010/p/3187655.html
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title>网站后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="css/default.css" />
    <link href="css/default.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="js/themes/icon.css" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookies.js"></script>
    <style type="text/css">
        .top
        {
            height: 56px;
            background: url(../images/oa_02.gif) bottom repeat-x;
            border-bottom: 1px solid #4781DA;
            padding-left: 19px;
        }
        .t_logo
        {
            width: 200px;
            height: 56px;
            float: left;
            margin-right: 54px;
        }
        .t_login_info
        {
            min-width: 312px;
            width: auto;
            _width: 312px;
            height: 28px;
            padding: 18px 0 10px 0;
            margin-right: 143px;
            float: left;
        }
        .login_name
        {
            padding-left: 20px;
            height: 28px;
            line-height: 28px;
            background: url(../images/oa01_18.gif) left no-repeat;
            color: #052C6C;
        }
        .info_tip
        {
            width: 37px;
            height: 28px;
            padding-left: 7px;
            line-height: 28px;
            color: #052C6C;
        }
        .xinfeng
        {
            height: 28px;
            padding-left: 20px;
            line-height: 28px;
            background: url(../images/oa01_25.gif) left no-repeat;
            color: #052C6C;
        }
        .top_btn
        {
            width: 300px;
            height: 45px;
            padding: 7px 0px 4px 0px;
            float: right;
        }
        .top_btn ul li
        {
            width: 30px;
            height: 45px;
            float: left;
            margin-right: 20px;
        }
        .btn_li_pic
        {
            width: 30px;
            height: 26px;
        }
        .btn_li_txt
        {
            width: 30px;
            height: 19px;
            line-height: 19px;
            text-align: center;
            color: #30568F;
        }
        /*主页加载*/
        .wpbody
        {
            width: 100%;
            height: 100px;
            top: 40%;
            display: none;
            position: absolute;
        }
        .wprogress
        {
            margin: auto;
            width: 100px;
            height: 100px;
            z-index: 99999999;
        }
    </style>
</head>
<body class="easyui-layout" style="margin: 0px; padding: 0px;">
    <noscript>
        <div style="position: absolute; z-index: 100000; height: 2046px; top: 0px; left: 0px;
            width: 100%; background: white; text-align: center;">
            <img src="../images/noscript.gif" alt='抱歉，请开启脚本支持！' />
        </div>
    </noscript>
    <!--头部信息start-->
    <div region="north" split="false" border="false" style="overflow: hidden; height: 56px; line-height: 20px; color: #fff; font-family: Verdana, 微软雅黑,黑体">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="top">
            <tr>
                <td>
                    <div class="t_logo">
                        <img src="../images/oa_03.gif" width="191" height="56" border="0" alt="" /></div>
                </td>
                <td>
                    <div class="t_login_info">
                        <table border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td class="login_name" style="cursor: pointer;">
                                    admin
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td>
                    <div class="top_btn" style="width: 200px;">
                        <ul style="list-style: none; margin-top: 0px;">
                            <li id="gotoHome" style="cursor: pointer;">
                                <table width="30" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td class="btn_li_pic">
                                            <img src="../images/oa_08-18.gif" width="30" height="26" border="0" alt="" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="btn_li_txt">
                                            首页
                                        </td>
                                    </tr>
                                </table>
                            </li>
                            <li id="userRefresh" style="cursor: pointer;">
                                <table width="30" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td class="btn_li_pic">
                                            <img src="../images/oa_08-13.gif" width="30" height="26" border="0" alt="" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="btn_li_txt">
                                            刷新
                                        </td>
                                    </tr>
                                </table>
                            </li>

                            <li id="userlock" style="cursor: pointer; display: none;">
                                <table width="30" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td class="btn_li_pic">
                                            <img src="../images/oa_08-15.gif" width="30" height="26" border="0" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="btn_li_txt">
                                            锁定
                                        </td>
                                    </tr>
                                </table>
                            </li>
                            <li id="updatePwd" style="cursor: pointer; display: none;">
                                <table width="30" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td class="btn_li_pic">
                                            <img src="../images/oa_08-16.gif" width="30" height="26" border="0" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="btn_li_txt">
                                            密码
                                        </td>
                                    </tr>
                                </table>
                            </li>
                            <li id="loginOut" style="cursor: pointer;">
                                <table width="30" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td class="btn_li_pic">
                                            <img src="../images/oa_08-17.gif" width="30" height="26" border="0" alt="" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="btn_li_txt">
                                            退出
                                        </td>
                                    </tr>
                                </table>
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <!--头部信息end-->
    <!--底部信息start-->
    <div region="south" split="true" style="height: 30px; background: #D2E0F2;">
        <div class="footer">
            CORYRIGHT &copy; 2003-2009 ALL RIGHTS RESERVED 
        </div>
    </div>
    <!--底部信息end->
    
        <!--导航栏start-->
    <div region="west" split="true" title="导航菜单" style="width: 180px;" id="west">
        <div id="nav">
            <!--  导航内容 -->
        </div>
    </div>
    <!--导航栏end-->
    <!--内容页start-->
    <div id="mainPanle" region="center" style="overflow-y: hidden">
        <div id="tabs" class="easyui-tabs" fit="true" border="false">
            <div id="home" class="panel-body panel-body-noheader panel-body-noborder" title="欢迎使用" style="overflow: hidden;">
                <iframe id="test" scrolling="auto" frameborder="0" width="100%" height="100%" src="">
                </iframe>
            </div>
        </div>
    </div>
    <!--内容页end-->
    <div style="display: none;">
        <div id="w" class="easyui-window" title="屏幕锁定" collapsible="false" minimizable="false"
            maximizable="false" icon="icon-save" style="width: 300px; height: 80px; padding: 5px;
            background: #fafafa;">
            <div class="easyui-layout" fit="true">
                <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
                    <table cellpadding="3">
                        <tr>
                            <td>
                                解除密码：
                            </td>
                            <td>
                                <input id="txtNewPass" name="txtNewPass" type="Password" class="txt01" onkeydown="pressLock(event);" />
                            </td>
                        </tr>
                    </table>
                </div>
                <div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">
                    <a id="btnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)">确定</a>
                </div>
            </div>
        </div>
        <div id="wpwd" class="easyui-window" title="修改密码" collapsible="false" minimizable="false"
            maximizable="false" icon="icon-save" style="width: 285px; height: 180px; padding: 5px;
            background: #fafafa;">
            <div class="easyui-layout" fit="true">
                <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
                    <form id="fmUpdatePwd">
                    <table cellpadding="3">
                        <tr>
                            <td height="25">
                                旧密码：
                            </td>
                            <td>
                                <input id="txtOldPwd" name="txtOldPwd" type="Password" class="txt01" />
                            </td>
                        </tr>
                        <tr>
                            <td height="25">
                                新密码：
                            </td>
                            <td>
                                <input id="txtNewPwd" name="txtNewPwd" type="Password" class="txt01" />
                            </td>
                        </tr>
                        <tr>
                            <td height="25">
                                确认密码：
                            </td>
                            <td>
                                <input id="txtNewPwdE" name="txtNewPwdE" type="Password" class="txt01" />
                            </td>
                        </tr>
                    </table>
                    </form>
                </div>
                <div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;">
                    <a id="btnUpdatePwd" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)">
                        确定</a> <a id="btnUpdatePwdNo" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">
                            取消</a>
                </div>
            </div>
        </div>
        <!--右键菜单start-->
        <div id="mm" class="easyui-menu" style="width: 150px;">
            <div id="tabupdate">
                刷新</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="exit">
                退出</div>
        </div>
        <!--右键菜单end-->
    </div>
</body>
</html>
<script type="text/javascript">
    var onlyOpenTitle = "欢迎使用"; //不允许关闭的标签的标题
    var _curmenu = '{"menus": [{"menuid":"1","menuname":"系统管理","url":"UserList.html","icon":"img","menus":[{"menuid":"001","menuname":"栏目管理","url":"UserList.html","icon":"img","menus":[]},{"menuid":"002","menuname":"用户管理","url":"UserList.html","icon":"img","menus":[]},{"menuid":"003","menuname":"权限管理","url":"UserList.html","icon":"img","menus":[]}]}]}';
    //var _curmenu = "";
   var _menus = "";
   _menus = strToJson(_curmenu);
                function strToJson(str) {
                    var json = eval('(' + str + ')');
                    return json;
                }
</script>
<script type="text/javascript">
    $(function () {
        $('#w').window({
            title: '屏幕锁定',
            width: 300,
            modal: true,
            shadow: true,
            closable: false,
            closed: true,
            height: 150,
            resizable: false
        });
        $('#wpwd').window({
            title: '修改密码',
            width: 285,
            modal: true,
            shadow: true,
            closable: true,
            closed: true,
            height: 210,
            resizable: false
        });
        //返回主页
        $('#gotoHome').click(function () {
            window.open("/");
        });
        //用户锁定
        $('#userlock').click(function () {
            $.cookie("Lock", "1", { expires: 30000 });
            $('#w').window('open');
        });
        //刷新
        $('#userRefresh').click(function () {
            $('#tabupdate').click();
        });
        //修改密码
        $('#updatePwd').click(function () {
            $('#wpwd').window('open');
        });
        //退出
        $('#loginOut').click(function () {
            $.messager.confirm('系统提示', '您确定要退出本次登录吗?', function (r) {
                if (r) {
                    location.href = '/manage/login.aspx?action=exit';
                }
            });
        });
        $('#btnEp').click(function () {
            serverLock();
        });
        $('#btnUpdatePwd').click(function () {
            updatePwdFun();
        });
        $('#btnUpdatePwdNo').click(function () {
            $('#wpwd').window('close');
        });
        if ($.cookie("Lock")) {
            $('#w').window('close');
        }
        else {
            $('#w').window('close');
        }
        tabClose();
        tabCloseEven();
        //加载左边菜单
        setTimeout("InitLeftMenu()", 1);
        //加载中
        var divload = document.createElement("div");
        divload.className = "wpbody";
        var imgload = '<div class="wprogress"><img src="http://images.cnblogs.com/loading.gif" /></div>';
        divload.innerHTML = imgload;
        document.body.appendChild(divload);
    });

    //初始化左侧
    function InitLeftMenu() {
        $("#nav").accordion({ animate: false, fit: true, border: false });
        var selectedPanelname = '';
        $.each(_menus.menus, function (i, n) {
            var menulist = '';
            menulist += '<ul class="navlist">';
            $.each(n.menus, function (j, o) {
                menulist += '<li><div ><a ref="' + o.menuid + '" href="#" rel="' + o.url + '" ><span class="icon ' + o.icon + '" >&nbsp;</span><span class="nav">' + o.menuname + '</span></a></div> ';

                if (o.menus && o.menus.length > 0) {
                    menulist += '<ul class="third_ul">';
                    $.each(o.menus, function (k, p) {
                        menulist += '<li><div><a ref="' + p.menuid + '" href="#" rel="' + p.url + '" ><span class="icon ' + p.icon + '" >&nbsp;</span><span class="nav">' + p.menuname + '</span></a></div> </li>'
                    });
                    menulist += '</ul>';
                }

                menulist += '</li>';
            })
            menulist += '</ul>';
            $('#nav').accordion('add', {
                title: n.menuname,
                content: menulist,
                border: false,
                iconCls: 'icon ' + n.icon
            });

            if (i == 0)
                selectedPanelname = n.menuname;

        });
        $('#nav').accordion('select', selectedPanelname);

        $('.navlist li a').click(function () {
            var tabTitle = $(this).children('.nav').text();

            var url = $(this).attr("rel");
            var menuid = $(this).attr("ref");
            var icon = $(this).find('.icon').attr('class');

            var third = find(menuid);
            if (third && third.menus && third.menus.length > 0) {
                $('.third_ul').slideUp();
                var ul = $(this).parent().next();
                if (ul.is(":hidden"))
                    ul.slideDown();
                else
                    ul.slideUp();
            }
            else {
                addTab(tabTitle, url, icon);
                $('.navlist li div').removeClass("selected");
                $(this).parent().addClass("selected");
            }
        }).hover(function () {
            $(this).parent().addClass("hover");
        }, function () {
            $(this).parent().removeClass("hover");
        });
    }

    //获取左侧导航的图标
    function getIcon(menuid) {
        var icon = 'icon ';
        $.each(_menus.menus, function (i, n) {
            $.each(n.menus, function (j, o) {
                if (o.menuid == menuid) {
                    icon += o.icon;
                }
            })
        })
        return icon;
    }

    function find(menuid) {
        var obj = null;
        $.each(_menus.menus, function (i, n) {
            $.each(n.menus, function (j, o) {
                if (o.menuid == menuid) {
                    obj = o;
                }
            });
        });
        return obj;
    }

    function addTab(subtitle, url, icon) {
        if (!$('#tabs').tabs('exists', subtitle)) {
            $('.wpbody').show();
            $('#tabs').tabs('add', {
                title: subtitle,
                content: createFrame(url),
                closable: true,
                icon: icon,
                tools: [{
                    iconCls: 'icon-mini-refresh',
                    handler: function () {
                        closeTab('refresh');
                    }
                }]
            });
        } else {
            $('#tabs').tabs('select', subtitle);
            $('#mm-tabupdate').click();
        }
        tabClose();
        var id = "000";
        var q = url.split('&');
        for (var i = 0; i < q.length; i++) {
            var v = q[i].split('=');
            if (v.length == 2) {
                var ccode = v[0] + "=";
                if (ccode.indexOf("classcode=") >= 0) {
                    id = v[1];
                    break;
                }
            }
        }
        $("#" + id).bind('load', function () {
            $('.wpbody').hide(200);
        });
    }

    function createFrame(url) {
        var id = "000";
        var q = url.split('&');
        for (var i = 0; i < q.length; i++) {
            var v = q[i].split('=');
            if (v.length == 2) {
                var ccode = v[0] + "=";
                if (ccode.indexOf("classcode=") >= 0) {
                    id = v[1];
                    break;
                }
            }
        }
        var s = '<iframe scrolling="auto" frameborder="0" id="' + id + '" src="' + url + '" style="width:100%;height:100%;"></iframe>';
        return s;
    }

    function tabClose() {
        /*双击关闭TAB选项卡*/
        $(".tabs-inner").dblclick(function () {
            var subtitle = $(this).children(".tabs-closable").text();
            $('#tabs').tabs('close', subtitle);
        })

        /*为选项卡绑定右键*/
        $(".tabs-inner").bind('contextmenu', function (e) {
            $('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY
            });

            var subtitle = $(this).children(".tabs-closable").text();

            $('#mm').data("currtab", subtitle);
            $('#tabs').tabs('select', subtitle);
            return false;
        });
    }

    //绑定右键菜单事件
    function tabCloseEven() {
        $('#mm').menu({
            onClick: function (item) {
                closeTab(item.id);
                //alert(item.id);
            }
        });

        return false;
    }

    function closeTab(action) {
        var alltabs = $('#tabs').tabs('tabs');
        var currentTab = $('#tabs').tabs('getSelected');
        var allTabtitle = [];
        $.each(alltabs, function (i, n) {
            allTabtitle.push($(n).panel('options').title);
        })


        switch (action) {
            case "refresh":
                $('.wpbody').show();
                var iframe = $(currentTab.panel('options').content);
                var src = iframe.attr('src');
                $('#tabs').tabs('update', {
                    tab: currentTab,
                    options: {
                        content: createFrame(src)
                    }
                })
                $("#" + iframe.attr('id')).bind('load', function () {
                    $('.wpbody').hide(200);
                });
                break;
            case "tabupdate":
                $('.wpbody').show();
                var iframe = $(currentTab.panel('options').content);
                var src = iframe.attr('src');
                if (src != undefined && src != "") {
                    $('#tabs').tabs('update', {
                        tab: currentTab,
                        options: {
                            content: createFrame(src)
                        }
                    })
                }
                $("#" + iframe.attr('id')).bind('load', function () {
                    $('.wpbody').hide(200);
                });
                break;
            case "close":
                var currtab_title = currentTab.panel('options').title;
                $('#tabs').tabs('close', currtab_title);
                break;
            case "closeall":
                $.each(allTabtitle, function (i, n) {
                    if (n != onlyOpenTitle) {
                        $('#tabs').tabs('close', n);
                    }
                });
                break;
            case "closeother":
                var currtab_title = currentTab.panel('options').title;
                $.each(allTabtitle, function (i, n) {
                    if (n != currtab_title && n != onlyOpenTitle) {
                        $('#tabs').tabs('close', n);
                    }
                });
                break;
            case "closeright":
                var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);

                if (tabIndex == alltabs.length - 1) {
                    alert('亲，后边没有啦 ^@^!!');
                    return false;
                }
                $.each(allTabtitle, function (i, n) {
                    if (i > tabIndex) {
                        if (n != onlyOpenTitle) {
                            $('#tabs').tabs('close', n);
                        }
                    }
                });

                break;
            case "closeleft":
                var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
                if (tabIndex == 1) {
                    alert('亲，前边那个上头有人，咱惹不起哦。 ^@^!!');
                    return false;
                }
                $.each(allTabtitle, function (i, n) {
                    if (i < tabIndex) {
                        if (n != onlyOpenTitle) {
                            $('#tabs').tabs('close', n);
                        }
                    }
                });

                break;
            case "exit":
                $('#closeMenu').menu('hide');
                break;
        }
    }

    function serverLock() {
        var newpass = $('#txtNewPass').val();
        if (newpass == '') {
            $.messager.alert('系统提示', '请输入密码！', 'warning');
            return false;
        }
        $.ajax({
            url: '../getdata/loginget.ashx?op=2&password=' + newpass,
            type: 'GET',
            dataType: "json",
            timeout: 1000,
            error: function () {
                $.messager.alert('错误信息', '调用后台数据失败!', 'error');
            },
            success: function (data) {
                if (data.msg != 1) {
                    $.messager.alert('提示信息', data.msbox, 'error');
                }
                else {
                    $('#txtNewPass').val("");
                    $('#w').window('close');
                    $.cookie("Lock", "", { expires: 30000 });
                }
            }
        });
    }

    function updatePwdFun() {
        var oldpwd = $('#txtOldPwd').val();
        if (oldpwd == '') {
            $.messager.alert('系统提示', '请输入旧密码！', 'info');
            return false;
        }
        var newpwd = $('#txtNewPwd').val();
        if (newpwd == '') {
            $.messager.alert('系统提示', '请输入新密码！', 'info');
            return false;
        }
        var newpwde = $('#txtNewPwdE').val();
        if (newpwde == '') {
            $.messager.alert('系统提示', '请输入确认新密码！', 'info');
            return false;
        }
        if (oldpwd == newpwd) {
            $.messager.alert('系统提示', '旧密码跟新密码一致，不需要修改！', 'info');
            return false;
        }
        if (newpwd != newpwde) {
            $.messager.alert('系统提示', '新密码前后不一致！', 'info');
            return false;
        }
        var paramSerial = $('#fmUpdatePwd').serialize();
        $.ajax({
            url: '../getdata/loginget.ashx?op=1&' + paramSerial,
            type: 'GET',
            dataType: "json",
            timeout: 1000,
            error: function () {
                $.messager.alert('错误信息', '调用后台数据失败!', 'error');
            },
            success: function (data) {
                if (data.msg == 1) {
                    $('#wpwd').window('close');
                }
                $.messager.alert('提示信息', data.msbox, 'error');
            }
        });
    }

    function pressLock(e) {
        var currKey = 0, e = e || event;
        if (e.keyCode == 13) {
            event.keyCode = 9;
            event.returnValue = false;
            document.getElementById("btnEp").click();
            return false;
        }
    }
</script>