jQuery EasyUI 測試 : Tree 樹

Tree 適合用來表達從屬結構, 例如組織架構, 檔案系統等等, 是非常好用的使用者介面. EasyUI 提供的 tree 元件 API 如下 :

# http://www.jeasyui.com/documentation/tree.php
# Tree Demo

EasyUI 的樹使用多層 ul-li 結構製作, 最外層 ul 必須賦予 "easyui-tree" 的樣式類別, 而子目錄則使用 span 元素串接下一層 ul 來製作, 如範例 1 所示 :

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

  <ul class="easyui-tree">
    <li>
      <span>總統府</span>
      <ul>
        <li>
          <span>行政院</span>
          <ul>
            <li>內政部</li>
            <li>外交部</li>
            <li>國防部</li>
          </ul>
        </li>
        <li>
          <span>立法院</span>
          <ul>
            <li>內政委員會</li>
            <li>外交委員會</li>
            <li>國防委員會</li>
          </ul>
        </li>
        <li>
          <span>司法院</span>
          <ul>
            <li>最高法院</li>
            <li>高等法院</li>
            <li>地方法院</li>
          </ul>
        </li>      
      </ul>
    </li>
  </ul>

可見預設情況下每一個˙子目錄都是打開的. 我們可以為 Tree 添加節點之間的連線, 只要在最外層 ul 元素的 data-options 屬性中, 將 lines 設為 true 即可, 如範例 1-1 所示 :

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

<ul id="tree1" class="easyui-tree" data-options="lines:true">

除了把樹狀結構的內容直接寫在網頁外, 也可以從遠端伺服器上取得外部資料來源, 例如 JSON 檔或 PHP 等能產出 JSON 輸出的後端程式, 只要在最外層 ul 元素的 data-options 屬性中指定 url 位址即可 :

  <ul class="easyui-tree" data-options="url:'government.json'"></ul>

Tree 元件需要的是一個格式如下的 JSON 物件陣列 :

[{
  "id":1,
  "text":"樹葉1"
  },{
  "id":2,
  "text":"樹葉2"
  },{
  "id":3,
  "text":"節點1",
  "children":[{
    "id":31,
    "text":"樹葉31"
    },{
    "id":32,
    "text":"樹葉32"
    }]
  }]

可見樹狀結構中的樹葉只需要 id 與 text, 而節點則需要 children 開啟下一層分支. 因此範例 1 中的樹可依此格式寫成 JSON 檔如下 :

[{
  "id":1,
  "text":"總統府",
  "children":[{
    "id":11,
    "text":"行政院",
    "children":[{
      "id":111,
      "text":"內政部"
      },{
      "id":112,
      "text":"外交部"
      },{
      "id":113,
      "text":"國防部"
      }]
    },{
    "id":12,
    "text":"立法院",
    "children":[{
      "id":121,
      "text":"內政委員會"
      },{
      "id":122,
      "text":"外交委員會"
      },{
      "id":123,
      "text":"國防委員會"
      }]
    },{
    "id":13,
    "text":"司法院",
    "children":[{
      "id":131,
      "text":"最高法院"
      },{
      "id":132,
      "text":"高等法院"
      },{
      "id":133,
      "text":"地方法院"
      }]
    }]
  }]

# government.json

將此 JSON 檔以 UTF-8 格式存成 government.json, 然後在最外層 ul 元素加上 data-options 屬性, 指定 url 為此 JSON 檔即可, 如範例 2 所示 :

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

可見效果與範例 1 完全一樣. 注意, 外部資源檔須符合 JSON 格式要求, 每一個屬性名稱如 id, text, children 等均需要用雙引號括起來 (不要用單引號), 且其值除數值外, 也都要用雙引號括起來. 如果 JSON 格式錯誤, 將無法呈現正確結果, 驗證 JSON 格式可使用 JSONLint 網站 :

# JSONLint-The JSON Validator

