jQuery EasyUI 測試 : Layouy 排版

測試完 Panel, Accordion, 以及 Tabs 後, 網頁的基本容器用法大致熟悉了, 接下來就是重頭戲 : 網頁排版, EasyUI 提供了 Layout 元件來處理版面問題, 其實 Layout 元件跟 Java Swing 的 BorderLayout 是同樣的東西啦! 都是用來排版, 只不過 Java Swing 常用在桌面程式 (也可以用在網頁!), 而 EasyUI 純粹用在網頁排版而已, 都是將一個版面分成東西南北中五個區域, 分別放置適當的內容. 北方通常用作 Banner, 例如網站的 Logo 或搜尋列; 南方通常當作 Footer, 例如版權宣告, 來站人數等等; 西方通常是導覽列; 東方則常用來做其他訊息如外部連結, 廣告行銷等等. 關於 Java 的排版請參考 :

# Java Swing 測試 : JButton 與排版

而 EasyUI 的 Layout 元件 API 參見 :

# http://www.jeasyui.com/documentation/layout.php

與 EasyUI 的其他容器像 Tabs 與 Accordion 一樣, Layout 元件也是用兩層 div 建構的, 其中第一層 div 主管整個版面結構例如尺寸等, 須設定樣式類別為 "easyui-layout"; 第二層 div 負責東西南北中五個方位版面 (每一個都是 Panel), 必須在 data-options 屬性中分別指定所在之 region, 如下面範例 1 所示 :

範例 1 : http://tony1966.xyz/test/easyuitest/easyui-layout-1.htm [看原始碼]

  <div class="easyui-layout" style="width:300px;height:200px;">
    <div data-options="region:'north',title:'North'" style="height:50px;"></div>
    <div data-options="region:'east',title:'East'" style="width:100px;"></div>
    <div data-options="region:'south',title:'South'" style="height:50px;"></div>
    <div data-options="region:'west',title:'West'" style="width:100px;"></div>
    <div data-options="region:'center',title:'Center'" style="height:100px;"></div>
  </div>

此例中 BorderLayout 的五個區域 (region) 是設在 HTML5 的 data-options 屬性中, 每一個區域可以用 title 設定其標題, 而各區域尺寸則是用 style 來設定. 注意, 高度 height 包含標題.

除了用 data-options 屬性來設定外, 也可以直接用 region 與 title 屬性, 如範例 2 所示 :

範例 2 : http://tony1966.xyz/test/easyuitest/easyui-layout-2.htm [看原始碼]

   <div class="easyui-layout" style="width:300px;height:200px;">
    <div region="north" title="North" style="height:50px;"></div>
    <div region="east" title="East" style="width:100px;"></div>
    <div region="south" title="South" style="height:50px;"></div>
    <div region="west" title="West" style="width:100px;"></div>
    <div region="center" title="Center" style="height:100px;"></div>
  </div>

此法與範例 1 效果相同. 當然也可以完全用 Javascript 來做, 這時容器只要一個有 id 屬性的 div 元素即可, 如下面範例 3 所示 :

範例 3 : http://tony1966.xyz/test/easyuitest/easyui-layout-3.htm [看原始碼]

  <div id="layout-1"></div>
  <script language="javascript">
    $(document).ready(function(){
      $("#layout-1").layout({width:300,height:200});
      $("#layout-1").layout("add",{region:"north",title:"North",height:50});
      $("#layout-1").layout("add",{region:"east",title:"East",width:100});
      $("#layout-1").layout("add",{region:"south",title:"South",height:50});
      $("#layout-1").layout("add",{region:"west",title:"West",width:100});
      $("#layout-1").layout("add",{region:"center",title:"Center",height:100});
      });
  </script>

這裡我們先初始化 Layout 並設定尺寸, 然後呼叫 add 方法加入五個區域的面板.

上面範例中的五個區域的面板都沒有內容, 而且各區域邊界固定, 無法調整. 若要設定內容, 與 Panel 一樣是用 content 屬性設定, 而要讓邊界可調整, 則要將 split 屬性設為 true, 如範例 4 所示 :

範例 4 : http://tony1966.xyz/test/easyuitest/easyui-layout-4.htm [看原始碼]

  <div id="layout-1"></div>
  <script language="javascript">
    $(document).ready(function(){
      $("#layout-1").layout({width:300,height:200});
      $("#layout-1").layout("add",{
        region:"north",
        title:"North",
        height:50,
        content:"北",
        split:true});
      $("#layout-1").layout("add",{
        region:"east",
        title:"East",
        width:100,
        content:"東",
        split:true});
      $("#layout-1").layout("add",{
        region:"south",
        title:"South",
        height:50,
        content:"南",
        split:true});
      $("#layout-1").layout("add",{
        region:"west",
        title:"West",
        width:100,
        content:"西",
        split:true});
      $("#layout-1").layout("add",{
        region:"center",
        title:"Center",
        height:100,
        content:"中",
        split:true});
      });
  </script>

