之前作的一個故障報修系統,前端框架使用easyUI框架,layout佈局,center使用datagrid 。點擊左邊樹形菜單時時頁面跳轉,想要知道如何點擊菜單時不進行頁面跳轉,而是隻對center模塊的東西進行加載更新?javascript
HTML代碼:html
<div class="easyui-layout" style="width:100%;height:100%;" data-options="fit:true"> <!-- 上邊 --> <div region="north" style="height:80px;background-color:#2d8bef; overflow: hidden;" > <div id="pageNorth" class="easyui-panel" style="width: 100%;background-color:#2d8bef;" border="false"> </div> </div> <!-- 左邊 --> <div region="west" style="width:150px; overflow: hidden;"> <div id="pageWest" class="easyui-panel" style="width: 100%;" border="false"> </div> </div> <!-- 中間區域 --> <div id="content" region="center" style="overflow: hidden;" border="false"> <div id="pageContent" class="easyui-panel" style="width: 100%;height:100%;" border="false"> </div> </div> <!-- 下邊版權區 --> <div region="south" style="height: 30px; background-color: #2d8bef; text-align:center; line-height: 30px; color:#fff;" border="false"> 版權全部 © XX XXX有限公司 </div> </div>
jQuery代碼: 使用panel 的 refresh 方法前端
$(function(){ $("#pageNorth").panel("refresh", "title.html"); $("#pageWest").panel("refresh", "menu.html"); openURL("歡迎您", "welcome.html"); }); function openURL(title, url) { $("#pageContent").panel({ title: title, href: url }); }
在menu中的每一個連接添加點擊事件時調用函數openURL() (兩種方法均可以實現 也能夠在js代碼中使用事件委託,再分別判斷具體點擊的是哪一個 連接,switch case)java
<li><span><a href="javascript:openURL('學校管理', 'school_mng/school.html')">學校管理</a></span></li> <!-- <li><span><a href="javascript:void(0)" onclick="openURL('學校管理', 'school_mng/school.html')">學校管理</a></span></li> -->