2014年9月30日 星期二

最後旅程

今日巳時, 母親遺骨於高樹火化, 旋即進塔安奉.

母親的最後旅程於今日圓滿.


2014年9月29日 星期一

守靈日誌-5

昨天 9/28 (日) 比較空閒, 早上禮儀社的人來搭建靈堂, 並拆除小靈堂, 親友致贈的花籃也送來了, 但似乎太多了, 靈堂兩側擺不下, 天氣熱為了保鮮, 我一有空就得澆水.

今天早上做齋, 故早午兩餐皆吃素, 頌藥師懺上中下三卷. 下午普渡及大殮, 由大舅二舅封棺, 我把婷婷抄寫的心經以及菁菁畫的阿嬤菜園圖, 姐姐畫的蓮霧 (母親在醫院時最想吃的水果), 玉米 (母親製作 "新發明" 的材料) 等蔬果圖放入棺木中, 希望她能受用.

早晚拜飯煮到昨日晚餐, 今日做齋就不用了. 我每日仍做早晚課, 頌阿彌陀經一卷, 往生咒三遍, 大悲咒三遍, 心經一遍再迴向. 今天是最後在靈前做晚課了, 明日 6 時開孝, 故須早睡. 

2014年9月28日 星期日

菁菁與阿嬤之菜園農忙圖

菁菁說要畫一張阿嬤在菜園的圖放在棺木中火化, 要求我找阿嬤的照片給她, 記得以前網誌有寫過, 但忘記是何年何月, 也忘了標題, 乾脆從圖片庫中搜尋, 找到一張菁菁在菜園幫阿嬤拔花生的照片 :


過去一週她自己向老師請了五天假幫忙折蓮花, 我說阿嬤真的沒白疼妳, 雖然擔心她回校上課後功課補不完, 但老實說, 還好有她陪伴, 不然只有我跟爸在家還真的有點孤寂. 

菁菁在四歲離開鄉下到高雄讀幼稚園之前, 是阿公與阿嬤的開心果, 她的鄉下生活留下非常多的 "菁語錄", 左鄰右舍的婆婆媽媽無人不知, 媽生前不時拿出來糗她. 三隻小狐狸只有她到了六年級還是跟阿公阿嬤又親又抱的, 每天睡覺前也要跟我 KISS GOOD NIGHT.


2014年9月26日 星期五

守靈日誌-4

早上我出來要收早餐的拜飯, 看見小添伯已坐在圓桌那邊整理訃聞, 不久鄰居道彩哥, 堂叔也來了, 今天要拜託他們遞送訃聞給親朋好友.

早上大阿姨請鄰居載她來, 吃過午飯才回去. 下午小舅媽跟小阿姨整理母親衣服, 挑出兩套要放入棺木中的, 其餘則於大殮後火化.下午有人送花籃來, 一問之下才知是從五甲送來, 係內科部陳主任與水某的同事所送. 非常感謝陳主任, 他在百忙中還抽空到安寧病房去探視母親, 並檢查病情.

傍晚禮儀社的阿彬帶我去看塔位, 位於月光山腰的上齋堂地藏殿, 此為母親靈骨暫厝之地, 我幫她選了 0892 號位置, 因為那排剛好補滿, 比較有伴. 後年 105 年利東西, 屆時再擇日移厝家祠. 9 月上旬在 31 病房時, 某次痛完後跟我說 : "這次大概好不了了, 媽過身後火化先置塔, 一對年後才可以放家祠, 要記得". 我深知此次病情, 沒有像之前那樣叫她別亂想, 醫生一定有辦法, 而是反問她 : "六年前化療時不是告訴我你怕火要土葬嗎? 怎麼又改為火葬?", 她說土葬太麻煩, 現在都求簡單了. 我想可能是這幾年周遭鄰居好友一個個仙遊都是火葬的緣故吧.

晚上做完晚課, 我到曬穀場的小靈堂巡一遍, 坐在小板凳上看著母親遺照, 回顧過去的兩個月, 心中感傷不已. 兩個月前走進 101 病房時, 她還能每天自己去上廁所刷牙洗澡, 談論家族中的過往歷史 (事實上我已經聽了很多遍, 但我每次都裝作是第一次聽到). 剛到 31 病房時, 每晚九點還能扶著她去盥洗就寢, 但隨著病況惡化, 尿袋掛上了, 鼻胃管也插了, 就不能像以前那樣服伺她上廁所了. 在安寧病房的六天, 晚上看著在鎮靜劑作用下已昏睡的母親, 失落感很大, 因為已經無法再跟她溝通了, 但若醒著, 又不忍看她承受癌細胞吞噬之痛.

所幸最後及時回到鄉下老家, 在家人親友陪伴下壽終正寢. 在安寧病房時我最大的憂慮就是這個, 母親不識字, 我不希望她在醫院離世, 我怕她會找不到回家的路.

2014年9月25日 星期四

