jQuery EasyUI 測試 : Datagrid (一)

jQuery EasyUI 的視覺效果我覺得比 jQueryUI 細緻, 直逼 ExtJS, 而且使用方法直觀簡單, 完全採用 HTML5 格式, 這也是我重回 jQuery 陣營的因素之一. 其環境配置已如前文, 參見 :

# jQuery EasyUI 環境配置

在該文中, 我簡單地將 EasyUI 的 demo/datagrid 目錄下的 basic.html 稍稍改裝 (主要是相關的 js 與 css 資源相對位址調整), 上傳伺服器測試後發現效果不錯. 它主要是透過 HTML5 的 data-options 屬性來設定表格功能的 (當然也可以用 Javascript 物件屬性來設定) : 

data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'"

singleSelect 用來設定單列選定模式, collapsible 用來設定表格右上角是否要擺一個內容縮合按鈕; url 用來指定表格的 ajax 資料來源, method 則是 HTTP 方法. 其 API 參考 :

# jQuery EasyUI 參考文件 

測試範例 1 : http://tony1966/test/easyuitest/easyui-datagrid-1.htm [看原始碼]

此處要詳細地來測試 datagrid 的各項功能與整理期設定方式.

首先我想先搞定資料來源議題, 上述範例 1 乃是從現成的靜態 json 檔提供表格資料來源, 其格式如下 :

 {"total":28,"rows":[
    {"productid":"FI-SW-01",
     "productname":"Koi",
     "unitcost":10.00,
     "status":"P",
     "listprice":36.50,
     "attr1":"Large",
     "itemid":"EST-1"},
     ...
     ]}

但實際應用中, 表格的資料來源通常是由資料庫動態取得, 亦即是由後端程式例如 PHP 從資料庫中動態擷取再輸出 JSON 格式的資料, 而 EasyUI 要求所需的 JSON 資料須有 total 與 rows 兩個屬性.

在下面範例 2 中, 我將參考之前測試 ExtJS 的 GridPanel 時所使用的範例, 利用 PHP 程式來動態地輸出表格所需的 JSON 資料. 參考 :

# ExtJS 4 測試 : GridPanel (三) 

在此文的範例 28 中, 我使用一個 PHP 程式 get_stocks.php 從後端 MySQL 資料表 stocks 取得表格內容來源, 並輸出為 ExtJS 的 GridPanel 所需要的 JSON 格式 :

# http://tony1966.xyz/test/extjstest/get_stocks.php

ExtJS GridPanel 所需的 JSON 格式是 totalProperty 與 root 兩個屬性. 此處我將利用相同的後端 MySQL 資料表 stocks, 只要修改 PHP 程式, 更改為輸出 total 與 rows 屬性即可, 如下列 get_stocks.php :

# http://tony1966.xyz/test/easyuitest/get_stocks.php

結果如下 :

{"total":"6","rows":[{"name":"\u53f0\u7a4d\u96fb","id":"2330","close":"123","volumn":"4425119","meeting":"2014-06-04","election":"0","category":"\u534a\u5c0e\u9ad4"},{"name":"\u4e2d\u83ef\u96fb","id":"2412","close":"96.4","volumn":"5249","meeting":"2014-06-15","election":"0","category":"\u901a\u4fe1"},{"name":"\u4e2d\u78b3","id":"1723","close":"192.5","volumn":"918","meeting":"2014-07-05","election":"0","category":"\u5851\u5316"},{"name":"\u5275\u898b","id":"2451","close":"108","volumn":"733","meeting":"2014-06-30","election":"0","category":"\u6a21\u7d44"},{"name":"\u83ef\u64ce","id":"3515","close":"118.5","volumn":"175","meeting":"2014-07-20","election":"1","category":"\u4e3b\u6a5f\u677f"},{"name":"\u8a0a\u9023","id":"5203","close":"97","volumn":"235","meeting":"2014-05-31","election":"0","category":"\u8edf\u9ad4"}]}

