easyUI 如何不跳轉頁面,只是加載替換center部分內容


 以前做的一個故障報修系統,前端框架使用easyUI框架,layout布局,center使用datagrid 。點擊左邊樹形菜單時時頁面跳轉,想要知道如何點擊菜單時不進行頁面跳轉,而是只對center模塊的東西進行加載更新?

 

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)

<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> -->

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM