jqGrid 實用技巧 (一) 最簡單的互動

要 學 會 使 用 jqGrid,其 實 在 jqGrid 的 官 網 就 有 很 詳 細 的 介 紹 。筆 者 建 議 在 jqGrid Wiki 裡 面 的 documentationDemo page 裡 面 的 所 有 範 例 ,最 好 都 完 整 的 讀 一 次 。為 免 只 是 無 聊 地 翻 譯 一 次 官 網 ,所 以 那 些 部 份 筆 者 就 會 跳 過 。至 少 你 應 該 先 搞 懂 那 些 最 基 本 的 事 ,例 如 如 何 連 接 到 資 料 庫 取 得 資 料 ,又 或 者 要 加 載 那 些 css 檔 案 和 javascript 檔 案 。

使 用 client side 的 control (例 如 jqGrid),和 使 用 server side 的 control (純 php 的 grid),最 主 要 的 分 別 是 client side 的 control 可 以 更 容 易 的 和 使 用 者 亙 動 。第 一 課 我 們 就 先 輕 鬆 地 練 習 一 個 無 聊 的 亙 動 :變 更 視 窗 的 大 小 (或 者 應 該 叫 做 瀏 覽 器 的 大 小 )。

什 麼 時 候 視 窗 的 大 小 會 改 變 呢 ?最 無 聊 的 標 準 答 案 :使 用 者 無 聊 地 拉 大 縮 小 視 窗 的 時 候 。當 然 ,也 有 一 些 更 常 見 的 情 況 ,使 用 按 下 最 大 化 /還 原 最 大 化 按 鈕 ;又 或 者 使 用 者 打 開 瀏 覽 器 的 其 他 功 能 視 窗 ,例 如 我 們 在 firefox 常 常 用 的 firebug,又 或 者 在 IE 釘 選 了 我 的 最 愛 在 左 邊 。以 上 種 種 ,都 會 改 變 網 頁 視 窗 的 大 小 。當 視 窗 的 大 小 有 變 化 的 時 候 ,就 會 產 生 window resize event。在 jQuery 裡 面 ,正 正 就 有 一 個 內 建 的 方 法 可 以 讓 我 們 輕 鬆 使 用 。

$(window).resize(function () { /* do something */ });

在 一 開 始 設 定 jqGrid 的 時 候 ,我 們 就 可 以 指 定 height 和 width 了 。減 了 80 是 留 下 一 點 空 間 ,美 觀 一 點 。

$("#list").jqGrid({
url: 'data.php',
datatype: 'json',
....
....
height: $(window).height()-80,
width: $(window).width()-80,
....
});

然 後 在 resize 的 時 候 ,我 們 用 setGridWidth 和 setGridHeight 方 法 改 變 grid 的 大 小 。

$(window).resize(function() {
$("#list").jqGrid('setGridWidth', $(window).width()-80);
$("#list").jqGrid('setGridHeight', $(window).height()-80);
});

這 樣 就 成 了 ,使 用 者 就 是 如 何 做 resize 視 窗 的 動 作 ,我 們 的 grid 都 會 自 動 變 更 大 小 ,以 符 合 新 的 視 窗 大 小 。

不 過 ,筆 者 的 審 美 觀 念 一 向 是 怪 怪 的 ,不 太 喜 歡 grid 裡 面 有 scroll bar。改 變 grid 的 高 度 ,並 不 會 改 變 每 一 頁 顯 示 資 料 筆 數 的 數 量 ,所 以 有 時 候 ,就 會 產 生 scroll bar。於 是 筆 者 稍 為 改 變 一 下 grid 的 設 定 。

var NumOfRow = Math.floor(($(window).height()-120)/24);
$("#list").jqGrid({
url: 'data.php',
datatype: 'json',
....
....
rowNum: NumOfRow,
height: '100%',
width: $(window).width()-80,
....
});

與 其 硬 是 指 定 height,不 如 指 定 一 個 高 度 剛 好 可 以 配 合 視 窗 顯 示 的 rowNum。因 為 grid 本 身 上 面 有 header,下 面 有 pager,所 以 要 減 多 一 點 ,減 去 120。再 用 餘 下 的 高 度 ,除 以 每 一 行 的 高 度 ,在 筆 者 自 己 的 設 定 大 概 每 一 行 是 24,得 出 正 確 的 row number。Math.floor 的 意 思 是 切 除 小 數 點 後 的 值 (floor / ceil 都 是 十 分 常 用 的 函 數 ,不 會 的 話 要 注 意 一 下 了 )。這 樣 子 ,惱 人 的 scroll bar 就 不 會 出 現 了 。

在 window resize 事 件 也 作 出 相 應 的 改 動 。

$(window).resize(function() {
var NumOfRow = Math.floor(($(window).height()-120)/24);
$("#list").jqGrid('setGridWidth', $(window).width()-80);
$("#list").jqGrid('setGridParam', {rowNum: NumOfRow}).trigger("reloadGrid");
});

因 為 原 來 的 height 已 經 是 100%,即 是 grid 的 高 度 會 隨 著 需 要 而 自 動 調 整 ,所 以 不 需 要 更 改 。而 因 為 改 變 rowNum 屬 性 是 不 會 令 grid 自 己 reload 的 ,所 以 要 手 動 reload 一 次 ,確 保 新 設 定 值 生 效 。

big window

