由于某些原因，在公司做的后台需要改成类似于Ext.js 形式的后台，主要看好其中的 框架布局，以及tab开页面和弹出式内部窗体。
后来看看，改成EasyUI，较Ext.js 库小很多，也便于公司的初级程序员能尽快上手，只需要jquery与js的部分开发知识即可。
目前，这块的后台已经开发进行一段时间了，现整理下，做个开发笔记。
笔记就分3部分，如果看懂的话，做一般的XX管理系统，都无问题了。
1. 页面整体框架搭建。
2. 某一个功能页面的增删改查。
3. 一些遇到的问题解决办法。
界面截图:
不多说了，直接上代码：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>统一管理后台 v2.0</title> <link rel="stylesheet" type="text/css" href="/css/easyui_themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="/css/easyui_themes/icon.css"> <link href="/css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/js/jquery-1.7.min.js"></script> <script type="text/javascript" src="/js/jquery.easyui.min.js"></script> <script type="text/javascript" src="/js/common.js"></script> <script src="/js/My97DatePicker/WdatePicker.js" type="text/javascript"> </script> <link href="/js/easyrt/easyrt.css" rel="stylesheet" /> <script src="/js/easyrt/easyui.js"></script> <script src="/js/easyrt/easyrt.js"></script> </head> <body id="bd" class="easyui-layout"> <form id="form1" runat="server"> <!-- 头部标题面板 --> <div data-options="region:'north',split:true" title="统一管理后台v2.0.0 beta version" style="height: 90px; overflow: hidden; padding: 0px;"> <span style="float: right; padding-right: 20px;" class="head">欢迎 XXX<a href="javascript:void(0);" id="editpass" onclick="AddTab('/admin/system/UpdatePwd.aspx','icon-z_eva','修改密码')">修改密码</a> <a href="javascript:void(0);" id="loginOut">安全退出</a></span> <p></p> </div> <!-- 底部收起的面板 --> <div data-options="region:'south',split:true" title="South Title" style="height: 90px; padding: 0px; background: #efefef;"> <div class="easyui-layout" data-options="fit:true" style="background: #ccc;"> <div data-options="region:'center'"></div> <div data-options="region:'east',split:true" style=" 200px;"></div> </div> </div> <!-- 右侧3秒收起面板 --> <div data-options="region:'east',iconCls:'icon-reload',split:true,title:'提醒内容'" style=" 180px;"> <div id="divMainLeft"></div> </div> <!-- 左侧导航菜单 --> <div data-options="region:'west',split:true" title="导航菜单" style=" 200px; padding: 1px; overflow: hidden;"> <div class="easyui-accordion" data-options="fit:true,border:false"> <!-- 主分类 --> <%=MenuStr %> </div> </div> <!-- 居中tab页面 --> <div id="divCenter" data-options="region:'center'" style="overflow: hidden;"> <div id="tabList" class="easyui-tabs" data-options="fit:true,border:false,tools:'#tab-tools'"> <div title="首页" style="padding: 20px; overflow: hidden;" data-options="closable:true" > <div style="margin-top: 20px;"> <h3>tab首页</h3> <ul> </ul> </div> </div> </div> </div> <div id="tab-tools"> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'" onclick="TabReload()"></a> </div> </form> </body> <script src="js/easyrt/urchin.js"></script> <script> $(function () { // 底部收起 暂不用 setTimeout(function () { $('body').layout('collapse', 'south'); }, 0); // 右侧收起 setTimeout(function () { $('body').layout('collapse', 'east'); // 右侧标题文字 $($(".layout-expand > .panel-body")[1]) .html("<span id='leftTipTitle' style='display:block;16px;padding-left:7px;'></span>"); }, 2 * 1000); // 退出 $('#loginOut').click(function () { $.messager.confirm('系统提示', '您确定要退出本次登录吗?', function (r) { if (r) { location.href = '/Login.aspx'; } }); }); }); //$('body').layout('expand','east'); 展开右侧 </script>
这块就是左侧导航，最简单的方法就是，直接用后台代码输出到这里。<%= %>展示即可。当然也可以看easyui帮助文档，json数据绑定。
protected string CreateMenu(string roleId) { UserMenuMgr bll = new UserMenuMgr(); List<UserMenu> allList = bll.GetRoleMenuList(roleId);//先获取该角色拥有的所有菜单 StringBuilder sb = new StringBuilder(); if (allList != null) { List<UserMenu> _sysMenu = allList.FindAll(m => m.ParentId == 0 && m.IsNavigation == 1);//获得所有一级菜单 // 主要功能树 sb.Append("<div title="主要功能" data-options="" style="overflow: auto; padding: 10px"> <ul class="easyui-tree">"); foreach (var entity in _mainMenu) { ForBody(sb, entity, allList); } sb.Append(" </ul></div>"); } MenuStr = sb.ToString(); return sb.ToString(); } private static void ForBody(StringBuilder sb, UserMenu entity, List<UserMenu> allList) { if (!string.IsNullOrWhiteSpace(entity.EasyUIIcon)) //有图标 { sb.Append("<li data-options="state:'closed', iconCls:'" + entity.EasyUIIcon + "'"> "); } else { sb.Append("<li data-options="state:'closed'"> "); } sb.Append(string.Format("<span>{0}</span>", entity.MenuName)); sb.Append("<ul>"); List<UserMenu> childList = allList.FindAll( m => m.ParentId == entity.MenuId && m.IsNavigation == 1); //获得某个一级菜单下的所有二级菜单 foreach (var subEntity in childList) { if (!string.IsNullOrWhiteSpace(subEntity.EasyUIIcon)) //有图标 { sb.Append("<li data-options="iconCls:'" + subEntity.EasyUIIcon + "'"> "); } else { sb.Append("<li data-options=""> "); } sb.Append( string.Format( "<span><a style='text-decoration: none;color:#000' href="javascript:void(0);" onclick="AddTab('{0}', '{2}', '{1}')">{1}</a></span>", //iconCls:'icon-v_SysModule' subEntity.MenuAddress, subEntity.MenuName, subEntity.EasyUIIcon)); sb.Append("</li>"); } sb.Append("</li></ul>"); }
通用js
function AddTab(url, icon, title) { if ($('#tabList').tabs('exists', title)) { $('#tabList').tabs('select', title); TabReload(); } else { $('#tabList').tabs('add', { title: title, href: url, iconCls: icon, closable: true }); } } function TabReload() { $('#tabList').tabs('getSelected').panel('refresh'); } function ExitTab(title) { $('#tabList').tabs('close', title); } function getUrlParam(div, paras) { var url = $('#' + div).panel("options").href; var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&"); var paraObj = {} for (i = 0; j = paraString[i]; i++) { paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length); } var returnValue = paraObj[paras.toLowerCase()]; if (typeof (returnValue) == "undefined") { return ""; } else { return returnValue; } } function showException(msg) { $.messager.show({ title: '消息提示', msg: msg, showType: 'slide', timeout: 1000, style: { //right: '', //top: document.body.scrollTop + document.documentElement.scrollTop, //bottom: '' right: '', bottom: '' } }); }
大体就这些吧。一个框架代码就搞定了。
这里要注意一点，每个从左侧菜单点击后的，在tab展示，都不是以iframe 形式去来展示新开的页面的。而是加载形式，统一加载到这个页面中。
例如，如果你要获取a页面的div，你在新开的b页面也可以获取到。所以，问题来了，所以div input等html标签的id都不能重名，如果你要用id获取对象进行操作的话。
此块用到的主要easyui，就是:
1. 用class 定义easyui类型
2. region: xxxx 页面布局
3. class: easyui-tree 的树来展示菜单导航
4. 以及部分js，如何展开 收起region、弹出tab页、再次点击切换到当前页以及刷新当前页等。
下一节，主要做一个其中的页面，实现easyui的增删改查功能。
【版权声明】转载请注明出处： http://www.cnblogs.com/yiayi/p/3485258.html