可見當 split 設為 true 後, 各區域邊界變粗了, 而且可拖曳調整區域大小. 如果是用 HTML5 設定, 則如範例 5 所示 :

範例 5 : http://tony1966.xyz/test/easyuitest/easyui-layout-5.htm [看原始碼]

  <div class="easyui-layout" style="width:300px;height:200px;">
    <div data-options="region:'north',title:'North',split:true" style="height:50px;">北</div>
    <div data-options="region:'east',title:'East',split:true" style="width:100px;">東</div>
    <div data-options="region:'south',title:'South',split:true" style="height:50px;">南</div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;">西</div>
    <div data-options="region:'center',title:'Center',split:true" style="height:100px;">中</div>
  </div>

從以上範例可知, Layout 元件除了中間的 Center 外, 其他東西南北四個區域預設都有一個縮合展開鈕, 如果要取消此鈕, 只要加上 collapsible:false 設定即可, 如下列範例 6 所示 :

範例 6 : http://tony1966.xyz/test/easyuitest/easyui-layout-6.htm [看原始碼]

  <div id="layout-1"></div>
  <script language="javascript">
    $(document).ready(function(){
      $("#layout-1").layout({width:300,height:200});
      $("#layout-1").layout("add",{
        region:"north",
        title:"North",
        height:50,
        content:"北",
        collapsible:false});
      $("#layout-1").layout("add",{
        region:"east",
        title:"East",
        width:100,
        content:"東",
        collapsible:false});
      $("#layout-1").layout("add",{
        region:"south",
        title:"South",
        height:50,
        content:"南",
        collapsible:false});
      $("#layout-1").layout("add",{
        region:"west",
        title:"West",
        width:100,
        content:"西",
        collapsible:false});
      $("#layout-1").layout("add",{
        region:"center",
        title:"Center",
        height:100,
        content:"中"});
      });
  </script>

這樣各區域位置都被固定了,  不能縮合展開了. 跟 Panel, Accordion 與 Tabs 一樣, 可以透過 href 來指定後端伺服器資料來源, 使用Ajax 方式擷取, 如下面範例 7 所示 :

範例 7 : http://tony1966.xyz/test/easyuitest/easyui-layout-7.htm [看原始碼]

  <div id="layout-1"></div>
  <script language="javascript">
    $(document).ready(function(){
      $("#layout-1").layout({width:300,height:200});
      $("#layout-1").layout("add",{
        region:"north",
        title:"North",
        height:50,
        href:"hellosomebody-get.php",
        split:true});
      $("#layout-1").layout("add",{
        region:"east",
        title:"East",
        width:100,
        href:"hellosomebody-get.php",
        split:true});
      $("#layout-1").layout("add",{
        region:"south",
        title:"South",
        height:50,
        href:"hellosomebody-get.php",
        split:true});
      $("#layout-1").layout("add",{
        region:"west",
        title:"West",
        width:100,
        href:"hellosomebody-get.php",
        split:true});
      $("#layout-1").layout("add",{
        region:"center",
        title:"Center",
        height:100,
        href:"hellosomebody-get.php",
        split:true});
      });
  </script>

這裡使用的後端程式 hellosomebody-get.php 如下 :

<?php
header('Content-Type: text/html;charset=UTF-8');
$name=$_GET["name"];
$surname=$_GET["surname"];
echo "Hello! ".$name." ".$surname."<br>".
        "The time is ".date("Y-m-d H:i:s");
?>

如果要讓 Layout 版面放大到與父容器同樣大小, 可以將 fit 屬性設為 true, 如下列範例 8 所示 :

範例 8 : http://tony1966.xyz/test/easyuitest/easyui-layout-8.htm [看原始碼]

  <div id="layout-1"></div>
  <script language="javascript">
    $(document).ready(function(){
      $("#layout-1").layout({width:300,height:200,fit:true});
      $("#layout-1").layout("add",{
        region:"north",
        title:"North",
        height:200,
        href:"hellosomebody-get.php",
        split:true});
      $("#layout-1").layout("add",{
        region:"east",
        title:"East",
        width:200,
        href:"hellosomebody-get.php",
        split:true});
      $("#layout-1").layout("add",{
        region:"south",
        title:"South",
        height:200,
        href:"hellosomebody-get.php",
        split:true});
      $("#layout-1").layout("add",{
        region:"west",
        title:"West",
        width:200,
        href:"hellosomebody-get.php",
        split:true});
      $("#layout-1").layout("add",{
        region:"center",
        title:"Center",
        height:200,
        href:"hellosomebody-get.php",
        split:true});
      });
  </script>

