用dojo构架管理系统web前端

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

walle1027

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

阅读量1.1k

点赞数

文章标签： 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，将新的窗口打开，打开后的窗口是:

打开的dialog和原来功能区的原始窗口的时间交互通过主界面来传递，这里面使用了dojo的事件注册和触发机制。

dialog如果要调用原来窗口的方法，用以下代码

parent.publish("user/save"); parent.closeDialog();

主界面中的方法是

/** * 发布一个事件 */ function publish(topic, args) { dojo.publish(topic, args); }

/** * 关闭dialog */ function closeDialog() { dialog.hide(); }

在整个这样的构架中，任何功能区的页面上的脚本都是通过主界面和其他功能区的界面进行事件交互，功能区的页面并不直接交互。

这样保证了代码的隔离性。

遇到的问题：

1 这样使用iframe加载的功能区的页面时，因为是一个独立的html，所以要加载很多dojo的组件和源码，导致单个功能区加载速度比较慢。平均每页的加载速度在2-3秒内

2 由于dialog使用了dojo的dijit.Dialog组件，此组件在新版1.6中有bug，升级了以后新的dialog不能打开。

3 在tab页上加右键菜单不好加

walle1027

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用dojo构架管理系统web前端

在管理系统中，往往更注重组件的完备，功能的可扩展，以及风格的统一，因此在前端组件中，选择了dojo，原因有三点： 1 开源，并且有强大的团队维护 2 组件化设计思想 3 风格统一管理系统后台用j2EE，采用常规的struts2+spring+hibernate+freemarker。前端采用dojo整体构架理念是用一个总的布局页面规定log区，菜单区，功能区，其他信息展示区的布局。当菜单点击的时候，切换功能区。功能区采用iframe加载，保证功能区页面是个独立的html，以便被
复制链接

扫一扫