【EasyUI+MVC-搭建后台框架】

淩亂°似流年 2022-08-22 11:30 341阅读 0赞

一.EasyUI简介：

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。

官方网站： http://www.jeasyui.com/

二.下载EasyUI包搭建后台框架

下载最新的EasyUI包： http://www.jeasyui.com/download/index.php

20160527124443958

下载最新的Easyui主题包： http://www.jeasyui.com/extension/themes.php

三.新建.NET MVC Web项目

新建一个MVC的Web应用程序，将下载的EasyUI包，和主题包解压，复制到项目目录：

20160527125859687

新建控制器Home,添加视图页Index。head部分代码如下：

  1. <head>
  2.     <meta name="viewport" content="width=device-width" />
  3.     <title>Index</title>
  4.     @*主题*@
  5.     <link id="easyuiTheme" href="~/Content/jquery-easyui-1.4.5/themes/metro/easyui.css" rel="stylesheet" />
  6.     <link href="~/Content/jquery-easyui-1.4.5/themes/icon.css" rel="stylesheet" />
  7.     <link href="~/Content/jquery-easyui-1.4.5/themes/color.css" rel="stylesheet" />
  8.     <link href="~/Content/jquery-easyui-1.4.5/demo/demo.css" rel="stylesheet" />
  9.     <script src="~/Content/jquery-easyui-1.4.5/jquery.min.js"></script>
  10.     <script src="~/Content/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
  11.      <style type="text/css">
  12.         .fm {
  13.             margin: 0;
  14.             padding: 10px 30px;
  15.         }
  17.         .ftitle {
  18.             font-size: 14px;
  19.             font-weight: bold;
  20.             padding: 5px 0;
  21.             margin-bottom: 10px;
  22.             border-bottom: 1px solid #ccc;
  23.         }
  25.         .fitem {
  26.             margin-bottom: 5px;
  27.         }
  29.         .fitem label {
  30.             display: inline-block;
  31.             width: 80px;
  32.         }
  34.         .fitem input {
  35.             width: 160px;
  36.         }
  37.     </style>
  38. </head>