其原始碼如下 :

<?php
header('Content-Type: text/html;charset=UTF-8');
$host="abc.xyz.com";
$username="test";
$password="123";
$database="testdb";
$conn=mysql_connect($host, $username, $password); //建立連線
mysql_query("SET NAMES 'utf8'"); //設定查詢所用之字元集為 utf-8
mysql_select_db($database, $conn); //開啟資料庫
$SQL="SELECT COUNT(*) FROM `stocks`";
$RS=mysql_query($SQL, $conn);
list($total)=mysql_fetch_row($RS); //紀錄總筆數
$SQL="SELECT * FROM `stocks`";
$result=mysql_query($SQL, $conn); //執行 SQL 指令
$stock=array();
for ($i=0; $i<mysql_numrows($result); $i++) { //走訪紀錄集 (列)
     $row=mysql_fetch_array($result); //取得列陣列
     $stock[$i]=array("name" => $row["name"],
                      "id" => $row["id"],
                      "close" => $row["close"],
                      "volumn" => $row["volumn"],
                      "meeting" => $row["meeting"],
                      "election" => $row["election"],
                      "category" => $row["category"]
                      );
     } //end of for
$arr=array("total" => $total, "rows" => $stock);
echo json_encode($arr);  //將陣列轉成 JSON 資料格式傳回
?>

接著修改上面範例 1 的 data-options 屬性中的 url 為 get_stocks.php, 並設定與資料表相關欄位對應的表格欄位如下 :

  <table class="easyui-datagrid" title="台股" style="width:700px;height:250px"
    data-options="singleSelect:true,collapsible:true,url:'get_stocks.php',method:'get'">
    <thead>
      <tr>
        <th data-options="field:'name',width:80">股票名稱</th>
        <th data-options="field:'id',width:80">股票代號</th>
        <th data-options="field:'close',width:100,align:'right'">收盤價 (元)</th>
        <th data-options="field:'volumn',width:100,align:'right'">成交量 (張)</th>
        <th data-options="field:'meeting',align:'left'">股東會日期</th>
        <th data-options="field:'election',width:80,align:'center'">董監改選</th>
        <th data-options="field:'category',width:60,align:'center'">類股</th>
      </tr>
    </thead>
  </table>

將檔案存成 easyui-datagrid-2.htm 後上傳, 結果如下 :

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

果然順利地將 PHP 檔輸出的 JSON 資料渲染成所要的表格呈現. 注意, 如果 th 的 data-options 中沒有設定 witdth, 則 EasyUI 會以 fit (剛好適合資料寬度) 方式處理, 例如上面的股東會日期欄位. 如果全部資料欄位寬度超過表格寬度 (這裡是設定為 700px), 那麼就會出現水平卷軸, 若資料列太多, 超過表格高度 (這裡設定為 250px), 則會出現垂直卷軸.

比起 ExtJS 的複雜物件設定而言, jQuery 是比較簡單直觀, 非常適合網頁設計師學習網頁程式開發, 而 ExtJS 則適合一般程式設計師學習網頁開發.

上面範例 2 使用 HTML5 的 data-options 設定表格參數, 也可以像 ExtJS 那樣使用 Javascript 設定, 如下範例 3 所示 :

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

  <table id="grid1" title="台股" style="width:700px;height:250px"></table>
  <script language="javascript">
    $(document).ready(function(){
      $('#grid1').datagrid({
        url:'get_stocks.php',
        columns:[[
          {field:'name',title:'股票名稱',width:80},
          {field:'id',title:'股票代號',width:80},
          {field:'close',title:'收盤價 (元)',width:100,align:'right'},
          {field:'volumn',title:'成交量 (張)',width:100,align:'right'},
          {field:'meeting',title:'股東會日期',align:'left'},
          {field:'election',title:'董監改選',width:80,align:'center'},
          {field:'category',title:'類股',width:60,align:'center'}
          ]],
        singleSelect:true,
        collapsible:true
        });
      });
  </script>

