2014年9月8日 星期一

jQuery EasyUI 環境配置

前幾天在找 jQuery 的 DataGrid 外掛時, 在下面這網站找到 jQuery EasyUI 這個好用的函式庫, 昨晚幫媽按摩完後, 睡覺前將這些資料整理如下 :

Top 5 jQuery UI Alternatives

它主要是利用 HTML5 技術來為 jQuery 提供簡易快速的 UI 介面, 我覺得是不錯的 jQueryUI 替代方案. 其官網, 範例以及下載連結如下 :

# jQuery EasyUI 官網
# jQuery EasyUI 範例

jQuery EasyUI 基本上是個商用軟體, 但提供 GPL 版本免費使用, 可從這裡下載 :

# jQuery EasyUI 下載 (GPL 版本)

目前是 1.4 版, 下載解開後目錄結構如下 :


專案中會用到的只有 jquery.min.js, jquery.easyui.min.js,  與 locale 目錄下的 easyui-lang-zh_TW (繁體中文化) 這三個檔案, 以及 themes 這個目錄即可. 但我 PHP 測試網站已經有 jQuery UI 的測試環境, 所以我只要複製 jquery.easyui.min.js 與 themes 目錄到我的網站的 jquery 目錄下即可. 因為 jQuery UI 已經有一個 themes 目錄在那裡, 為了區別, 所以我先把 EasyUI 的 themes 目錄改名為 easyui-themes 再壓縮上傳伺服器後解壓縮. 最後自備的 jquery 目錄下是長這樣 (圈選起來的是屬於 EasyUI 的, 其餘則是以前測試 jQueryUI 的) :


經過這樣配置, 我原先測試 jQueryUI 的伺服器環境就可以同時測試 EasyUI 了. 下面就以解壓縮目錄下的 demo/datagrid/basic.html 這個檔來測試一下是否配置無誤. 打開此檔可以發現於 head 中需指定下列資源檔 :

<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

這邊我們要根據環境配置修改 href 的相對路徑, 我的網站路徑配置如下 :

root
  |__ jquery
  |         |__ jquery.js
  |         |__ jquery.easyui.min.js
  |         |__ easyui-lang-zh_TW.js
  |         |__ easyui-themes
  |__ jquerytest
            |__ easyui-datagrid-1.htm


所以 JS 與 CSS 資源的相對路徑要改為如下 :

<link rel="stylesheet" type="text/css" href="../jquery/easyui-themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery/easyui-themes/icon.css">
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../jquery/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery/easyui-lang-zh_TW.js"></script>

接下來看 basic.html 中的 HTML5 表格內容, 其中 table 標籤的 data-options 屬性中的 url 是用來指定表格的 AJAX 資料來源, method 用來指定 HTTP 方法, 如下所示 :

<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px" data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.josn',method:'get'">
  <thead>
    <tr>
      <th data-options="field:'itemid',width:80">Item ID</th>
      <th data-options="field:'productid',width:100">Product</th>
      <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
      <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
      <th data-options="field:'attr1',width:250">Attribute</th>
      <th data-options="field:'status',width:60,align:'center'">Status</th>
    </tr>
  </thead>
</table>


我們將原始的 basic.html 經上述修改後存成 easyui-datagrid-1.htm, 但是這個網頁檔在本機執行時只會顯示表格標題, 無法顯示表格內容, 必須將 datagrid_data1.json 這個資料來源檔案也上傳到伺服器才行, 其內容結構如下 :

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

可見需有 total (總筆數) 與 rows (列資料) 兩個屬性, 列資料是一個物件陣列, 每一個物件實體是欄位名稱與欄位值的對應.

範例 1http://mybidrobot.allalla.com/easyuitest/easyui-datagrid-1.htm [看原始碼]


當然, 實際應用上是由後端程式如 PHP 等產生輸出資料, 這時只要將 table 標籤的 data-options 屬性裡的 url 改為 .php 程式即可. 

第二種環境配置就是直接使用 EasyUI 官網的檔案, 放在 http://www.jeasyui.com/easyui/ 目錄下, 只要依照下載 zip 檔解壓縮後的目錄結構按圖索驥即可找到, 所以上述之資源指定要改為 :

 JS 與 CSS 資源的相對路徑要改為如下 :

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/locale/easyui-lang-zh_TW.js"></script>

如下列範例 2 所示 :

範例 2 : http://mybidrobot.allalla.com/easyuitest/easyui-settings-cdn.htm [看原始碼]

效果是一樣的, 好處是不必自己準備資源檔.

參考資料 :

zTree-jQuery tree plug-ins

沒有留言 :