守靈日誌-3

一大早我還在煮菜準備母親的拜飯, 鄰居阿盡姐就過來了, 還好有來提醒我, 昨日統計花籃與庫錢時將她給漏掉了. 接著月騰伯及伯母也來了, 對於未告知母親住院一事有所責備, 只得委婉解釋母親不欲麻煩人家的本意.

今天在小舅媽, 小阿姨, 小姨婆, 以及阿蘊幫忙之下, 終於摺好 108 朵往生咒蓮花, 菁菁明天開始只要每天摺 6 個以上即可.

下午一邊摺蓮花, 一邊聽小阿姨訴說童年寄人籬下的艱苦, 從小三到初三整整六年寄居親友家求學, 小學三年級就要自己打水煮飯了. 她說母親結婚後幾乎每天都會帶青菜回去照顧年幼的弟妹, 她最喜歡我媽回家, 因為這樣就有得吃了.

外公當初會買庄上的房子, 一是為了安置求學中的阿姨與舅舅, 更重要的原因是, 好強的母親面對紛至沓來的求親, 她說沒有像樣的娘家房子她不嫁, 於是外公就買了庄上東角的那棟房子, 結果還被原屋主騙了, 那房子早已抵押給銀行, 只好再跟銀行買一次, 真是冤枉.

晚上 8 點後下起大雷雨, 我趕緊出去檢查靈堂, 還好不會漏雨.

2014年9月24日 星期三

守靈日誌-2

昨天實在太忙了, 做完晚課便昏昏欲睡, 便叫菁菁一起早些就寢, 因為第二天要早起煮菜給媽拜飯. 昨日 (9/23) 早上賣豬肉的榮發舅媽來點香後走到菜園, 看到已荒蕪兩個月的菜園, 感嘆地說她不知吃了多少來自這菜園的青菜. 今晚月騰伯來電問說媽住幾號病房, 因明天他們夫婦要去榮總門診拿藥, 想順道去探病, 爸告訴他們母親已往生, 想必他們是非常驚訝. 爸說月騰伯母是媽小時候在山上的鄰居, 她每次去鎮上總是帶上自種的青菜, 他們每次來我家也總是帶些豬肉或排骨之類的回禮. 而小舅媽待母親猶過於親姊姊, 原因是在小舅最艱困時期, 媽總是把家裡出產的米, 菜一袋一袋地堆上他們的車 ... 母親的好人緣來自她總是不吝給予, 在這鄉里中, 到哪裡都受歡迎. 反觀我自己卻很小氣, 真的沒遺傳到, 難怪我人緣普普, 朋友只有一個半.

今天終於搞定舅舅阿姨他們的禮數, 包括做齋, 花籃, 花圈, 以及庫錢的很繁瑣的項目. 禮儀社也來敲定喪禮細節.

2014年9月22日 星期一

守靈日誌-1

今天非常忙碌, 禮儀社一早來搭了小靈堂, 指導如何早晚為母親準備宛如生時之刷牙洗臉以及飲食等事宜. 菜是我照以前母親教我的方式煮, 但好勝的她或許會嫌我煮得不夠入味. 小狐狸們也忙著折蓮花, 菁菁說要教我, 但我實在沒空, 因為鄰居親朋好友聞訊趕來, 我必須接待為其點香與祈福. 早上是二姨丈與阿珍夫婦載從台北南下之大舅, 中午是小阿姨與偉偉及左營阿姨, 下午則是台中的表哥, 表妹與表弟.

我每日起床與晚上盥洗後即為母親頌阿彌陀經一卷, 往生咒若干遍, 大悲咒若干遍, 並加以迴向, 希望對她有所助益. 今天阿淑妹子引介慈濟師姐要來助念, 但母親往生時, 已由我領聲與家人一起連續助念 8 小時, 之後觀其面容明亮, 非常安詳.

老家少了老媽的感覺真是不對勁, 像是車子少了顆引擎似的. 這兩個月來的病房生活, 除了末期她已陷入昏睡外, 白天她總是催促我快去上班, 晚上催我快睡覺, 不然半夜叫痛時, 擔心我沒睡好第二天又要趕去上班.

2014年9月21日 星期日

回家

早上起來後幫母親擦臉擦手時發現手關節處有圓形瘀青,翻開被單看到膝蓋也是如此,詢問護理師,她說應該是心肺功能降低,導致循環不良所致。她建議今日即辦出院。
辦好出院手續已十點半,救護車駕駛開很快,約十一點半回到鄉下老家。小舅提醒我去背阿蘭下來給她看,她聽到阿蘭聲音,流下一行清淚,我們告訴她別擔心,12:03 分母親安詳往生。
感謝 31 病房與 105 病房全體護理師,感謝余主任,陳主任,以及親切的潘湘如醫師,還有 31 病房的清潔阿姨,感謝您帶給她最後的一段趣味。

病房雜記-4