可見效果是一樣的. 只要為 table 標籤指定一個 id, 就可以用 Javascript 設定各項參數. 以上範例均透過 Ajax 取得遠端資料來源, 如果資料由網頁本身提供, 則可以直接寫在 tbody 標籤內, 並且取消 url 設定即可, 如下列範例 4 所示 :

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

  <table class="easyui-datagrid" title="台股" style="width:700px;height:250px"
    data-options="singleSelect:true,collapsible:true">
    <thead>
      <tr>
        <th data-options="field:'name',width:80">股票名稱</th>
        <th data-options="field:'id',width:80">股票代號</th>
        <th data-options="field:'close',width:100,align:'right'">收盤價 (元)</th>
        <th data-options="field:'volumn',width:100,align:'right'">成交量 (張)</th>
        <th data-options="field:'meeting',align:'left'">股東會日期</th>
        <th data-options="field:'election',width:80,align:'center'">董監改選</th>
        <th data-options="field:'category',width:60,align:'center'">類股</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>台積電</td>
        <td>2330</td>
        <td>123</td>
        <td>4425119</td>
        <td>2014-06-04</td>
        <td>0</td>
        <td>半導體</td>
      </tr>
      <tr>
        <td>中華電</td>
        <td>2412</td>
        <td>96.4</td>
        <td>5249</td>
        <td>2014-06-15</td>
        <td>0</td>
        <td>通信</td>
      </tr>
      <tr>
        <td>中碳</td>
        <td>1723</td>
        <td>192.5</td>
        <td>918</td>
        <td>2014-07-05</td>
        <td>0</td>
        <td>塑化</td>
      </tr>
      <tr>
        <td>創見</td>
        <td>2451</td>
        <td>108</td>
        <td>733</td>
        <td>2014-06-30</td>
        <td>0</td>
        <td>模組</td>
      </tr>
      <tr>
        <td>華擎</td>
        <td>3515</td>
        <td>118.5</td>
        <td>175</td>
        <td>2014-07-20</td>
        <td>0</td>
        <td>主機板</td>
      </tr>
      <tr>
        <td>訊連</td>
        <td>5203</td>
        <td>97</td>
        <td>235</td>
        <td>2014-05-31</td>
        <td>0</td>
        <td>軟體</td>
      </tr>
    </tbody>
  </table>

事實上這種應用較少, 除非是少量且固定的靜態資料. 

接著來測試分頁功能, 只要將 paginate 屬性設為 true, 表格下方即出現分頁工具, 如下範例 5 所示 :

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

    $(document).ready(function(){
      $('#grid1').datagrid({
        url:'get_stocks.php',
        columns:[[
          {field:'name',title:'股票名稱',width:80},
          {field:'id',title:'股票代號',width:80},
          {field:'close',title:'收盤價 (元)',width:100,align:'right'},
          {field:'volumn',title:'成交量 (張)',width:100,align:'right'},
          {field:'meeting',title:'股東會日期',align:'left'},
          {field:'election',title:'董監改選',width:80,align:'center'},
          {field:'category',title:'類股',width:60,align:'center'}
          ]],
        singleSelect:true,
        collapsible:true,
        pagination:true
        });
      });

如果是用 HTML5 方式設定, 就在 table 標籤的 data-options 屬性中加上 paginate:true 即可. 本例是拿掉中文化檔案的結果, 可見預設是英文版的分頁工具列, 如果在 head 標籤內加上中文化檔案 :

<script type="text/javascript" src="../jquery/easyui-lang-zh_TW.js"></script>

這樣就會得到繁中的分頁工具列, 如下列範例 6 :

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

由於我們的後端資料不夠多, 只有一頁無法測試切換頁效果, 下面範例 7 將參考 ExtJS 測試的範例 12 所用之 PHP 程式 get_stocks_list_page.php 與 stocks_list 資料表來產生足夠長的資料列 :

