使用easyui進行上左右佈局

時間 2019-11-25

標籤使用 easyui 進行左右佈局简体版

原文原文鏈接

在後臺管理系統開發的過程當中，上左右的佈局是最多見的頁面佈局方式，如今咱們來看看使用easyui這個jquery前端框架如何快速搭建一個可用的頁面框架。css

1.在頁面中引入easyui所需的文件html

1 <%-- 加載easyui的樣式文件，bootstrap風格 --%>
2 <link href="${ctx }/css/themes/bootstrap/easyui.css" rel="stylesheet">
3 <link href="${ctx }/css/themes/icon.css" rel="stylesheet">
4 <%-- 加載jquery和easyui的腳本文件 --%>
5 <script src="${ctx }/js/jquery-easyui-1.4.4/jquery.min.js"></script>
6 <script src="${ctx }/js/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
7 <script src="${ctx }/js/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

2.在頁面body部分構建必要的html結構前端

<body>
<div id="home-layout">
    <!-- 頁面北部，頁面標題 -->
    <div data-options="region:'north'" style="height:50px;">
    <!-- add your code -->
    </div>
    <!-- 頁面西部，菜單 -->
    <div data-options="region:'west',title:'菜單欄'" style="width:200px;">
        <div class="home-west">
            <ul id="home-west-tree"></ul>
        </div>
    </div>
    <!-- 頁面中部，主要內容 -->
    <div data-options="region:'center'">
        <div id="home-tabs">
            <div title="首頁">
                <h2 style="text-align: center">歡迎登陸</h2>
            </div>
        </div>
    </div>
</div>
</body>

這裏須要注意一點：easyui在使用layout佈局的時候，north、south須要指定高度，west、east須要指定寬度，而center會自動適應高和寬。node

3.使用js初始化easyui組件jquery

我我的比較推薦使用js代碼去初始化easyui組件，而不使用easyui標籤中的data-options屬性去初始化。由於對於後臺開發人員來講，寫js代碼可能比寫html標籤更加熟悉，並且這樣使得html代碼更加簡潔。json

<script>
$(function(){
    /*
     * 初始化layout
     */
    $("#home-layout").layout({
    //使layout自適應容器
    fit: true
    });

    /*
     * 獲取左側菜單樹，併爲其節點指定單擊事件
     */
    $("#home-west-tree").tree({
　　　　//加載菜單的數據，必需
       url: "${ctx }/pages/home-west-tree.json",
       method: "get",
　　　　//是否有層次線
       lines: true,
　　　　//菜單打開與關閉是否有動畫效果
       animate: true,
　　　　//菜單點擊事件
       onClick: function(node){
           if(node.attributes && node.attributes.url){
　　　　　　　　　//打開內容區的tab，代碼在其後
               addTab({
                   url: "${ctx }/" + node.attributes.url,
                   title: node.text
               });
           }
       }
   });

　　/*
    * 初始化內容區的tabs
    */
   $("#home-tabs").tabs({
       fit : true,
　　　　//tab頁是否有邊框
       border : false
   });
})
</script>
<script>
/*
 * 在內容區添加一個tab
 */
function addTab(params){
    var t = $("#home-tabs");
    var url = params.url;
    var opts = {
            title: params.title,
            closable: true,
            href: url,
            fit: true,
            border: false
    };
    //若是被選中的節點對應的tab已經存在，則選中該tab並刷新內容
    //不然打開一個新的tab
    if(t.tabs("exists", opts.title)){
        var tab = t.tabs("select", opts.title).tabs("getSelected");
        t.tabs("update", {
            tab: tab,
            options: opts
        });
    }else{
        t.tabs("add", opts);
    }
}
</script>

4.easyui-tree組件所需的json格式bootstrap

easyui使用的傳輸格式爲json，它對json內容的格式有比較嚴格的限制，因此請注意查看api。api

text爲樹的節點名稱，children則表示子節點，state表示關閉的狀態（咱們能夠利用這個屬性來構建延遲加載樹），而attributes則是easyui-tree爲咱們提供的一個自定義屬性，在這個屬性下，咱們能夠自定義屬性，例如我就在其中定義了url屬性，併爲其賦值。固然，咱們還可以爲其添加其餘自定義屬性。前端框架

[{
    "text":"區域管理",
    "attributes":{
        "url":"pages/consume/area/areaList.jsp"
    }
},{
    "text":"預定信息管理",
    "children":[{
        "text":"商戶預定信息查詢",
        "attributes":{
            "url":"/pages/consume/reservation/merchantReservation/merchantReservationList.jsp"
        }
    }]
},{
    "text":"准入申請管理",
    "children":[{
        "text":"商戶准入申請",
        "state":"closed",
        "children":[{
            "text":"商戶待處理申請",
            "attributes":{
                "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_wait"
            }
        },{
            "text":"商戶審批中申請",
            "attributes":{
                "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_current"
            }
        },{
            "text":"商戶審批經過申請",
            "attributes":{
                "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_pass"
            }
        },{
            "text":"商戶被拒絕申請",
            "attributes":{
                "url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_refuse"
            }
        }]
    }]
},{
    "text":"准入審批管理",
    "children":[{
        "text":"商戶審批管理",
        "state":"closed",
        "children":[{
            "text":"當前任務",
            "children":[{
                "text":"商戶當前初審任務",
                "attributes":{
                    "url":"pages/consume/approval/merchantApproval/merchantApprovalTrial.jsp"
                }
            },{
                "text":"商戶當前複審任務",
                "attributes":{
                    "url":"pages/consume/approval/merchantApproval/merchantApprovalRetrial.jsp"
                }
            }]
        },{
            "text":"商戶已完成任務",
            "attributes":{
                "url":"pages/consume/approval/merchantApproval/merchantApprovalDone.jsp"
            }
        },{
            "text":"商戶不經過任務",
            "attributes":{
                "url":"pages/consume/approval/merchantApproval/merchantApprovalRefuse.jsp"
            }
        }]
    }]
}]

就這樣，咱們使用easyui完成了簡單的上左右佈局。app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。