【連載】研究EasyUI系統— Layout元件

阿新 • • 發佈：2019-01-21

　　layout看它的名稱便知道是一個用於佈局的元件。事實上也是如此，layout由五個部分組成，分別位於螢幕的上、下、左、右、中五個位置（在easyui中用東、南、西、北、中來描述）。
　　 layout效果圖
　　上圖便是layout元件的效果圖。layout依賴於panel和resizable兩個元件，因此繼承了兩個元件的屬性。layout元件除了中部的區域外，其他四個區域都是可選的，在實際專案中按需增刪。另外，這四個區域也是可伸縮的。我們依然通過導航選單、tab頁和資料列表的組合，描述layout元件的用法。
　　先看一下layout元件製成導航選單的效果圖。
layout導航選單效果圖
　　同時附上程式碼。
　　
　　layoutDemo.php

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css" />
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
        <script 
 type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
        <title>layoutDemo</title> 

        <style>
            a {
                text-decoration:none;
                font-size: 13px;
                color:black
            }
            .nav-item {
                padding: 10px;
                border: none;
            }
    </style>
    <script>
        /* addTab方法用來新建或切換tab頁 */
        function addTab(url,title) {
            if ($("#content_tab").tabs('exists', title)) {
                $("#content_tab").tabs('select', title);
            } else {
                $("#content_tab").tabs('add', {
                    title: title,
                    href: url,
                    closable: true,
                    cache:false
                 });
            }
        }
    </script>
    </head>
    <body class="easyui-layout" id="layout">
    <!-- north區域使用了layout的href屬性，載入pageHeader.php作為頁面頭部 -->
        <div style="height:80px;" data-options="region:'north',split:false,href:'pageHeader.php'" ></div>
        <div style="width:200px;" data-options="region:'west',title:'導航選單',split:true">
            <div class="nav-item">
                <table>
                    <tr>
                        <td style="height:30px;"><img src="images/icon_menu.png" alt="" /></td>
                        <td>
                            <a href="javascript:void(0);" onclick="addTab('pageDepartment.php','部門資訊')">部門資訊</a>
                        </td>
                    </tr>
                    <tr>
                        <td style="height:30px;"><img src="images/icon_menu.png" alt="" /></td>
                        <td>
                            <a href="javascript:void(0);" onclick="addTab('#','人員資訊')">人員資訊</a>
                        </td>
                    </tr>
                </table> 
            </div>
        </div>
        <!-- center區域包含tab元件，用來開啟各頁 -->
        <div data-options="region:'center'" style="padding:5px">
            <div id="content_tab" name="content_tab" class="easyui-tabs" style="width:100%;height:auto;" data-options="plain:true"></div>
        </div>
    </body>
</html>

pageHeader.php

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div style="height:78px;background: #efefef">
            <span style="font-size: 26px;font-family: '黑體';line-height: 78px;padding-left: 20px;">Layout元件示例頁面</span>
        </div>
    </body>
</html>

pageDepartment.php

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/easyui.css" />
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
        <title>部門資訊</title>
    </head>
    <body>
        <div class="container" style="overflow-x: hidden">
        <!-- “部門資訊”頁面包含了datagrid元件，我們會對該元件專門講解
          datagrid元件從dep.json讀取資訊並顯示 -->
            <div class="easyui-datagrid" id="gridDep"></div>
        </div>
        <script>
            $("#gridDep").datagrid({
                pagination:true,
                title:'部門資訊',
                fitColumns:false,
                url:'dep.json',
                rownumbers: true,
                singleSelect:true,
                loadMsg: '正在獲取資料，請稍後',
                pageSize:20,
                pageList:[20],
                columns:[[
                    {field:'ck',checkbox:true},
                    {field:'dep1',title:'序號',align:'center',hidden:true},
                    {field:'dep2',title:'部門名稱',align:'center',width:'20%'},
                    {field:'dep3',title:'成立時間',align:'center',width:'20%'},
                    {field:'dep4',title:'上級部門',align:'center',width:'20%'},
                    {field:'dep5',title:'部門主管',align:'center',width:'18%'},
                    {field:'dep6',title:'分管領導',align:'center',width:'15%'}
                ]]
            });
        </script>
    </body>
</html>

dep.json