# ExtJS 4 測試 : GridPanel (一)

因為 EasyUI 的 datagrid 會向後端傳送 page (頁數) 與 rows (列數, 即 page size) 這兩個參數, 而且所輸出的 JSON 資料須有 total 與 rows 兩個屬性, 因此這個 get_stocks_list_page.php 也需做些修改如下 :

<?php
header('Content-Type: text/html;charset=UTF-8');
$host="abc.xyz.com";
$username="test";
$password="123";
$database="testdb";
$conn=mysql_connect($host, $username, $password); //建立連線
mysql_query("SET NAMES 'utf8'"); //設定查詢所用之字元集為 utf-8
mysql_select_db($database, $conn); //開啟資料庫
$page=isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows=isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$start=($page-1) * $rows;  //本頁第一個列索引 (0 起始)
$SQL="SELECT COUNT(*) FROM `stocks_list`";
$RS=mysql_query($SQL, $conn);
list($total)=mysql_fetch_row($RS); //紀錄總筆數
$SQL="SELECT * FROM `stocks_list` LIMIT ".$start.",".$rows;
$result=mysql_query($SQL, $conn); //執行 SQL 指令
$stock=array();
for ($i=0; $i<mysql_numrows($result); $i++) { //走訪紀錄集 (列)
     $row=mysql_fetch_array($result); //取得列陣列
     $stock_name=$row["stock_name"];
     $stock_id="<a href='http://tw.stock.yahoo.com/q/q?s=".
               $row["stock_id"]."' target='_blank'>".
               $row["stock_id"]."</a>";
     $stock[$i]=array("stock_name" => $stock_name,
                      "stock_id" => $stock_id);
     } //end of for
$arr=array("total" => $total, "rows" => $stock);
echo json_encode($arr);  //將陣列轉成 JSON 資料格式傳回
?>

此程式中用 $_POST 取得分頁工具列傳來的 page 與 rows 參數, 用三元運算子設定其未傳出時之初始值, 然後計算每頁第一列的索引, 再用 MySQL 的 SELECT ... LIMIT 語法取得該頁的列記錄. 最後會輸出指定頁次列數之 stock_name 與 stock_id 這兩欄資料, 參考 EasyUI tutorial :

#  Add a pagination to DataGrid

注意, 這裡 stock_id 我給它加上 Yahoo 股市的超連結. 網頁程式如下範例 7 所示 :

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

 <table id="grid1" title="台股" style="width:600px;"></table>
  <script language="javascript">
    $(document).ready(function(){
      $('#grid1').datagrid({
        url:'get_stocks_list_page.php',
        columns:[[
          {field:'stock_name',title:'股票名稱',width:100},
          {field:'stock_id',title:'股票代號',width:100}
          ]],
        singleSelect:true,
        collapsible:true,
        pagination:true,
        pageSize:10,
        rownumbers:true
        });
      });
  </script>

此處我們將 rownumbers 設為 true, 這樣列首會出現列編號, pageSize:10 只是初始化時用到, 可以透過下拉式選單更改每頁列數. 其次, table 標籤僅設寬度, 其高度由列數多寡自動調整. 換頁時若使用 Chrome 按 F12 鍵可觀察到 Form Data 送出 page 與 rows 兩個參數 :

分頁工具列位置由 pagePosition 屬性決定, 預設為 'bottom', 其餘選項有 'top' 與 'both' (注意是字串) :

        pagination:true,
        pagePosition:'top',

如下列範例 7-1 與 7-2 所示 :

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

當設為 'both' 時, 上下兩個分頁工具列會連動.

如果要讓欄位可排序, 可在欄位設定 Columns 的 field 中加上 sortable:true, 如下列範例 8 所示 :

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

    $(document).ready(function(){ 
      $('#grid1').datagrid({
        url:'get_stocks_list_page.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
        });
      });

兩個欄位 stock_name 與 stock_id 均設定為可排序, 這樣點擊欄位名稱時就會以該欄位來排序 (asc 與 desc 交替), 名稱右方會出現小三角形, 向上表示順序 (asc), 向下表示逆序 (desc). 

但實際上範例 8 並不會正確地排序, 原因是後端的 PHP 程式也必須修改. 在 Chrome 按 F12 鍵, 切到 Network 可發現按排序欄位時, Form Data 除了傳出 page 與 rows 參數外, 還傳出 sort (排序欄位名稱) 與 order (排序方向) 兩個參數, 後端程式必須依據這些參數傳回正確的 JSON 資料. 

<?php
header('Content-Type: text/html;charset=UTF-8');
$host="abc.xyz.com";
$username="test";
$password="123";
$database="testdb";
$conn=mysql_connect($host, $username, $password); //建立連線
mysql_query("SET NAMES 'utf8'"); //設定查詢所用之字元集為 utf-8
mysql_select_db($database, $conn); //開啟資料庫
$page=isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows=isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$sort=isset($_POST['sort']) ? $_POST['sort'] : 'stock_id';
$order=isset($_POST['order']) ? $_POST['order'] : 'asc';
$start=($page-1) * $rows;  //本頁第一個列索引 (0 起始)
$SQL="SELECT COUNT(*) FROM `stocks_list`";
$RS=mysql_query($SQL, $conn);
list($total)=mysql_fetch_row($RS); //紀錄總筆數
$SQL="SELECT * FROM `stocks_list` ORDER BY ".$sort." ".$order.
           " LIMIT ".$start.",".$rows; 
$result=mysql_query($SQL, $conn); //執行 SQL 指令
$stock=array(); 
for ($i=0; $i<mysql_numrows($result); $i++) { //走訪紀錄集 (列)
     $row=mysql_fetch_array($result); //取得列陣列
     $stock_name=$row["stock_name"];
     $stock_id="<a href='http://tw.stock.yahoo.com/q/q?s=".
               $row["stock_id"]."' target='_blank'>".
               $row["stock_id"]."</a>";
     $stock[$i]=array("stock_name" => $stock_name, 
                      "stock_id" => $stock_id);
     } //end of for
$arr=array("total" => $total, "rows" => $stock);
echo json_encode($arr);  //將陣列轉成 JSON 資料格式傳回
?>

此處 get_stocks_list_sort.php 以 $_POST 擷取 sort 與 order 兩個參數以便在 SQL 中加入排序資訊, 這樣就會傳回排序後的 JSON 資料, 當然網頁程式也要修改, 如下列範例 9 所示 :

    $(document).ready(function(){ 
      $('#grid1').datagrid({
        url:'get_stocks_list_sort.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
        });
      });

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

在 jQuery 外掛 Datatables 中, 預設就有一個搜尋框, EasyUI 也可以在上方添加搜尋工具列, 只要準備一個 div 包裹的搜尋框, 然後在 table 標籤裡用 toolbar 屬性指定搜尋框的 id 即可, 參考 :

# Add search functionality in DataGrid

搜尋框的網頁碼如下 :

  <div id="search_bar" style="padding:3px">
    <select id="search_field">
      <option value="stock_name">股票名稱</option>
      <option value="stock_id">股票代號</option>
    </select>
    <input id="search_what" style="line-height:15px;border:1px solid #ccc">
    <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">搜尋</a>
  </div>

這個搜尋框 id 要設定在 table 標籤的 toolbar 屬性中, 這樣在表格標題欄下方的工具列位置就會出現此搜尋框了. 這裡我用一個下拉式選單 search_field 來選擇要搜尋的欄位, 用 search_what 文字框輸入要搜尋的關鍵字, 用一個超連結 a 標籤來製作連結按鈕 (樣式類別為 easyui-linkbutton), 當按下搜尋時呼叫 doSearch() :

  <script type="text/javascript">
    function doSearch(){
      $('#grid1').datagrid('load',{
        search_field: $('#search_field').val(),
        search_what: $('#search_what').val()
        });
      }
  </script>