上面範例中的樹預設都是全部展開, 能否控制讓目錄預設為縮合呢? 可以的, 只要將目錄節點的 state 屬性設為 "closed" 即可 (預設為 "open"). 如下列範例 2-1 所示 :

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

<ul class="easyui-tree" data-options="url:'government-2.json'"></ul>

這裡我們將後端 JSON 檔修改為 government-2.json 如下 :

[{
  "id":1,
  "text":"總統府",
  "state":"closed",
  "children":[{
    "id":11,
    "text":"行政院",
    "state":"closed",
    "children":[{
      "id":111,
      "text":"內政部"
      },{
      "id":112,
      "text":"外交部"
      },{
      "id":113,
      "text":"國防部"
      }]
    },{
    "id":12,
    "text":"立法院",
    "state":"closed",
    "children":[{
      "id":121,
      "text":"內政委員會"
      },{
      "id":122,
      "text":"外交委員會"
      },{
      "id":123,
      "text":"國防委員會"
      }]
    },{
    "id":13,
    "text":"司法院",
    "state":"open",
    "children":[{
      "id":131,
      "text":"最高法院"
      },{
      "id":132,
      "text":"高等法院"
      },{
      "id":133,
      "text":"地方法院"
      }]
    }]
  }]

# government-2.json

我們在每一個目錄都添加了一個 state 屬性, 除司法院設為 "open" 外, 其他均設為 "closed". 可見網頁初載入時根節點是縮合的, 點開後發現只有司法院是打開的. 其實 "state":"open" 不用設, 因為預設就是"open".

注意, 設定目錄預設狀態為縮合只能在用 JSON 或 Javascript 建立樹時才行, 像範例 1 與 1-1 直接寫在網頁的樹一定會全部展開.

上面範例 2 是直接取用  JSON 檔, 當然也可以用 PHP 程式來產出, 不過 EasyUI 使用稱為 Async Tree (非同步樹) 的方式來製作, 它是利用 Ajax 技術以非同步方式動態地自後端擷取被打開的節點的子節點, 據此更新樹狀結構, 而不是像上面兩個範例那樣一次取得整棵樹.

首先到 phpMyAdmin 中定義樹狀結構的資料表 government, 我們需要三個欄位 :

id: 節點索引
text: 節點名稱
parentId: 父節點索引

父節點索引是用來串接上一層節點用的. 建好後如下圖所示 :

要建立此資料表所需的 SQL 指令如下 :