body部分代码：

  1. <body class="easyui-layout" id="cc">
  2.     @*头部区域*@
  3.     <div data-options="region:'north',border:false" style="height: 80px; padding: 10px; background-color: #2d3e50;color:#c7c7c7;">
  4.         <div style="float:left;height:50px;padding:0px;margin:0px;">
  5.             <div style="height:24px;width:120px;border-bottom:1px solid #c4c4c4;font-size:18px;">
  6.                 GM.Authority
  7.             </div>
  8.             <a href="#" class="easyui-splitbutton" data-options="menu:'#mm1',iconCls:'icon-edit'" style="color:#c7c7c7;margin-top:2px;">修改主题</a>
  9.         </div>
  10.         <div style="height:50px;width:800px;">
  12.         </div>
  13.     </div>
  15.     @*隐藏的导航栏*@
  16.     <div data-options="region:'west',split:true,collapsed:true,
  17.                 hideExpandTool: true,
  18.                 expandMode: null,
  19.                 hideCollapsedContent: false,
  20.                 collapsedSize: 120,
  21.                 collapsedContent: function(){
  22.                     return $('#titlebar');
  23.                 }
  24.                 " title="导航栏" style="width: 119px;">
  25.         <div class="easyui-accordion">
  26.             <div title="站点管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
  27.                 <ul style="padding: 0px; margin: 0px;">
  28.                     <li style=" margin:4px 12px;"><a href="#" style="list-style:none;text-decoration:none;" οnclick="javascript: AddTab('站点配置', '/SiteInfo/Index')">站点配置</a></li>
  29.                     <li style=" margin:4px 12px;"><a href="#" style="list-style:none;text-decoration:none;" οnclick="javascript: AddTab('功能配置', '/UrlInfo/Index')">功能配置</a></li>
  30.                 </ul>
  31.             </div>
  32.             <div title="部门管理" data-options="iconCls:'icon-help'" style="padding:10px;">
  33.                 <ul style="padding: 0px; margin: 0px;">
  34.                     <li style=" margin:4px 12px;"><a href="#" style="list-style:none;text-decoration:none;" οnclick="javascript: AddTab('部门配置', '/Department/Index')">部门配置</a></li>
  35.                 </ul>
  36.             </div>
  37.             <div title="职位管理" data-options="iconCls:'icon-search'" style="padding:10px;">
  39.             </div>
  40.             <div title="用户管理" data-options="iconCls:'icon-search'" style="padding:10px;">
  42.             </div>
  43.             <div title="权限管理" data-options="iconCls:'icon-search'" style="padding:10px;">
  45.             </div>
  46.         </div>
  47.     </div>
  49.     @*右边区域*@
  50.     @*<div data-options="region:'east',split:true,collapsed:true,title:'其他'" style="width:100px;">east region</div>*@
  52.     @*底部区域*@
  53.     <div data-options="region:'south',border:false" style="height: 20px; background:#712369;">底部</div>
  55.     @*中间操作区域*@
  56.     <div data-options="region:'center',title:'展示区'">
  57.         <div class="easyui-tabs" style="width:100%;height:100%" id="tabs">
  58.             <div title="主页" style="padding:10px">
  59.                 <p>欢迎来到权限后台管理系统！</p>
  60.                 <p>管理员：xxx</p>
  61.                 @*<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="topCenter('ok')">TopCenter</a>*@
  62.             </div>
  63.         </div>
  64.     </div>
  66.     @*导航栏*@
  67.     <div id="titlebar" style="padding:2px;">
  68.         <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'layout-button-right'" οnclick="$('#cc').layout('expand','west')">菜单栏</a>
  69.         <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top'">Picture</a>
  70.         <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top'">Shapes</a>
  71.         <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'top'">SmartArt</a>
  72.         <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-chart',size:'large',iconAlign:'top'">Chart</a>
  73.     </div>
  75.     @*主题*@
  76.     <div id="mm1" style="width:150px;">
  77.         <div οnclick="changeTheme('metro');">metro</div>
  78.         <div οnclick="changeTheme('metro-blue');">metro-blue</div>
  79.         <div οnclick="changeTheme('metro-gray');">metro-gray</div>
  80.         <div οnclick="changeTheme('metro-green');">metro-green</div>
  81.         <div οnclick="changeTheme('metro-orange');">metro-orange</div>
  82.         <div οnclick="changeTheme('metro-red');">metro-red</div>
  83.         <div class="menu-sep"></div>
  84.         <div οnclick="changeTheme('black');">black</div>
  85.         <div οnclick="changeTheme('bootstrap');">bootstrap</div>
  86.         <div οnclick="changeTheme('default');">default</div>
  87.         <div οnclick="changeTheme('gray');">gray</div>
  88.         <div οnclick="changeTheme('material');">material</div>
  89.         <div class="menu-sep"></div>
  90.         <div οnclick="changeTheme('ui-cupertino');">ui-cupertino</div>
  91.         <div οnclick="changeTheme('ui-dark-hive');">ui-dark-hive</div>
  92.         <div οnclick="changeTheme('ui-pepper-grinder');">ui-pepper-grinder</div>
  93.         <div οnclick="changeTheme('ui-sunny');">ui-sunny</div>
  94.     </div>
  96.     @*脚本*@
  97.     <script type="text/javascript">
  98.         $(function () {
  99.             //读取easyuiThemeName Cookie
  100.             var ThreadCookie = getCookie("themeName");
  101.             if (ThreadCookie != "") { changeTheme(ThreadCookie) };//LoadThread
  102.         });
  104.         //提示框
  105.         function topCenter(val,time) {
  106.             $.messager.show({
  107.                 title: '友情提示！',
  108.                 msg: val,
  109.                 timeout: time,
  110.                 showType: 'slide',
  111.                 style: {
  112.                     right: '',
  113.                     bottom: '',
  114.                     top: 80
  115.                 }
  116.             });
  117.         };
  119.         //加载开始
  120.         function ajaxLoading() {
  121.             $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body");
  122.             $("<div class=\"datagrid-mask-msg\"></div>").html("正在处理，请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });
  123.         };
  125.         //加载结束
  126.         function ajaxLoadEnd() {
  127.             $(".datagrid-mask").remove();
  128.             $(".datagrid-mask-msg").remove();
  129.         };
  131.         //添加选项卡
  132.         function AddTab(subtitle, url) {
  133.             if (!$('#tabs').tabs('exists', subtitle)) {
  134.                 $('#tabs').tabs('add', {
  135.                     title: subtitle,
  136.                     href: url,
  137.                     closable: true,
  138.                     width: $('#mainPanle').width() - 10,
  139.                     height: $('#mainPanle').height() - 10
  140.                 });
  141.             } else {
  142.                 $('#tabs').tabs('select', subtitle);
  143.             }
  144.             TabClose();
  145.         }
  147.         function TabClose() {
  148.             $(".tab-inner").dblclick(function () {
  149.                 var subtitle = $(this).children("span").text();
  150.                 $('#tabs').tabs('close', subtitle)
  151.             })
  152.         }
  154.         //切换主题
  155.         changeTheme = function (themeName) {
  156.             var $easyuiTheme = $('#easyuiTheme');
  157.             var url = $easyuiTheme.attr('href');
  158.             var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
  159.             $easyuiTheme.attr('href', href);
  160.             var $iframe = $('iframe');
  161.             if ($iframe.length > 0) {
  162.                 for (var i = 0; i < $iframe.length; i++) {
  163.                     var ifr = $iframe[i];
  164.                     $(ifr).contents().find('#easyuiTheme').attr('href', href);
  165.                 }
  166.             }
  167.             setCookie("themeName", themeName, 7)
  168.             //友情提示
  169.             topCenter("当前主题：" + themeName, 1000);
  170.         };
  172.         //设置cookie
  173.         function setCookie(cname, cvalue, exdays) {
  174.             var d = new Date();
  175.             d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  176.             var expires = "expires=" + d.toUTCString();
  177.             document.cookie = cname + "=" + cvalue + "; " + expires;
  178.         }
  180.         //获取cookie
  181.         function getCookie(cname) {
  182.             var name = cname + "=";
  183.             var ca = document.cookie.split(';');
  184.             for (var i = 0; i < ca.length; i++) {
  185.                 var c = ca[i];
  186.                 while (c.charAt(0) == ' ') c = c.substring(1);
  187.                 if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
  188.             }
  189.             return "";
  190.         }
  191.     </script>
  192. </body>

四.布置工作区域

20160527130105969

五.点击菜单栏：进行来回切换的切换

20160527130237153

六.更换主题：消息提示Message自动退出

20160527130517642

七.向工作区动态添加Tab选项卡

20160527130921992

发表评论

表情：
评论列表 （有 0 条评论，341人围观）

还没有评论，来说两句吧...

相关阅读