今日巳時, 母親遺骨於高樹火化, 旋即進塔安奉.
母親的最後旅程於今日圓滿.
2014年9月29日 星期一
守靈日誌-5
昨天 9/28 (日) 比較空閒, 早上禮儀社的人來搭建靈堂, 並拆除小靈堂, 親友致贈的花籃也送來了, 但似乎太多了, 靈堂兩側擺不下, 天氣熱為了保鮮, 我一有空就得澆水.
今天早上做齋, 故早午兩餐皆吃素, 頌藥師懺上中下三卷. 下午普渡及大殮, 由大舅二舅封棺, 我把婷婷抄寫的心經以及菁菁畫的阿嬤菜園圖, 姐姐畫的蓮霧 (母親在醫院時最想吃的水果), 玉米 (母親製作 "新發明" 的材料) 等蔬果圖放入棺木中, 希望她能受用.
早晚拜飯煮到昨日晚餐, 今日做齋就不用了. 我每日仍做早晚課, 頌阿彌陀經一卷, 往生咒三遍, 大悲咒三遍, 心經一遍再迴向. 今天是最後在靈前做晚課了, 明日 6 時開孝, 故須早睡.
今天早上做齋, 故早午兩餐皆吃素, 頌藥師懺上中下三卷. 下午普渡及大殮, 由大舅二舅封棺, 我把婷婷抄寫的心經以及菁菁畫的阿嬤菜園圖, 姐姐畫的蓮霧 (母親在醫院時最想吃的水果), 玉米 (母親製作 "新發明" 的材料) 等蔬果圖放入棺木中, 希望她能受用.
早晚拜飯煮到昨日晚餐, 今日做齋就不用了. 我每日仍做早晚課, 頌阿彌陀經一卷, 往生咒三遍, 大悲咒三遍, 心經一遍再迴向. 今天是最後在靈前做晚課了, 明日 6 時開孝, 故須早睡.
2014年9月28日 星期日
菁菁與阿嬤之菜園農忙圖
菁菁說要畫一張阿嬤在菜園的圖放在棺木中火化, 要求我找阿嬤的照片給她, 記得以前網誌有寫過, 但忘記是何年何月, 也忘了標題, 乾脆從圖片庫中搜尋, 找到一張菁菁在菜園幫阿嬤拔花生的照片 :
過去一週她自己向老師請了五天假幫忙折蓮花, 我說阿嬤真的沒白疼妳, 雖然擔心她回校上課後功課補不完, 但老實說, 還好有她陪伴, 不然只有我跟爸在家還真的有點孤寂.
菁菁在四歲離開鄉下到高雄讀幼稚園之前, 是阿公與阿嬤的開心果, 她的鄉下生活留下非常多的 "菁語錄", 左鄰右舍的婆婆媽媽無人不知, 媽生前不時拿出來糗她. 三隻小狐狸只有她到了六年級還是跟阿公阿嬤又親又抱的, 每天睡覺前也要跟我 KISS GOOD NIGHT.
2014年9月26日 星期五
守靈日誌-4
早上我出來要收早餐的拜飯, 看見小添伯已坐在圓桌那邊整理訃聞, 不久鄰居道彩哥, 堂叔也來了, 今天要拜託他們遞送訃聞給親朋好友.
早上大阿姨請鄰居載她來, 吃過午飯才回去. 下午小舅媽跟小阿姨整理母親衣服, 挑出兩套要放入棺木中的, 其餘則於大殮後火化.下午有人送花籃來, 一問之下才知是從五甲送來, 係內科部陳主任與水某的同事所送. 非常感謝陳主任, 他在百忙中還抽空到安寧病房去探視母親, 並檢查病情.
傍晚禮儀社的阿彬帶我去看塔位, 位於月光山腰的上齋堂地藏殿, 此為母親靈骨暫厝之地, 我幫她選了 0892 號位置, 因為那排剛好補滿, 比較有伴. 後年 105 年利東西, 屆時再擇日移厝家祠. 9 月上旬在 31 病房時, 某次痛完後跟我說 : "這次大概好不了了, 媽過身後火化先置塔, 一對年後才可以放家祠, 要記得". 我深知此次病情, 沒有像之前那樣叫她別亂想, 醫生一定有辦法, 而是反問她 : "六年前化療時不是告訴我你怕火要土葬嗎? 怎麼又改為火葬?", 她說土葬太麻煩, 現在都求簡單了. 我想可能是這幾年周遭鄰居好友一個個仙遊都是火葬的緣故吧.
晚上做完晚課, 我到曬穀場的小靈堂巡一遍, 坐在小板凳上看著母親遺照, 回顧過去的兩個月, 心中感傷不已. 兩個月前走進 101 病房時, 她還能每天自己去上廁所刷牙洗澡, 談論家族中的過往歷史 (事實上我已經聽了很多遍, 但我每次都裝作是第一次聽到). 剛到 31 病房時, 每晚九點還能扶著她去盥洗就寢, 但隨著病況惡化, 尿袋掛上了, 鼻胃管也插了, 就不能像以前那樣服伺她上廁所了. 在安寧病房的六天, 晚上看著在鎮靜劑作用下已昏睡的母親, 失落感很大, 因為已經無法再跟她溝通了, 但若醒著, 又不忍看她承受癌細胞吞噬之痛.
所幸最後及時回到鄉下老家, 在家人親友陪伴下壽終正寢. 在安寧病房時我最大的憂慮就是這個, 母親不識字, 我不希望她在醫院離世, 我怕她會找不到回家的路.
早上大阿姨請鄰居載她來, 吃過午飯才回去. 下午小舅媽跟小阿姨整理母親衣服, 挑出兩套要放入棺木中的, 其餘則於大殮後火化.下午有人送花籃來, 一問之下才知是從五甲送來, 係內科部陳主任與水某的同事所送. 非常感謝陳主任, 他在百忙中還抽空到安寧病房去探視母親, 並檢查病情.
傍晚禮儀社的阿彬帶我去看塔位, 位於月光山腰的上齋堂地藏殿, 此為母親靈骨暫厝之地, 我幫她選了 0892 號位置, 因為那排剛好補滿, 比較有伴. 後年 105 年利東西, 屆時再擇日移厝家祠. 9 月上旬在 31 病房時, 某次痛完後跟我說 : "這次大概好不了了, 媽過身後火化先置塔, 一對年後才可以放家祠, 要記得". 我深知此次病情, 沒有像之前那樣叫她別亂想, 醫生一定有辦法, 而是反問她 : "六年前化療時不是告訴我你怕火要土葬嗎? 怎麼又改為火葬?", 她說土葬太麻煩, 現在都求簡單了. 我想可能是這幾年周遭鄰居好友一個個仙遊都是火葬的緣故吧.
晚上做完晚課, 我到曬穀場的小靈堂巡一遍, 坐在小板凳上看著母親遺照, 回顧過去的兩個月, 心中感傷不已. 兩個月前走進 101 病房時, 她還能每天自己去上廁所刷牙洗澡, 談論家族中的過往歷史 (事實上我已經聽了很多遍, 但我每次都裝作是第一次聽到). 剛到 31 病房時, 每晚九點還能扶著她去盥洗就寢, 但隨著病況惡化, 尿袋掛上了, 鼻胃管也插了, 就不能像以前那樣服伺她上廁所了. 在安寧病房的六天, 晚上看著在鎮靜劑作用下已昏睡的母親, 失落感很大, 因為已經無法再跟她溝通了, 但若醒著, 又不忍看她承受癌細胞吞噬之痛.
所幸最後及時回到鄉下老家, 在家人親友陪伴下壽終正寢. 在安寧病房時我最大的憂慮就是這個, 母親不識字, 我不希望她在醫院離世, 我怕她會找不到回家的路.
2014年9月25日 星期四
守靈日誌-3
一大早我還在煮菜準備母親的拜飯, 鄰居阿盡姐就過來了, 還好有來提醒我, 昨日統計花籃與庫錢時將她給漏掉了. 接著月騰伯及伯母也來了, 對於未告知母親住院一事有所責備, 只得委婉解釋母親不欲麻煩人家的本意.
今天在小舅媽, 小阿姨, 小姨婆, 以及阿蘊幫忙之下, 終於摺好 108 朵往生咒蓮花, 菁菁明天開始只要每天摺 6 個以上即可.
下午一邊摺蓮花, 一邊聽小阿姨訴說童年寄人籬下的艱苦, 從小三到初三整整六年寄居親友家求學, 小學三年級就要自己打水煮飯了. 她說母親結婚後幾乎每天都會帶青菜回去照顧年幼的弟妹, 她最喜歡我媽回家, 因為這樣就有得吃了.
外公當初會買庄上的房子, 一是為了安置求學中的阿姨與舅舅, 更重要的原因是, 好強的母親面對紛至沓來的求親, 她說沒有像樣的娘家房子她不嫁, 於是外公就買了庄上東角的那棟房子, 結果還被原屋主騙了, 那房子早已抵押給銀行, 只好再跟銀行買一次, 真是冤枉.
晚上 8 點後下起大雷雨, 我趕緊出去檢查靈堂, 還好不會漏雨.
今天在小舅媽, 小阿姨, 小姨婆, 以及阿蘊幫忙之下, 終於摺好 108 朵往生咒蓮花, 菁菁明天開始只要每天摺 6 個以上即可.
下午一邊摺蓮花, 一邊聽小阿姨訴說童年寄人籬下的艱苦, 從小三到初三整整六年寄居親友家求學, 小學三年級就要自己打水煮飯了. 她說母親結婚後幾乎每天都會帶青菜回去照顧年幼的弟妹, 她最喜歡我媽回家, 因為這樣就有得吃了.
外公當初會買庄上的房子, 一是為了安置求學中的阿姨與舅舅, 更重要的原因是, 好強的母親面對紛至沓來的求親, 她說沒有像樣的娘家房子她不嫁, 於是外公就買了庄上東角的那棟房子, 結果還被原屋主騙了, 那房子早已抵押給銀行, 只好再跟銀行買一次, 真是冤枉.
晚上 8 點後下起大雷雨, 我趕緊出去檢查靈堂, 還好不會漏雨.
2014年9月24日 星期三
守靈日誌-2
昨天實在太忙了, 做完晚課便昏昏欲睡, 便叫菁菁一起早些就寢, 因為第二天要早起煮菜給媽拜飯. 昨日 (9/23) 早上賣豬肉的榮發舅媽來點香後走到菜園, 看到已荒蕪兩個月的菜園, 感嘆地說她不知吃了多少來自這菜園的青菜. 今晚月騰伯來電問說媽住幾號病房, 因明天他們夫婦要去榮總門診拿藥, 想順道去探病, 爸告訴他們母親已往生, 想必他們是非常驚訝. 爸說月騰伯母是媽小時候在山上的鄰居, 她每次去鎮上總是帶上自種的青菜, 他們每次來我家也總是帶些豬肉或排骨之類的回禮. 而小舅媽待母親猶過於親姊姊, 原因是在小舅最艱困時期, 媽總是把家裡出產的米, 菜一袋一袋地堆上他們的車 ... 母親的好人緣來自她總是不吝給予, 在這鄉里中, 到哪裡都受歡迎. 反觀我自己卻很小氣, 真的沒遺傳到, 難怪我人緣普普, 朋友只有一個半.
今天終於搞定舅舅阿姨他們的禮數, 包括做齋, 花籃, 花圈, 以及庫錢的很繁瑣的項目. 禮儀社也來敲定喪禮細節.
今天終於搞定舅舅阿姨他們的禮數, 包括做齋, 花籃, 花圈, 以及庫錢的很繁瑣的項目. 禮儀社也來敲定喪禮細節.
2014年9月22日 星期一
守靈日誌-1
今天非常忙碌, 禮儀社一早來搭了小靈堂, 指導如何早晚為母親準備宛如生時之刷牙洗臉以及飲食等事宜. 菜是我照以前母親教我的方式煮, 但好勝的她或許會嫌我煮得不夠入味. 小狐狸們也忙著折蓮花, 菁菁說要教我, 但我實在沒空, 因為鄰居親朋好友聞訊趕來, 我必須接待為其點香與祈福. 早上是二姨丈與阿珍夫婦載從台北南下之大舅, 中午是小阿姨與偉偉及左營阿姨, 下午則是台中的表哥, 表妹與表弟.
我每日起床與晚上盥洗後即為母親頌阿彌陀經一卷, 往生咒若干遍, 大悲咒若干遍, 並加以迴向, 希望對她有所助益. 今天阿淑妹子引介慈濟師姐要來助念, 但母親往生時, 已由我領聲與家人一起連續助念 8 小時, 之後觀其面容明亮, 非常安詳.
老家少了老媽的感覺真是不對勁, 像是車子少了顆引擎似的. 這兩個月來的病房生活, 除了末期她已陷入昏睡外, 白天她總是催促我快去上班, 晚上催我快睡覺, 不然半夜叫痛時, 擔心我沒睡好第二天又要趕去上班.
我每日起床與晚上盥洗後即為母親頌阿彌陀經一卷, 往生咒若干遍, 大悲咒若干遍, 並加以迴向, 希望對她有所助益. 今天阿淑妹子引介慈濟師姐要來助念, 但母親往生時, 已由我領聲與家人一起連續助念 8 小時, 之後觀其面容明亮, 非常安詳.
老家少了老媽的感覺真是不對勁, 像是車子少了顆引擎似的. 這兩個月來的病房生活, 除了末期她已陷入昏睡外, 白天她總是催促我快去上班, 晚上催我快睡覺, 不然半夜叫痛時, 擔心我沒睡好第二天又要趕去上班.
2014年9月21日 星期日
病房雜記-4
今天是 9 月 20 日, 再過三天媽住院就滿兩個月了. 下午到病房後, 護理師在準備按摩浴缸, 要幫媽洗澡. 昨日水某幫媽擦澡時發現頸部垢很多, 雖然有擦身體, 但是因為怕會痛, 所以不敢擦太大力, 加上近兩個月沒洗澡, 垢當然難免.
洗澡前先打止痛, 然後護理師就推了一台機械式的移動單架到病房, 三人合力將她移過去後, 就推到按摩浴缸澡堂. 先用沙威隆洗淨後, 護理師操作移動單架使其下降到浴缸中. 啟動按摩浴缸沖水.
洗完澡量血壓發現降到 102, 呼吸也變得短促, 但傍晚小狐狸們來看阿嬤時再量則又降至 92. 可能洗過澡循環通暢吧, 但也有可能是心肺功能越來越不好了.
洗澡前先打止痛, 然後護理師就推了一台機械式的移動單架到病房, 三人合力將她移過去後, 就推到按摩浴缸澡堂. 先用沙威隆洗淨後, 護理師操作移動單架使其下降到浴缸中. 啟動按摩浴缸沖水.
洗完澡量血壓發現降到 102, 呼吸也變得短促, 但傍晚小狐狸們來看阿嬤時再量則又降至 92. 可能洗過澡循環通暢吧, 但也有可能是心肺功能越來越不好了.
2014年9月17日 星期三
病房雜記-3
今天是 9 月 17 日, 因左營阿姨有事, 我請了一天假. 早上聽到媽媽叫喚而醒來, 但她不像以前叫喚我的名字, 而是叫 "姆媽, 等我", 也就是我外婆, 不知是做夢還是 .... 摸一下手覺得似乎有些發燒, 請護理師來看, 約 37.4 度, 在肚子上抹些精油後比較鎮靜下來, 我問她為何叫外婆, 她說叫到不知要叫誰, 就叫媽媽. 這讓我想起搶救雷恩大兵電影裡, 在戰場上被砲火擊中的士兵也是叫喚媽媽, 不同語言的兒童最早學會的單詞也是媽媽, 難道走近人生盡頭時, 都會回到童年嗎? 我測試了一下她還認得我, 也能說出外公外婆名字, 但護理師說, 在藥物作用下, 其意識可能會片片斷斷不連續, 有時清楚, 有時模糊.
前天 (9 月 15 日) 潘醫師通知說安寧病房單人房有空位, 所以那天下午請兩小時假移病房. 這個 105 病房其實就在當初住院時的 101 病房對面, 牆上刻著崇德兩字, 當時並不知道這原來就是安寧病房. 從第 7 床這間窗戶可以看到半屏山, 視野比 31 病房 1 床好, 只是房間較小一點.
來這裡後因為鎮靜劑的關係, 媽媽昏睡的時間多了, 即使醒來眼神也是呆滯. 昨日我特地從家裡帶來李文古的 mp3 給她聽, 還能邊聽邊講, 但今天精神就差多了. 但是問她問題又還能答得出來. 離開 31 的前一天晚上, 她痛完稍緩和時, 語重心長地說, 這個病是治不好了, 然後說了一句 : "這樣就大概是一輩子了吧!" ? 這句話一直在我腦中迴盪不已.
孔子說五十而知天命, 我今年虛歲即五十矣, 晚上在醫院服侍母親近兩個月, 終於明瞭這句話的意思. 五十歲的人父母皆已年邁, 侍親之疾才會深刻了解, 二三十年後就輪到我們上場了. 對於已過半的人生, 若能如孔子所言知天命, 所見光景該是有所不同.
前天 (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 參考文件
測試範例 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 (一)
<?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 屬性加以指定, 例如 :
# Create a Link Button
測試範例 11 : http://tony1966.xyz/test/easyuitest/easyui-datagrid-11.htm [看原始碼]
圖形按鈕看起來很不錯 !
# 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 [看原始碼]
如果要讓欄位可排序, 可在欄位設定 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 屬性加以指定, 例如 :
- icon-cancel : 取消
- icon-reload : 重新載入
- icon-search : 搜尋
- icon-print : 列印
- icon-help : 協助
- icon-save : 儲存
- icon-cut : 剪下
- icon-edit : 編輯
- icon-remove : 刪除
- icon-new : 新增
- 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 所示 :
<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 所示 :
圖形按鈕看起來很不錯 !
訂閱：
文章
(
Atom
)