easyui 界面框架小记

最新推荐文章于 2023-07-28 14:36:07 发布

wyljz

最新推荐文章于 2023-07-28 14:36:07 发布

阅读量1.6k

点赞数

分类专栏： jquery easyui 文章标签： easyui 框架界面布局

本文链接：https://blog.csdn.net/wyljz/article/details/50443095

版权

jquery easyui 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

框架页html

@{
    Layout = null;
    ViewBag.Title = System.Configuration.ConfigurationManager.AppSettings["schoolName"] ;
    if (dordll.Operator.CurrentOperator() == null)
    {
        Response.Redirect("/home/logon");
    }
    ViewBag.CurrentOperator = dordll.Operator.CurrentOperator();
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <!--[if !IE]> -->
    <script src="~/js/jquery-2.1.1.js"></script>
    <script src="~/js/jquery-2.1.1.min.js"></script>
    <!-- <![endif]-->
    <!--[if IE]>
    <script src="~/js/jquery-1.11.3.js"></script>
    <script src="~/js/jquery-1.11.3.min.js"></script>
    <![endif]-->
    <link href="~/style/main.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="~/jquery-easyui-1.4.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="~/jquery-easyui-1.4.3/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="~/jquery-easyui-1.4.3/demo.css">
    <script type="text/javascript" src="~/jquery-easyui-1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="~/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
     <script src="~/js/fc.js" charset="gbk"></script>
    <script src="~/js/webjs/index.js"></script>
</head>
<body id="mainlayout" class="easyui-layout">
    <div data-options="region:'north',border:false,collapsible:false" style="height: 60px; background:url(/images/dorm.png) no-repeat;  background-size:100%">
        <div style="float:left;height:60px;line-height:60px;font-size:25px; font-weight:bold;font:'微软雅黑';margin-left:20px;">
            @ViewBag.Title
        </div>
        <div style="float:right;margin-right:20px;height:60px;line-height:60px;">
            @ViewBag.CurrentOperator,你好
            <a href="#" onclick="change('修改密码','/operator/editpass');">修改密码</a>
            @Html.ActionLink("退出", "logOut", "Home")
        </div>
    </div>
    <div data-options="region:'west',split:true,title:'管理菜单'" style="width: 160px;">
        <ul id="umenu" class="easyui-tree"></ul>
    </div>
    <div id="worklayout" data-options="region:'center',title:'@ViewBag.pagetitle'">
        <div style="width:500px; margin-left:auto; margin-right:auto; margin-top:200px; text-align:center;">
            <h2>欢迎使用 @ViewBag.title</h2>
        </div>

    </div>
</body>
</html>

框架页使用的配套js

function change(title, href) {
    var panel = $('#worklayout');
    panel.panel({ region: 'center', title: title, href: href });
    //panel.panel('refresh');
}

$(document).ready(function () {
    $.post("/home/listroles", function (data) {
        for (i = 0; i < data.length; i++) {
            if (data[i].FartherId == "0") {
                $('#umenu').tree('append', {
                    data: [{
                        parent: null,
                        text: data[i].Menu,
                        id: data[i].Id,
                        tag: data[i].Path,
                        iconCls: data[i].Img
                    }]
                });
                (function () {
                    var k = arguments[0];
                    var sel = $('#umenu').tree('find', k.Id);
                    for (j = 0; j < data.length; j++) {
                        if (k.Id == data[j].FartherId) {
                            $('#umenu').tree('collapse', sel.target);
                            $('#umenu').tree('append', {
                                parent: sel.target,
                                data: [{
                                    text: data[j].Menu,
                                    id: data[j].Id,
                                    tag: data[j].Path,
                                    iconCls: data[j].Img
                                }]
                            });
                        }
                    }
                })(data[i]);
            }
        }
    });

    $('#umenu').tree({
        onClick: function (node) {
            if (node.tag != "") {
                change(node.text, node.tag);
            }
        }
    });
});