CREATE TABLE IF NOT EXISTS `government` (
  `id` int(11) NOT NULL,
  `text` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `parentId` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO `government` (`id`, `text`, `parentId`) VALUES
(1, '總統府', 0),
(11, '行政院', 1),
(111, '內政部', 11),
(112, '外交部', 11),
(113, '國防部', 11),
(12, '立法院', 1),
(121, '內政委員會', 12),
(122, '外交委員會', 12),
(123, '國防委員會', 12),
(13, '司法院', 1),
(131, '最高法院', 13),
(132, '高等法院', 13),
(133, '地方法院', 13);

注意, 這裡除了根節點的 parentId 必須設為 0 之外 (配合後端 PHP 程式), 其餘的索引可隨意編, 只要 parentId 正確串接即可.

# 下載 government.sql

接下來我們要撰寫能從 MySQL 資料表 government 產出 JSON 資料的 PHP 程式. 如果要產生上面範例 2 的 JSON 資料, 乍看之下似乎不難, 結構很規律, 但實際要寫時你會發現沒這麼簡單, 因為有些節點可能有子節點, 需要使用遞迴函式才能拜訪每一個節點, 請參考下面相關資料 :

# create hierarchical json data from MySQL in php without loadFilter
# Need to Convert MySQL records to JSON tree
# create json data for tree structure data with php array using recursion function

但 EasyUI 既然名為 Easy, 處理這問題當然不用這麼麻煩. 它使用 Ajax 方式來建立一個非同步樹, 其作法請參考 Tutorial 這篇文章 :

# http://www.jeasyui.com/tutorial/tree/tree2.php

事實上它不是一次全部呈現全部樹狀結構, 而是利用 Tree 元件的 state 屬性, 預設只向後端擷取樹的最上層元素, 因此所有最上層目錄的 state 屬性都會被設為 "closed", 當使用者開啟目錄時, 會以 Ajax 方式向後端傳送此節點之id (method 屬性預設為 post), 後端程式只要傳回此節點的所有子節點的 JSON 資料, 以便前端的 EasyUI Tree 元件更新該節點為開啟狀態即可.

根據該篇教學改寫所需的 PHP 程式 get-government-1.php 如下 :

<?php
header('Content-Type: text/html;charset=UTF-8');
$host="abc.xyz.com"; //本機改為 localhost 或 127.0.0.1
$username="test";
$password="123";
$database="testdb";
$conn=mysql_connect($host, $username, $password); //建立連線
mysql_query("SET NAMES 'utf8'"); //設定查詢所用之字元集為 utf-8
mysql_select_db($database, $conn); //開啟資料庫
$result=array();
$id=isset($_POST['id']) ? intval($_POST['id']) : 0; //根節點 parentId=0
$rs=mysql_query("SELECT * FROM government WHERE parentId=$id");
while ($row=mysql_fetch_array($rs)){ //若節點存在
  $node=array();
  $node["id"]=$row["id"];
  $node["text"]=$row["text"];
  $node["state"]=has_child($row["id"]) ? "closed" : "open";
  array_push($result,$node);
  }
echo json_encode($result);
function has_child($id){
  $SQL="SELECT count(*) FROM government WHERE parentId=$id";
  $rs=mysql_query($SQL);
  $row=mysql_fetch_array($rs);
  return $row[0] > 0 ? true : false;
  }
?>

此處我們先判斷有無傳出 id 參數, 第一次載入網頁時沒有傳出, 這時 $id 預設為 0, 當點擊節點時會傳出 id, 這時就去搜尋它有哪些子節點 (parentId=$id), 將所有子節點紀錄在陣列中, 並且透過呼叫 has_child() 方法判別這些子節點是否亦有子節點, 是的話將其 state 設為 "closed", 否則設為 "open". 最後呼叫 json_encode 函數轉成 JSON 格式傳回. 如果這些子節點也有子節點, 那麼其 state 屬性會被設為 closed, 否則為 open.

如果向伺服器要求 get-government-1.php 檔, 會傳回最上層節點, 也就是根節點-總統府, 其預設狀態是縮合的 :

[{"id":"1","text":"\u7e3d\u7d71\u5e9c","state":"closed"}] :

# http://tony1966.xyz/test/easyuitest/get-government-1.php

最後把網頁中的 url 改成後端 PHP 程式即可 :

<ul class="easyui-tree" data-options="url:'get-government-1.php'"></ul>

如下面範例 3 所示 :

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

可見, 網頁初載入時, 預設只顯示根節點, 因為這時網頁不會傳出 id, 因此在 PHP 程式中, $id 變數初始值為 0, 在資料表 government 中搜尋父節點 id=0 當然只找到根節點而已. 當點選根節點時, Tree 元件會觸發 Select 事件, 向 url 指定之遠端 PHP 程式發出 Ajax 要求, 並傳出該節點之 id 參數 1, 在 Chrome 中按 F12, 切到 Network 即可看到 Form Data 中傳出的參數 id 為 1 :

除了直接用網頁或外部資源建立樹狀結構外, 也可以用 Javascript 來產生, 這要用到 Tree 元件的 data 屬性. 這時必須給最外層 ul 元素添加  id 屬性, 如範例 4 所示 :

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

  <ul id="tree1"></ul>
  <script language="javascript">
    $(document).ready(function(){
      $("#tree1").tree({
        lines:true,
        data:[{
          "id":1,
          "text":"總統府",
          "state":"closed",
          "children":[{
            "id":11,
            "text":"行政院",
            "state":"closed",
            "children":[{
              "id":111,
              "text":"內政部"
              },{
              "id":112,
              "text":"外交部"
              },{
              "id":113,
              "text":"國防部"
              }]
            },{
            "id":12,
            "text":"立法院",
            "state":"closed",
            "children":[{
              "id":121,
              "text":"內政委員會"
              },{
              "id":122,
              "text":"外交委員會"
              },{
              "id":123,
              "text":"國防委員會"
              }]
            },{
            "id":13,
            "text":"司法院",
            "state":"open",
            "children":[{
              "id":131,
              "text":"最高法院"
              },{
              "id":132,
              "text":"高等法院"
              },{
              "id":133,
              "text":"地方法院"
              }]
            }]
          }]
        });
      });
  </script>

可見這根本就是將 JSON 檔的內容直接貼到 data 屬性內嘛! 當然, 我們也可以用 url 屬性指定外部資料來源為 JSON :

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

  <ul id="tree1"></ul>
  <script language="javascript">
    $(document).ready(function(){
      $("#tree1").tree({
        lines:true,
        url:"government-2.json"
        });
      });
  </script>

也可以從 PHP 取得資料 :

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

  <ul id="tree1"></ul>
  <script language="javascript">
    $(document).ready(function(){
      $("#tree1").tree({
        lines:true,
        url:"get-government-1.php"
        });
      });
  </script>

EasyUI 還有一個建立 Tree 的方式, 即透過呼叫 loadData 方法, 此方法須傳入一個陣列, 就是與 JSON 一模一樣的陣列, 如下列範例 5 所示 :

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

  <ul id="tree1"></ul>
  <script language="javascript">
    $(document).ready(function(){
      var data=[{
        "id":1,
        "text":"總統府",
        "state":"closed",
        "children":[{
          "id":11,
          "text":"行政院",
          "state":"closed",
          "children":[{
            "id":111,
            "text":"內政部"
            },{
            "id":112,
            "text":"外交部"
            },{
            "id":113,
            "text":"國防部"
            }]
          },{
          "id":12,
          "text":"立法院",
          "state":"closed",
          "children":[{
            "id":121,
            "text":"內政委員會"
            },{
            "id":122,
            "text":"外交委員會"
            },{
            "id":123,
            "text":"國防委員會"
            }]
          },{
          "id":13,
          "text":"司法院",
          "state":"open",
          "children":[{
            "id":131,
            "text":"最高法院"
            },{
            "id":132,
            "text":"高等法院"
            },{
            "id":133,
            "text":"地方法院"
            }]
          }]
        }];
      $("#tree1").tree(); //初始化
      $("#tree1").tree("loadData",data);

注意, 在呼叫 loadData 方法之前必須先初始化 Tree 元件, 否則會出現 cannot read options 錯誤 (初始化後才會讀得到). 要不然就要先添加 class="easyui-tree" 的樣式, 如範例 5-1 所示 :

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

  <ul id="tree1" class="easyui-tree"></ul>
  <script language="javascript">
    $(document).ready(function(){
      var data=[{
        "id":1,
        "text":"總統府",
        "state":"closed",
        "children":[{
          "id":11,
          "text":"行政院",
          "state":"closed",
          "children":[{
            "id":111,
            "text":"內政部"
            },{
            "id":112,
            "text":"外交部"
            },{
            "id":113,
            "text":"國防部"
            }]
          },{
          "id":12,
          "text":"立法院",
          "state":"closed",
          "children":[{
            "id":121,
            "text":"內政委員會"
            },{
            "id":122,
            "text":"外交委員會"
            },{
            "id":123,
            "text":"國防委員會"
            }]
          },{
          "id":13,
          "text":"司法院",
          "state":"open",
          "children":[{
            "id":131,
            "text":"最高法院"
            },{
            "id":132,
            "text":"高等法院"
            },{
            "id":133,
            "text":"地方法院"
            }]
          }]
        }];
      $("#tree1").tree("loadData",data);
      });
  </script>

參考資料 :

# How to use loadData for a tree with data contained in a variabble

Tree 還有許多屬性與方法, 下面先來測試 animate. 此屬性預設為 false, 若設為 true, 則展開與縮合節點時會以動畫呈現, 如範例 6 所示 :

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

  <ul id="tree1"></ul>
  <script language="javascript">
    $(document).ready(function(){
      $("#tree1").tree({
        lines:true,
        url:"government-2.json",
        animate:true
        });
      });
  </script>

可見節點展開時,  子節點會由上而下依次出現, 縮合時由下而上依次消失, 產生動畫效果.

Tree 元件繼承 drag and drop, 只要將 dnd 屬性設為 true, 每一個節點都可以拖放, 如範例 7 所示 :

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

  <ul id="tree1"></ul>
  <script language="javascript">
    $(document).ready(function(){
      $("#tree1").tree({
        lines:true,
        url:"government-2.json",
        dnd:true
        });
      });
  </script>

此例中的節點都可以拖曳到任一節點上, 一放開就成為其子節點, 例如下圖立法院變成行政院的子節點 :

每一個節點前面還可以放置一個核取方塊, 只要將 checkbox 屬性設為 true 即可, 如範例 8 所示 :

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

  <ul id="tree1"></ul>
  <script language="javascript">
    $(document).ready(function(){
      $("#tree1").tree({
        lines:true,
        url:"government-2.json",
        checkbox:true
        });
      });
  </script>

可見每一個節點都有核取方塊. 如果只要樹葉有核取方塊, 那麼除了 checkbox 外, 還要將 onlyLeafCheck 設為 true, 如範例 8-1 所示 :

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

  <ul id="tree1"></ul>
  <script language="javascript">
    $(document).ready(function(){
      $("#tree1").tree({
        lines:true,
        url:"government-2.json",
        checkbox:true,
        onlyLeafCheck:true
        });
      });
  </script>

可見僅樹葉才會有核取方塊了. 與 checked 有關的事件為 onCheck, 此事件會傳出兩個參數 : node (被核取之節點物件) 與 checked (核取狀態布林值, true 為核取, false 為取消核取), 如下列範例 8-2 所示 :

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

  <ul id="tree1"></ul>
  <script language="javascript">
    $(document).ready(function(){
      $("#tree1").tree({
        lines:true,
        url:"government-2.json",
        checkbox:true,
        onCheck:function(node,checked){
          var msg="id=" + node.id + " " + node.text + " checked=" + checked;
          $.messager.alert("Info",msg);
          }
        });
      });
  </script>

核取地方法院後, 顯示 idd 133 核取狀態為 true. 此處用 node.id 與 node.text 即可分別取得節點之索引與文字.

Tree 允許透過 attributes 屬性來自訂節點的屬性, 其值為一個物件實體. 例如政府各單位幾乎都有網站, 就可以在 Tree 的每個節點的 attributes 屬性中自訂一個 url 屬性, 如下面的 government-3.json :

[{
  "id":1,
  "text":"總統府",
  "state":"closed",
  "attributes":{"url":"http://www.president.gov.tw/"},
  "children":[{
    "id":11,
    "text":"行政院",
    "state":"closed",
    "attributes":{"url":"http://www.ey.gov.tw/"},
    "children":[{
      "id":111,
      "text":"內政部",
      "attributes":{"url":"http://www.moi.gov.tw/"}
      },{
      "id":112,
      "text":"外交部",
      "attributes":{"url":"http://www.mofa.gov.tw/"}
      },{
      "id":113,
      "text":"國防部",
      "attributes":{"url":"http://www.mnd.gov.tw/"}
      }]
    },{
    "id":12,
    "text":"立法院",
    "state":"closed",
    "attributes":{"url":"http://www.ly.gov.tw/"},
    "children":[{
      "id":121,
      "text":"內政委員會"
      },{
      "id":122,
      "text":"外交委員會"
      },{
      "id":123,
      "text":"國防委員會"
      }]
    },{
    "id":13,
    "text":"司法院",
    "state":"open",
    "attributes":{"url":"http://www.judicial.gov.tw/"},
    "children":[{
      "id":131,
      "text":"最高法院"
      },{
      "id":132,
      "text":"高等法院"
      },{
      "id":133,
      "text":"地方法院"
      }]
    }]
  }]

下面範例 9 我們同時也來測試最常用的 onClick 事件, 點選樹中任何節點時均會觸發此事件, 並傳回一個參數, 即被點選之節點物件. 我們要在此事件中顯示其 URL :

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

  <ul id="tree1"></ul>
  <script language="javascript">
    $(document).ready(function(){
      $("#tree1").tree({
        lines:true,
        url:"government-3.json",
        onClick:function(node){
          var msg="id=" + node.id + " " + node.text + " clicked"; 
          if (node.attributes) {
            msg += "\r\nattributes:url=" + node.attributes.url;
            }
          $.messager.alert("Info",msg);
          }
        });
      });
  </script>

這裡因為不是每一個單位都賦予 attributes 屬性, 因此要先判斷是否 node.attributes 物件存在, 有的話再取得其 url 屬性值.

參考資料 :

# easyui tree自定义属性的使用

當然, attributes 也可以寫在網頁的 li 中, 如範例 9-1 所示 :

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

  <ul id="tree1" class="easyui-tree">
    <li data-options="attributes:{'url':'http://www.president.gov.tw/'}">
      <span>總統府</span>
      <ul>
        <li data-options="attributes:{'url':'http://www.ey.gov.tw/'}">
          <span>行政院</span>
          <ul>
            <li data-options="attributes:{'url':'http://www.moi.gov.tw/'}">內政部</li>
            <li data-options="attributes:{'url':'http://www.mofa.gov.tw/'}">外交部</li>
            <li data-options="attributes:{'url':'http://www.mnd.gov.tw/'}">國防部</li>
          </ul>
        </li>
        <li data-options="attributes:{'url':'http://www.ly.gov.tw/'}">
          <span>立法院</span>
          <ul>
            <li>內政委員會</li>
            <li>外交委員會</li>
            <li>國防委員會</li>
          </ul>
        </li>
        <li data-options="attributes:{'url':'http://www.judicial.gov.tw/'}">
          <span>司法院</span>
          <ul>
            <li>最高法院</li>
            <li>高等法院</li>
            <li>地方法院</li>
          </ul>
        </li>      
      </ul>
    </li>
  </ul>
  <script language="javascript">
    $(document).ready(function(){
      $("#tree1").tree({
        lines:true,
        onClick:function(node){
          var msg="id=" + node.id + " " + node.text + " clicked";
          if (node.attributes) {
            msg += "\r\nattributes:url=" + node.attributes.url;
            }
          $.messager.alert("Info",msg);
          }
        });
      });
  </script>

注意, 這裡因為各節點 li 的 data-options 中沒有指定 id 屬性, 因此為 undefined.

當快速雙擊節點時會觸發 onDblClick 事件, 它也是會傳回節點的 node 物件. 下列範例 9-2 中, 我們讓有 url 屬性的節點在雙擊後於新視窗開啟此 url, 沒有 url 屬性的就跳出訊息框.

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

  <ul id="tree1"></ul>
  <script language="javascript">
    $(document).ready(function(){
      $("#tree1").tree({
        lines:true,
        url:"government-3.json",
        onDblClick:function(node){
          var msg="id=" + node.id + " " + node.text + " double clicked";
          if (node.attributes) {
            window.open(node.attributes.url,"_blank");
            }
          else {
            $.messager.alert("Info",msg);
            }
          }
        });
      });
  </script>