當然後端 PHP 程式也要修改, 將 search_field 與 search_what 加入 SQL 指令中 :

<?php
header('Content-Type: text/html;charset=UTF-8');
$host="abc.xyz.com";
$username="test";
$password="123";
$database="testdb";
$conn=mysql_connect($host, $username, $password); //建立連線
mysql_query("SET NAMES 'utf8'"); //設定查詢所用之字元集為 utf-8
mysql_select_db($database, $conn); //開啟資料庫
$page=isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows=isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$sort=isset($_POST['sort']) ? $_POST['sort'] : 'stock_id';
$order=isset($_POST['order']) ? $_POST['order'] : 'asc';
if (isset($_POST['search_field'])) { //有 search
  $where=" WHERE ".$_POST['search_field']." LIKE '%".
         $_POST['search_what']."%'";
  }
else {$where="";} //無 search
$start=($page-1) * $rows;  //本頁第一個列索引 (0 起始)
$SQL="SELECT COUNT(*) FROM `stocks_list`".$where;
$RS=mysql_query($SQL, $conn);
list($total)=mysql_fetch_row($RS); //紀錄總筆數
$SQL="SELECT * FROM `stocks_list` ".$where." ORDER BY ".
     $sort." ".$order." LIMIT ".$start.",".$rows;
$result=mysql_query($SQL, $conn); //執行 SQL 指令
$stock=array();
for ($i=0; $i<mysql_numrows($result); $i++) { //走訪紀錄集 (列)
     $row=mysql_fetch_array($result); //取得列陣列
     $stock_name=$row["stock_name"];
     $stock_id="<a href='http://tw.stock.yahoo.com/q/q?s=".
               $row["stock_id"]."' target='_blank'>".
               $row["stock_id"]."</a>";
     $stock[$i]=array("stock_name" => $stock_name,
                      "stock_id" => $stock_id);
     } //end of for
$arr=array("total" => $total, "rows" => $stock);
echo json_encode($arr);  //將陣列轉成 JSON 資料格式傳回
?>