[
    {"dep1": 1,"dep2": "總務部","dep3": "2014-1-1","dep4": "公司總部","dep5": "張三","dep6": "王總"},
    {"dep1": 2,"dep2": "銷售部","dep3": "2014-1-5","dep4": "公司總部","dep5": "李四","dep6": "李總"},
    {"dep1": 3,"dep2": "軟體事業部","dep3": "2014-3-20","dep4": "公司總部","dep5": "王五","dep6": "王總"},
    {"dep1": 4,"dep2": "硬體事業部","dep3": "2014-5-6","dep4": "公司總部","dep5": "趙六","dep6": "王總"},
    {"dep1": 5,"dep2": "銷售一中心","dep3": "2014-2-6","dep4": "銷售部","dep5": "小明","dep6": "李四"},
    {"dep1": 6,"dep2": "系統整合與維護中心","dep3": "2014-3-25","dep4": "軟體事業部","dep5": "小強","dep6": "王五"}
]

　　上述程式碼簡單地展現了layout元件的基本用法。裡面涉及到datagrid元件，我們會另起一文講述。
　　我們可以認為layout元件由框架和麵板兩部分組成。根據上述程式碼，<body>便是框架，因為它包含了內部三個面板。面板自然就是包含於中的三個<div>。

　　layout元件屬性（框架）

屬性名稱	屬性值型別	屬性預設值	描述
fit	布林值	false	如true，元件則填充父容器。

　　layout元件屬性（面板）

屬性名稱	屬性值型別	屬性預設值	描述
title	字串	null	面板標題。
region	字串	面板位置。共“north”、“south”、“west”、“east”、“center”五種。
border	布林值	true	是否顯示面板邊框。
split	布林值	false	是否顯示分隔欄，如有分隔欄，使用者可改變面板大小。
iconCls	字串	null	面板頭部的圖示樣式。
href	字串	null	指定該屬性後，面板會載入該屬性所指定的頁面。
collapsible	布林值	true	是否顯示可伸縮按鈕。
minWidth	數值	10	面板最小寬度。
minHeight	數值	10	面板最小高度。
maxWidth	數值	10000	面板最大寬度。
maxHeight	數值	10000	面板最大高度。

　　layout元件中有關面板的屬性其實都不復雜，也不用太多講解。
　　region、title、href用法已在程式碼x-1中詳細展示。west面板中，collapsible 屬性設定為true，便可以見到west面板右上角的可伸縮按鈕圖示。iconCls屬性用法請見panel部分。
（http://blog.csdn.net/redeg/article/details/54311658）
　　split效果圖如下。
split屬性效果圖
　　上圖中，我們將“北部區域”的面板(region 屬性值為“north”)的split屬性設為false,意為不顯示分隔欄。同時又將“西部區域”的面板(region 屬性值為“west”)的split屬性設為true，圖中可見“西部區域”與“中部區域”之間有一條分隔欄，使用者可以拖動上述分隔欄調整“西部區域”面板大小。
　　layout元件方法：

方法名稱	引數	描述
resize	param	調整layout元件大小。
panel	region	返回指定的面板物件。
collapse	region	收縮指定的面板。
expand	region	展開指定的面板。
add	options	新增面板。
remove	region	刪除指定的面板。

　　resize方法用於調整layout元件（是容器而不是面板）引數param是一組json，包含寬度和高度。
$("#layout").layout("resize", {width:"80%", height:400});
　　panel、collapse、expand、remove功能比較簡單，他的引數是面板區域。除panel外，其他三個方法的引數分別為“north”、“south”、“west”、“east”，panel方法還增加了“center”引數。
$("#layout").layout("remove","north");
　　add方法用法請參見tabs元件一文。
（http://blog.csdn.net/redeg/article/details/56844983）

【連載】研究EasyUI系統— Layout元件

【連載】研究EasyUI系統— Layout元件

【連載】研究EasyUI系統— Window元件

【連載】研究EasyUI系統—Panel元件（方法和事件）

【連載】研究EasyUI系統— Resizable元件

【連載】研究EasyUI系統—Tree元件（方法）

【連載】研究EasyUI系統—Easyloader元件

【連載】研究EasyUI系統—ProgressBar元件

【連載】研究EasyUI系統—Panel元件（屬性）

【連載】研究EasyUI系統—Panel元件（概述）

【原創】.NET平臺機器學習元件-Infer.NET連載(一)介紹

【原創】.NET平臺機器學習元件-Infer.NET連載(二)貝葉斯分類器

【連載】計算機組成原理 --- 第四章指令系統

【iOS】UICollectionView自己定義Layout之蜂窩布局

【Linux】Linux操作系統學習路線

【轉】以操作系統的角度述說線程與進程

【Java】得到當前系統時間，精確到毫秒

【CCF】模板生成系統

【CQOI2015】任務查詢系統（主席樹）

【Linux】Linux操作系統期末復習筆記

【北京】高級系統實施工程師 10—30w/年

【連載】研究EasyUI系統— Layout元件

相關推薦