就 這 樣 ,你 就 成 功 建 立 了 一 個 會 隨 著 視 窗 大 小 變 化 而 自 動 變 化 的 grid 了 ,而 且 也 不 會 出 現 惱 人 的 scroll bar。jqGrid 的 預 設 值 ,column width 是 會 隨 grid width 自 動 調 較 的 ,所 以 不 需 要 額 外 的 程 式 碼 ,超 方 便 吧 ?

small window

當 然 ,你 也 不 一 定 要 把 grid 放 大 到 擠 滿 整 個 視 窗 。你 可 以 把 grid 放 到 一 個 jQuery UI resizable 裡 面 ,grid 一 樣 可 以 隨 著 resizable 自 動 調 查 大 小 ,只 要 把 上 面 的 程 式 碼 加 入 resizable 的 stop 事 件 裡 面 就 可 以 了 。

視 窗 的 大 小 ,還 往 往 用 於 水 平 和 垂 直 置 中 物 件 。例 如 當 我 們 設 定 grid 下 面 的 pager 物 件 的 時 候 ,就 可 以 順 帶 的 設 定 add / edit / search 等 等 form 的 位 置 。如 果 沒 有 設 定 的 話 ,form 就 會 出 現 在 top: 0, left:0, 就 是 grid 左 上 角 的 位 置 ,不 太 美 觀 吧 。如 果 我 們 事 先 指 定 了 form 的 大 小 的 話 ,我 們 可 以 如 下 設 定 。這 樣 就 會 顯 示 在 整 個 視 窗 的 中 間 了 。

$("#list").jqGrid('navGrid','#pager',
{edit:true,add:false,del:false,search:false,view:false},
{height:150, width:450, top:($(window).height()-150)/2, left:($(window).width()-450)/2},
....
....
....
);

或 者 更 好 的 ,我 們 在 beforeShowForm 的 事 件 之 中 ,即 時 檢 查 form 的 大 小 ,然 後 根 據 那 個 大 小 來 做 top 和 left 的 設 定 。

$("#list").jqGrid('navGrid','#pager',
{edit:true,add:false,del:false,search:false,refresh:false},
{ beforeShowForm: function(form) {
var dlgDiv = $("#editmodlist");
var dlgWidth = dlgDiv.width();
var dlgHeight = dlgDiv.height();
dlgDiv[0].style.top = Math.round(($(window).height()-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round(($(window).width()-dlgWidth)/2) + "px";
}
....
....
});

這 次 我 們 先 簡 單 的 熱 了 身 ,下 一 次 就 深 入 一 點 討 論 如 何 設 定 那 個 colModel 了 。

ctleung張 先 生 ,男 性 ,肖 龍 。
職 業 :I.T. Consultant
簡 介 :不 好 好 讀 書 ;七 尺 差 五 寸 ,手 長 過 膝 ,雙 耳 垂 肩 ;性 寬 和 ,寡 言 語 ,喜 怒 不 形 於 色 。據 說 少 時 曾 斬 白 蛇 於 鳳 凰 山 下 ……
This entry was posted in jqGrid and tagged , , . Bookmark the permalink.

4 Responses to jqGrid 實用技巧 (一) 最簡單的互動

  1. newbie2005 says:

    我在下載 demo file 時發現 demo 內的檔案不能使用, 請問有沒有什麼需要注意的地方

  2. C.T. Leung says:

    demo file?? 我這裡是沒有 demo 給下載的呀,你講邊個 demo 呀 ????

  3. newbie2005 says:

    在http://www.trirand.com/blog/?page_id=6 有一個 demo file(4.x)

  4. C.T. Leung says:

    我想你誤會大了。jqGrid 是 http://www.trirand.com/ 開發的產品,有免費版,也有商用版。我們絕對無意用任何明示、暗示、或者任何引人誤會的方式令到任何人聯想到本站跟 jqGrid 的開發有任何的關係。我們絕不奪人之美。

    jqGrid 絕對不是我個人,或者本站的作品。我們幾個人還沒有那樣強大的能力,能開發像 jqGrid 如此好用的產品。我們是一群受惠於這個免費的工具的 program 麻,所以就決心為 jqGrid 向華語世界推廣一下。順便為普羅 jqGrid 的入門者提供一點點微小的使用心得。

    如果有任何令人誤會的地方,本網站在此衷心致歉。

    註: 雖說那不是本站的檔,但我還是為 trirand 公司幫你看了一下。首先,你下載的是 trirand 公司的 demo page 裡面的 source。原來的 demo page 就是下面這條 link 。

    http://trirand.com/blog/jqgrid/jqgrid.html

    所以,你自己放上 server 執行的話,首頁就要打開 jqgrid.html( 所有其他頁面都是要在 jqgrid.html 裡面的 container 裡面執行的 )。然後,它裡面引用的 jquery.js 是不存在的,這個要改為 jquery.min.js,就全部可以執行了。

    但最大問題是下載的檔案都不可能包含 database server 呀,所以逢係要連到 server 取得資料的 grid 都會無 data,空白一片。[ 例如在 demo 裡面有 url:’server.php?q=1′ ,那明顯你的 server 不會自己爆一個 server.php 出來的吧?就算有,它傳回的資料和格式又如何會跟 demo 使用的一樣呢? ]

    除非你建立好自己的 database server,而且入齊數據 ( 這裡面不是一個 demo , 而是上百個 demo ),再自己寫好 php 檔來傳回資料,否則的話你自己架設這個 demo 實在是意義不大,還不如用回 trirand 公司上面的 demo 算了。

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>