我們用 isset() 判斷有無傳出 search_field 欄位 (用 search_what 或兩者 AND 亦可), 有的話就製作 $where 字串, 此處用 %...% 將 search_what 包起來, 表示只要欄位值含有 search_what 即符合. 網頁程式也要改用此具搜尋功能之 get_stocks_list_search.php, 同時也要增加一個 toolbar 屬性, 並指定其值為上面的搜尋框 id :

  <table id="grid1" title="台股" style="width:600px;" toolbar="#search_bar"></table>
  <script language="javascript">
    $(document).ready(function(){
      $('#grid1').datagrid({
        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>

如下列範例 10 所示 :

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

我們搜尋股票名稱含有 "富" 字者共有 11 筆, 用 Chrome 的 F12/Network/Headers/Form Data 觀察可知, 的確會向後端傳出 search_field 與 search_what 參數 :

在上面範例 10 中, 放在工具列位置的搜尋框, 我們使用超連結來製作搜尋按鈕, 其中 a 標籤的  plain="true" 屬性設定表示只顯示按鈕文字, 不顯示按鈕外框, 但當滑鼠移到按鈕上面時就會顯示外框. 如果 plain 設為 "false" 或不加 plain 屬性, 那麼就會出現按鈕外框了 (plain 屬性預設為 false).

事實上, 除了文字連結按鈕外,  EasyUI 提供了許多常用的圖形按鈕樣式, 可用 iconCls 屬性加以指定, 例如 :

1. icon-cancel : 取消
2. icon-reload : 重新載入
3. icon-search : 搜尋
4. icon-print : 列印
5. icon-help : 協助 
6. icon-save : 儲存
7. icon-cut : 剪下
8. icon-edit : 編輯
9. icon-remove : 刪除
10. icon-new : 新增
11. icon-back : 返回

參考 :

# Create a Link Button

根據 "Jquery EasyUI 中图标问题" 這篇文章, EasyUI 的圖示都放在 themes/icons 目錄下, 所以在上面的所有範例中均有指定 icon.css 這個樣式設定檔, 只要指定 iconCls 屬性即可直接使用這些圖檔 :

<link rel="stylesheet" type="text/css" href="../jquery/easyui-themes/icon.css">

在下面範例 11 中我在工具列中多放了三個連結按鈕 : 新增, 編輯, 刪除, 儲存, 因此我把工具列 div 標籤的 id 改為 tool_bar :

  <div id="tool_bar" style="padding:3px">
    <select id="search_field">
      <option value="name">股票名稱</option>
      <option value="id">股票代號</option>
    </select>
    <input id="search_what" style="line-height:15px;border:1px solid #ccc">
    <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="doSearch()">搜尋</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="doAdd()">新增</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="doEdit()">編輯</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="doRemove()">刪除</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" onclick="doSave()">儲存</a>
  </div>

因此 table 標籤的 toolbar 屬性也要改為 tool_bar :

<table id="grid1" title="台股" style="width:600px;" toolbar="#tool_bar"></table>

為了簡單起見, 這三個按鈕的 click 事件處理函式都只是顯示一個訊息盒 :

    function doAdd(){$.messager.alert('訊息','新增!');}
    function doEdit(){$.messager.alert('訊息','編輯!');}
    function doRemove(){$.messager.alert('訊息','刪除!');}    function doSave(){$.messager.alert('訊息','儲存!');}

另外, 為了接下來要測試線上編輯後端資料表內容, 我改用上面範例 6 以前所使用的 stocks 資料表 (因為我不想變動 stocks_list 資料表的內容), 所以遠端 JSON 資料來源為 get_stocks_search.php :

    $(document).ready(function(){
      $('#grid1').datagrid({
        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
        });

參考 get_stocks_list_search.php 修改為 get_stocks_search.php :

<?php
header('Content-Type: text/html;charset=UTF-8');
$host="abc.xyz.com";
$username="test";
$password="123";
$database="testdb";
$conn=mysql_connect($host, $username, $password); //建立連線
mysql_query("SET NAMES 'utf8'"); //設定查詢所用之字元集為 utf-8
mysql_select_db($database, $conn); //開啟資料庫
$page=isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows=isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$sort=isset($_POST['sort']) ? $_POST['sort'] : 'id';
$order=isset($_POST['order']) ? $_POST['order'] : 'asc';
if (isset($_POST['search_field'])) { //有 search
  $where=" WHERE ".$_POST['search_field']." LIKE '%".
         $_POST['search_what']."%'";
  }
else {$where="";} //無 search
$start=($page-1) * $rows;  //本頁第一個列索引 (0 起始)
$SQL="SELECT COUNT(*) FROM `stocks`".$where;
$RS=mysql_query($SQL, $conn);
list($total)=mysql_fetch_row($RS); //紀錄總筆數
$SQL="SELECT * FROM `stocks` ".$where." ORDER BY ".
     $sort." ".$order." LIMIT ".$start.",".$rows;
$result=mysql_query($SQL, $conn); //執行 SQL 指令
$stock=array();
for ($i=0; $i<mysql_numrows($result); $i++) { //走訪紀錄集 (列)
     $row=mysql_fetch_array($result); //取得列陣列
     $stock[$i]=array("name" => $row["name"],
                 "id" => $row["id"],
                 "close" => $row["close"],
                 "volumn" => $row["volumn"],
                 "meeting" => $row["meeting"],
                 "election" => $row["election"],
                 "category" => $row["category"]
                 );
     } //end of for
$arr=array("total" => $total, "rows" => $stock);
echo json_encode($arr);  //將陣列轉成 JSON 資料格式傳回
?>

如下列範例 11 所示 : 

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

圖形按鈕看起來很不錯 !