可見將 fit 設為 true 後, 整個 Layout 就放大到與其父容器 body 同樣大小了.

接著測試 remove 方法, 它可將指定的區域面板刪除, 須傳入 "east", "west", "south", "north", "center" 這五個字串之一, 如下列範例 9 所示 :

範例 9 : http://tony1966.xyz/test/easyuitest/easyui-layout-9.htm [看原始碼]

  <a href="#" class="easyui-linkbutton" id="del-east">刪除 East</a>
  <a href="#" class="easyui-linkbutton" id="del-west">刪除 West</a>
  <a href="#" class="easyui-linkbutton" id="del-south">刪除 South</a>
  <a href="#" class="easyui-linkbutton" id="del-north">刪除 North</a>
  <a href="#" class="easyui-linkbutton" id="del-center">刪除 Center</a>
  <br><br>
  <div id="layout-1" class="easyui-layout" style="width:300px;height:200px;">
    <div data-options="region:'north',title:'North'" style="height:50px;"></div>
    <div data-options="region:'east',title:'East'" style="width:100px;"></div>
    <div data-options="region:'south',title:'South'" style="height:50px;"></div>
    <div data-options="region:'west',title:'West'" style="width:100px;"></div>
    <div data-options="region:'center',title:'Center'" style="height:100px;"></div>
  </div>
  <script language="javascript">
    $(document).ready(function(){
      $("#del-east").bind("click",function(){
        $("#layout-1").layout("remove","east");
        });
      $("#del-west").bind("click",function(){
        $("#layout-1").layout("remove","west");
        });
      $("#del-south").bind("click",function(){
        $("#layout-1").layout("remove","south");
        });
      $("#del-north").bind("click",function(){
        $("#layout-1").layout("remove","north");
        });
      $("#del-center").bind("click",function(){
        $("#layout-1").layout("remove","center");
        });
      });
  </script>

此例在 Layout 元件上面擺了可刪除五個區域的按鈕, 按下按鈕會呼叫 remove 方法刪除對應的區域面板. 如圖為刪除 East 與 Center 後的結果, 可見刪除後該區域會變成空白. 注意, 中央面板是必要面板, 如果刪除了 Center 面板, 其他區域將無法縮合與展開.

除了每個區域標題右方預設的縮合展開鈕外, Layout 元件還有 expand 與 collapse 方法可動態地展開與縮合各區域面板, 須傳入 "east", "west", "south", "north" 這四個字串之一 (傳入 "center" 無效, 因中央面板為必要面板, 不能縮合與展開). 如下列範例 10 所示 :

範例 10 : http://tony1966.xyz/test/easyuitest/easyui-layout-10.htm [看原始碼]

  <a href="#" class="easyui-linkbutton" id="collapse-east">縮合 East</a>
  <a href="#" class="easyui-linkbutton" id="collapse-west">縮合 West</a>
  <a href="#" class="easyui-linkbutton" id="collapse-south">縮合 South</a>
  <a href="#" class="easyui-linkbutton" id="collapse-north">縮合 North</a>
  <a href="#" class="easyui-linkbutton" id="collapse-center">縮合 Center</a>
  <br>
  <a href="#" class="easyui-linkbutton" id="expand-east">展開 East</a>
  <a href="#" class="easyui-linkbutton" id="expand-west">展開 West</a>
  <a href="#" class="easyui-linkbutton" id="expand-south">展開 South</a>
  <a href="#" class="easyui-linkbutton" id="expand-north">展開 North</a>
  <a href="#" class="easyui-linkbutton" id="expand-center">展開 Center</a>
  <br><br>
  <div id="layout-1" class="easyui-layout" style="width:300px;height:200px;">
    <div data-options="region:'north',title:'North'" style="height:50px;"></div>
    <div data-options="region:'east',title:'East'" style="width:100px;"></div>
    <div data-options="region:'south',title:'South'" style="height:50px;"></div>
    <div data-options="region:'west',title:'West'" style="width:100px;"></div>
    <div data-options="region:'center',title:'Center'" style="height:100px;"></div>
  </div>
  <script language="javascript">
    $(document).ready(function(){
      $("#collapse-east").bind("click",function(){
        $("#layout-1").layout("collapse","east");
        });
      $("#collapse-west").bind("click",function(){
        $("#layout-1").layout("collapse","west");
        });
      $("#collapse-south").bind("click",function(){
        $("#layout-1").layout("collapse","south");
        });
      $("#collapse-north").bind("click",function(){
        $("#layout-1").layout("collapse","north");
        });
      $("#collapse-center").bind("click",function(){
        $("#layout-1").layout("collapse","center");
        });
      $("#expand-east").bind("click",function(){
        $("#layout-1").layout("expand","east");
        });
      $("#expand-west").bind("click",function(){
        $("#layout-1").layout("expand","west");
        });
      $("#expand-south").bind("click",function(){
        $("#layout-1").layout("expand","south");
        });
      $("#expand-north").bind("click",function(){
        $("#layout-1").layout("expand","north");
        });
      $("#expand-center").bind("click",function(){
        $("#layout-1").layout("expand","center");
        });
      });
  </script>

此例放了兩排連結按鈕來展開與縮合各區域面板. 注意, 中央面板 Center 無法縮合與展開, 因為它是必要顯示之面板.

接著測試 resize 方法, 此方法可動態調整整個 Layout 元件的尺寸, 須傳入 width 與 height 組成之物件實體, 如下列範例 11 所示 :

範例 11 : http://tony1966.xyz/test/easyuitest/easyui-layout-11.htm [看原始碼]

  <a href="#" class="easyui-linkbutton" id="restore">復原</a>
  <a href="#" class="easyui-linkbutton" id="enlarge">放大</a>
  <br><br>
  <div id="layout-1" class="easyui-layout" style="width:300px;height:200px;">
    <div data-options="region:'north',title:'North'" style="height:50px;"></div>
    <div data-options="region:'east',title:'East'" style="width:100px;"></div>
    <div data-options="region:'south',title:'South'" style="height:50px;"></div>
    <div data-options="region:'west',title:'West'" style="width:100px;"></div>
    <div data-options="region:'center',title:'Center'" style="height:100px;"></div>
  </div>
  <script language="javascript">
    $(document).ready(function(){
      $("#restore").bind("click",function(){
        $("#layout-1").layout("resize",{width:"300px",height:"200px"});
        });
      $("#enlarge").bind("click",function(){
        $("#layout-1").layout("resize",{width:"50%",height:400});
        });
      });
  </script>

此處放大時會將寬度放大為瀏覽器寬度之 50%, 注意, width 與 height 若非純數字, 則必須視為字串, 須用引號括起來.

接下來測試 panel 方法, 它會傳回指定區域的面板之 Panel 物件, 因此可以動態調整該區域之屬性, 例如尺寸或資料來源等, 如範例 12 所示 :

範例 12 : http://tony1966.xyz/test/easyuitest/easyui-layout-12.htm [看原始碼]

  <a href="#" class="easyui-linkbutton" id="change">更改 Center</a>
  <br><br>
  <div id="layout-1" class="easyui-layout" style="width:300px;height:200px;">
    <div data-options="region:'north',title:'North'" style="height:50px;"></div>
    <div data-options="region:'east',title:'East'" style="width:100px;"></div>
    <div data-options="region:'south',title:'South'" style="height:50px;"></div>
    <div data-options="region:'west',title:'West'" style="width:100px;"></div>
    <div data-options="region:'center',title:'Center'" style="height:100px;"></div>
  </div>
  <script language="javascript">
    $(document).ready(function(){
      $("#change").bind("click",function(){
        var p=$("#layout-1").layout("panel","center");
        p.panel("setTitle","西");
        p.panel("refresh","hellosomebody-get.php");
        var opt=p.panel("options");
        $.messager.alert("Info","Center 標題已改為 : " + opt.title);
        });
      });
  </script>

此處我們呼叫 panel 方法取得中央區域的 Panel 物件後, 即可使用 Panel 的 refresh 方法更新其資料來源, 用 setTitle 更新其標題.

當然, 也可以將要更新的屬性直接用物件實體傳進去, 如範例 13 所示 ;

範例 13 : http://tony1966.xyz/test/easyuitest/easyui-layout-13.htm [看原始碼]

  <a href="#" class="easyui-linkbutton" id="change">更改 Center</a>
  <br><br>
  <div id="layout-1" class="easyui-layout" style="width:300px;height:200px;">
    <div data-options="region:'north',title:'North'" style="height:50px;"></div>
    <div data-options="region:'east',title:'East'" style="width:100px;"></div>
    <div data-options="region:'south',title:'South'" style="height:50px;"></div>
    <div data-options="region:'west',title:'West'" style="width:100px;"></div>
    <div data-options="region:'center',title:'Center'" style="height:100px;"></div>
  </div>
  <script language="javascript">
    $(document).ready(function(){
      $("#change").bind("click",function(){
        var p=$("#layout-1").layout("panel","center");
        p.panel({
          closable:true,
          tools:[{
            iconCls:"icon-add",
            handler:function(){$.messager.alert("Info","add")}
            }]
          });
        });
      });
  </script>

按下更改鈕, 會在中央區域標題列右端加上兩個按鈕, 按 closable 會移除中央面板, 而 Add 則會彈出訊息框. 注意, 這裡 tools 屬性控制的是標題列右方的工具按鈕, 不要跟 iconCls 屬性搞混了, iconCls 是控制標題列左方圖示, 如下面範例 14 :

範例 14 : http://tony1966.xyz/test/easyuitest/easyui-layout-14.htm [看原始碼]

  <a href="#" class="easyui-linkbutton" id="change">更改 Center</a>
  <br><br>
  <div id="layout-1" class="easyui-layout" style="width:300px;height:200px;">
    <div data-options="region:'north',title:'North'" style="height:50px;"></div>
    <div data-options="region:'east',title:'East'" style="width:100px;"></div>
    <div data-options="region:'south',title:'South'" style="height:50px;"></div>
    <div data-options="region:'west',title:'West'" style="width:100px;"></div>
    <div data-options="region:'center',title:'Center'" style="height:100px;"></div>
  </div>
  <script language="javascript">
    $(document).ready(function(){
      $("#change").bind("click",function(){
        var p=$("#layout-1").layout("panel","center");
        p.panel({
          iconCls:"icon-ok",
          tools:[{
            iconCls:"icon-add",
            handler:function(){$.messager.alert("Info","add")}
            }]
          });
        });
      });
  </script>

關於 Panel 的測試, 請參考 :

# jQuery EasyUI 測試 : Panel 面板

最後來玩稍微複雜一點的, 把之前測試 datagrid 的兩個主要範例放進 Layout 面板裡, 使用最常見的 west-center 版面, 西方面板放置超連結, 中央面板放置結果, 如範例 15 所示 :

範例 15 : http://tony1966.xyz/test/easyuitest/easyui-layout-15.htm [看原始碼]

  <div id="layout-1" class="easyui-layout" style="width:800px;height:400px;">
    <div data-options="region:'west',title:'範例',split:true" style="width:150px;">
      <ul>
        <li><a href="#" id="exam-1">Exam-1</a></li>
        <li><a href="#" id="exam-2">Exam-2</a></li>
      </ul>  
    </div>
    <div id="content" data-options="region:'center',title:'結果',split:true"></div>
  </div>
  <script language="javascript">
    $(document).ready(function(){
      $("#exam-1").bind("click",function(){
        var html='<table id="grid1"></table>';
        $("#content").html(html);
        $('#grid1').datagrid({
          fitColumns:true,
          border:false,
          url:'get_stocks_search.php',
          columns:[[
            {field:'name',title:'股票名稱',width:80,sortable:true},
            {field:'id',title:'股票代號',width:80,sortable:true},
            {field:'close',title:'收盤價 (元)',width:100,align:'right',sortable:true},
            {field:'volumn',title:'成交量 (張)',width:100,align:'right',sortable:true},
            {field:'meeting',title:'股東會日期',align:'left',sortable:true},
            {field:'election',title:'董監改選',width:80,align:'center',sortable:true},
            {field:'category',title:'類股',width:60,align:'center',sortable:true}
            ]],
          singleSelect:true,
          collapsible:true
          });
        });
      $("#exam-2").bind("click",function(){
        var html='<table id="grid2"></table>';
        $("#content").html(html);
        $('#grid2').datagrid({        
          fitColumns:true,
          border:false,
          url:'get_stocks_list_search.php',
          columns:[[
            {field:'stock_name',title:'股票名稱',width:100,sortable:true},
            {field:'stock_id',title:'股票代號',width:100,sortable:true}
            ]],
          singleSelect:true,
          collapsible:true,
          pagination:true,
          pageSize:10,
          rownumbers:true
          });
        });
      });
  </script>

此例中, 點選 west 區域的超連結時, 會用 html 方法更新中央區域面板的內容, 寫入一個 datagrid 容器 (div) 到  DOM 內, 然後就可以用其 id 來初始化 datagrid, 並設定資料來源為遠端之 PHP 程式, 這兩個程式會提供 datagrid 所需之 JSON 資料. 請參考 :

# jQuery EasyUI 測試 : Datagrid (一)


OK, Layout 測試完畢.