今天是 9 月 20 日, 再過三天媽住院就滿兩個月了. 下午到病房後, 護理師在準備按摩浴缸, 要幫媽洗澡. 昨日水某幫媽擦澡時發現頸部垢很多, 雖然有擦身體, 但是因為怕會痛, 所以不敢擦太大力, 加上近兩個月沒洗澡, 垢當然難免.

洗澡前先打止痛, 然後護理師就推了一台機械式的移動單架到病房, 三人合力將她移過去後, 就推到按摩浴缸澡堂. 先用沙威隆洗淨後, 護理師操作移動單架使其下降到浴缸中. 啟動按摩浴缸沖水.

洗完澡量血壓發現降到 102, 呼吸也變得短促, 但傍晚小狐狸們來看阿嬤時再量則又降至 92. 可能洗過澡循環通暢吧, 但也有可能是心肺功能越來越不好了.

2014年9月17日 星期三

病房雜記-3

今天是 9 月 17 日, 因左營阿姨有事, 我請了一天假. 早上聽到媽媽叫喚而醒來, 但她不像以前叫喚我的名字, 而是叫 "姆媽, 等我", 也就是我外婆, 不知是做夢還是 .... 摸一下手覺得似乎有些發燒, 請護理師來看, 約 37.4 度, 在肚子上抹些精油後比較鎮靜下來, 我問她為何叫外婆, 她說叫到不知要叫誰, 就叫媽媽. 這讓我想起搶救雷恩大兵電影裡, 在戰場上被砲火擊中的士兵也是叫喚媽媽, 不同語言的兒童最早學會的單詞也是媽媽, 難道走近人生盡頭時, 都會回到童年嗎? 我測試了一下她還認得我, 也能說出外公外婆名字, 但護理師說, 在藥物作用下, 其意識可能會片片斷斷不連續, 有時清楚, 有時模糊.

前天 (9 月 15 日) 潘醫師通知說安寧病房單人房有空位, 所以那天下午請兩小時假移病房. 這個 105 病房其實就在當初住院時的 101 病房對面, 牆上刻著崇德兩字, 當時並不知道這原來就是安寧病房. 從第 7 床這間窗戶可以看到半屏山, 視野比 31 病房 1 床好, 只是房間較小一點.

來這裡後因為鎮靜劑的關係, 媽媽昏睡的時間多了, 即使醒來眼神也是呆滯. 昨日我特地從家裡帶來李文古的 mp3 給她聽, 還能邊聽邊講, 但今天精神就差多了. 但是問她問題又還能答得出來. 離開 31 的前一天晚上, 她痛完稍緩和時, 語重心長地說, 這個病是治不好了, 然後說了一句 : "這樣就大概是一輩子了吧!" ? 這句話一直在我腦中迴盪不已.

孔子說五十而知天命, 我今年虛歲即五十矣, 晚上在醫院服侍母親近兩個月, 終於明瞭這句話的意思. 五十歲的人父母皆已年邁, 侍親之疾才會深刻了解, 二三十年後就輪到我們上場了. 對於已過半的人生, 若能如孔子所言知天命, 所見光景該是有所不同.


2014年9月14日 星期日

病房雜記-2

今天已經是九月十四, 媽住院已經一個半月多了,下午小舅與舅媽來時,看到外面陽光燦爛,問她要不要坐輪椅到花園看看,她說好,於是我去跟護士借輪椅,她們都很驚訝,可能料想不到臥床那麼久,醒來就痛得要打嗎啡的她,竟然會答應出去逛逛.

我扶她起來坐輪椅時非常吃力,因為她的雙腳根本已無法站立.菁菁幫忙推點滴架,我跟舅媽推著她沿著三樓走廊走一遍,透過落地窗看看外面的花園,本來想出去花園走走,但一推開門熱氣沖來,她就說太熱別出去了.我看著園中隨風搖曳的樹葉,這對我們而言是再普通不過的風景,沒有人會停下來看一眼,即使看了也不會有什麼意義.但對媽這樣可能來日無多的病人來說,能這樣停下來看看花葉的機會卻是彌足珍貴.

昨日下午醒來還沒開始痛時,精神似乎特好,她要我幫她撥電話給有元哥,她自己跟他講電話, 叫他這兩天去我家將菜園鋤出兩行溝來種高麗菜.這讓我很訝異,前陣子還說菜園的事已經管不了那麼多了.這兩天嗎啡的止痛效果已經不明顯,可能閥值已上升,痛到不行時我就去通知護士打鎮靜劑讓她睡著,睡著了或許就不知道痛了.老來就怕病來磨,特別是像癌症這種病,其痛楚只有病人才知道何其難耐.




2014年9月8日 星期一

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 參考文件 

測試範例 1http://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 後上傳, 結果如下 :

測試範例 2http://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 所示 :

測試範例 7http://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 [看原始碼]


圖形按鈕看起來很不錯 !