用dojo构架管理系统web前端

最新推荐文章于 2020-08-21 10:24:53 发布

walle1027

最新推荐文章于 2020-08-21 10:24:53 发布

阅读量1.2k

点赞数

文章标签： dojo web dialog iframe url menu

本文链接：https://blog.csdn.net/walle1027/article/details/6436234

版权

在管理系统中，往往更注重组件的完备，功能的可扩展，以及风格的统一，因此在前端组件中，选择了dojo，原因有三点：

1 开源，并且有强大的团队维护

2 组件化设计思想

3 风格统一

管理系统后台用j2EE，采用常规的struts2+spring+hibernate+freemarker。前端采用dojo

整体构架理念是用一个总的布局页面规定log区，菜单区，功能区，其他信息展示区的布局。

当菜单点击的时候，切换功能区。功能区采用iframe加载，保证功能区页面是个独立的html，以便被其他地方重用。

一下是登陆后的主界面的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <@head/> <mce:script type="text/javascript"></mce:script> <link rel="stylesheet" href="${path}/js/dojo/dojox/layout/resources/ExpandoPane.css" mce_href="${path}/js/dojo/dojox/layout/resources/ExpandoPane.css"> <body class="${theme}"> <div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;" id="layoutContainer"> <div dojoType="dijit.layout.ContentPane" region="top" style="height: 50px; padding: 0"> <div style="height: 29px; width: 100%; over-flow: hidden;"> log标志位置 </div> <div id="toolbar1" dojoType="dijit.Toolbar" style="height: 20px; width: 100%" dir="rtl"> <div id="btnQuit" dojoType="dijit.form.Button" onClick="quitSystem"> 退出系统 </div> <div id="btnChangepwd" dojoType="dijit.form.Button" onClick="changePassword"> 修改密码 </div> <div id="btnLock" dojoType="dijit.form.Button" onClick="lockSystem"> 锁定系统 </div> </div> </div> <div id="leftNav" dojoType="dojox.layout.ExpandoPane" title="操作菜单" style="width: 150px; over-flow: hidden;" region="left" splitter="true"> <div dojoType="dijit.layout.AccordionContainer" id="accordion" style="width: 150px; over-flow: hidden;"> <#list menus as first> <div dojoType="dijit.tree.ForestStoreModel" childrenAttrs="subMenus" store="${first.id}_Store" jsId="${first.id}_Model"> </div> <div dojoType="dijit.layout.ContentPane" title="${(first.name)!}" iconClass="${first.icon!}" id="${first.id}"> <div dojoType="dijit.Tree" id="${first.id}_Tree" openOnClick="true" showRoot="false" model="${first.id}_Model"> <mce:script type="dojo/method" event="getIconClass" args="item,opened"></mce:script> <mce:script type="dojo/method" event="onClick" args="item"></mce:script> </div> </div> </#list> </div> </div> <div jsId="mainTabContainer" id="mainTabContainer" region="center" dojoType="dijit.layout.TabContainer" style="width: 100%;"> </div> <div id="copyrightInfo" dojoType="dijit.Toolbar" region="bottom" style="height: 20px; text-align: center;"> <a href="target" mce_href="target">xxxx公司</a> </div> </div> <div dojoType="dijit.Dialog" jsId="dialog" id="dialog" loadingMessage="数据加载中，请稍后..."> <mce:script type="dojo/method" event="onHide"></mce:script> </div> <div dojoType="dijit.Dialog" id="confirm" jsId="confirm" duration="1" showTitle="true" style="width: 200px; height: auto"> <div id="confirmContent" class="dijitDialogPaneContentArea" style="text-align:center" mce_style="text-align:center"> </div> <div class="dijitDialogPaneActionBar"> <button dojoType="dijit.form.Button" type="button" onClick="confirm.onExecute();"> 确认 </button> <button dojoType="dijit.form.Button" type="button" onClick="confirm.onCancel();"> 取消 </button> </div> </div> <div dojoType="dijit.Dialog" id="_alert" jsId="_alert" showTitle="true" modal="true" style="width: 200px; height: auto"> <div id="alertContent" class="dijitDialogPaneContentArea" style="text-align:center" mce_style="text-align:center"> </div> <div class="dijitDialogPaneActionBar"> <button dojoType="dijit.form.Button" type="button" onClick="_alert.onExecute();"> 确认 </button> </div> </div> </body> </html> <mce:script type="text/javascript"></mce:script>

以下是主界面截图：

当点击菜单时，触发以下方法：

/** * 刷新标签页 * @param store 菜单数据源 * @param menu 菜单 */ function refreshTabContainer(store, menu) { //dojo.byId('decorator').style.display="block"; var id = "tab_" + store.getValue(menu, 'id'); var title = store.getValue(menu, 'name'); var url = "${path}/" + store.getValue(menu, 'url'); var icon = store.getValue(menu, 'icon'); openTab({id:id,title:title,url:url,icon:icon}); } /** * 打开一个新的标签页 * @param arg 标签页参数 */ function openTab(arg) { var id = arg.id; var title = arg.title; var url = arg.url; var icon = arg.icon || ""; //判断是否已经打开过此菜单 var idx = mainTabContainer.getChildren().length; for (var i = 0; i < mainTabContainer.getChildren().length; i++) { var child = mainTabContainer.getChildren()[i]; if (child.get('id') == id) { mainTabContainer.selectChild(child, true); dojo.query('iframe', child.attr('domNode')).attr('src', url); return; } } //如果没打开过，就添加一个新的页签 //添加新的页签之前先判断一下是否超过了最大的页签数限制 if (mainTabContainer.getChildren().length > 20) { Warn("超过了最大页签数的限制，请先关闭其他页签"); return; } var cp = new dijit.layout.ContentPane({"id":id ,"title":"<b>" + title + "</b>", closable: true,refreshOnShow:false}); cp.domNode.innerHTML = "<iframe frameborder='0' style='width:100%; height:99.5%' src="" + url + "" mce_src="" + url + ""></iframe>"; mainTabContainer.addChild(cp); mainTabContainer.selectChild(cp, true); }

这个方法打开了一个新的页面:

在功能区的界面上点击按钮，如果要打开一个新的dialog，在主界面上有一个全局的dialog，当点击功能区按钮需要打开一个新的dialog时调用以下方法:

parent.openDialog({ id:"user/add", url:"${path}/system/user.load.do", title:'新增用户' });

主界面中打开dialog的方法为:

/** * 打开一个对话框 * @param window 打开窗口的窗体对象 * @param url 打开窗体的url * @param ioArgs 打开窗体的参数 * @param title 打开窗体的标题 * @param width 打开窗体的高度 * @param height 打开窗体的高度 */ function openDialog(arg) { var url = arg.url; //增加一个随机数，防止请求不被提交 // if (url.indexOf('?') == -1) { // url = url + "?randomDateStr=" + new Date(); // } else { // url = url + "&randomDateStr=" + new Date(); // } var wd = arg.width || 800; var ht = arg.height || 600; var tt = arg.title || ''; dialog.set('title', tt); dialog.set('style', {width:wd + "px",height:ht + "px"}); var iframe = "<iframe frameborder='0' style='width: " + wd + "px; height: " + ht + "px;' src="" + url + "" mce_src="" + url + ""></iframe>"; dialog.set("content", iframe); dialog.show(); }

在dialog中嵌入了一个新的iframe，将新的窗口打开，打开后的窗口是: