用dojo构架管理系统web前端

在管理系统中，往往更注重组件的完备，功能的可扩展，以及风格的统一，因此在前端组件中，选择了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"> <a href="https://www.jb51.cc/tag/tuichu/" target="_blank" class="keywords">退出</a>系统 </div> <div id="btnChangepwd" dojoType="dijit.form.Button" onClick="changePassword"> <a href="https://www.jb51.cc/tag/xiugaimima/" target="_blank" class="keywords">修改密码</a> </div> <div id="btnLock" dojoType="dijit.form.Button" onClick="lockSystem"> 锁定系统 </div> </div> </div> <div id="leftNav" dojoType="dojox.layout.ExpandoPane" title="操作<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>" style="width: 150px; over-flow: hidden;" region="left" splitter="true"> <div dojoType="dijit.layout.Accor<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>nContainer" id="accor<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>n" 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>

以下是主界面截图：

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

/** * 刷新<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>页 * @param store <a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>数据源 * @param menu <a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a> */ function refreshTabContainer(store,true); }

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

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

parent.openDialog({ id:"user/add",url:"${path}/system/user.load.do",title:'新增<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>' });

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

/** * 打开一个对话框 * @param window 打开窗口的窗体对象 * @param url 打开窗体的url * @param ioArgs 打开窗体的参数 * @param title 打开窗体的<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a> * @param width 打开窗体的高度 * @param height 打开窗体的高度 */ function openDialog(arg) { var url = arg.url; //<a href="https://www.jb51.cc/tag/zengjia/" target="_blank" class="keywords">增加</a>一个<a href="https://www.jb51.cc/tag/suiji/" target="_blank" class="keywords">随机</a>数，防止请求不被提交 // 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',iframe); dialog.show(); }

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

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

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

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

主界面中的方法是

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

/** * <a href="https://www.jb51.cc/tag/guanbi/" target="_blank" class="keywords">关闭</a>dialog */ function closeDialog() { dialog.hide(); }

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

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

遇到的问题：

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

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

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

原文链接：https://www.f2er.com/dojo/291700.html

用dojo构架管理系统web前端

猜你在找的Dojo相关文章