jqGrid 實用技巧 (四) Form View

[anti-both]

上 篇 說 完 了 Form editing 的 Search,這 星 期 就 說 一 點 View。很 多 人 都 以 為 View 其 實 沒 什 麼 好 說 的 ,其 實 不 然 。很 多 時 間 當 grid 的 空 間 有 限 ,不 能 列 出 過 多 的 欄 位 。這 時 候 View 就 可 以 補 充 grid 的 不 足 了 。View 也 可 以 將 資 料 排 列 得 比 較 美 觀 。

又 再 回 到 那 功 能 強 大 的 colModel。

1
2
3
4
5
6
7
...
colModel :[
....
{name:'name', index:'name', viewable:true},
....
],
...

而 假 如 是 隱 藏 的 欄 位 呢 ?隱 藏 的 欄 位 要 另 外 在 editrules 加 上 edithidden:true。就 像 之 前 在 《規 劃 你 的 jqGrid 》那 一 課 說 的 一 樣 。

1
2
3
...
{name:'vendor', index:'vendor', hidden:true, viewable:true, editrules:{edithidden:true}},
...

好 像 說 完 了 ,大 家 準 備 下 課 ?!當 然 不 。就 是 因 為 View 本 身 比 較 簡 單 ,本 身 需 要 設 定 的 東 西 比 較 少 ,所 以 我 們 正 好 就 可 以 借 用 View 的 簡 單 環 境 來 學 點 jqGrid 的 其 他 東 西 。這 樣 比 較 不 會 令 讀 者 混 淆 。

第 一 樣 先 說 formoptions。

1
2
3
...
{name:'fix_asset', index:'fix_asset', formoptions:{label:'固 定 資 產 ',rowpos:10,colpos:2} },
...

label:’固 定 資 產 ‘。本 來 Form Editing 裡 面 的 label 是 和 我 們 設 定 的 colNmaes 一 樣 的 。但 假 如 你 想 在 Form 裡 面 用 不 同 的 label,就 可 以 在 這 裡 設 定 。在 上 例 中 ,我 在 grid 裡 面 因 為 節 省 欄 寬 ,所 以 只 用 了 「固 定 」做 colName。但 在 Form 裡 面 就 不 用 節 省 欄 寬 了 ,所 以 可 以 用 回 全 名 「固 定 資 產 」。

Form Editing View

上 圖 中 ,也 可 以 看 到 所 有 欄 位 都 整 齊 的 分 成 兩 排 ,這 就 是 formoptions 裡 面 的 rowpos 和 colpos 的 效 果 了 。

例 子 中 fix_asset 欄 位 的 rowpos 是 10 和 colpos 是 2 。意 思 就 是 排 在 第 10 個 row 和 第 2 個 column,就 是 Form 裡 面 的 最 後 一 個 欄 位 。由 於 筆 者 把 每 一 個 欄 位 的 rowpos 和 colpos 都 設 定 好 ,所 以 就 會 像 圖 中 那 樣 。

為 了 讓 大 家 更 清 楚 jqGrid 有 多 強 大 ,能 節 省 你 多 少 程 式 碼 ,筆 者 把 fix_asset 的 formoptions 改 變 少 許 。

1
2
3
...
{name:'fix_asset', index:'fix_asset', formoptions:{label:'固 定 資 產 ',rowpos:1,colpos:3} },
...

rowpos 由 10 改 為 1,colpos 由 2 改 為 3。jqGrid 的 form 馬 上 作 出 相 應 的 變 化 了 ,如 果 整 張 form 是 自 己 寫 code 的 話 ,你 說 要 改 多 少 程 式 碼 呢 ?

rowpos colpos demo

formoptions 的 其 他 設 定 就 留 到 下 一 課 再 講 。接 著 我 們 就 看 另 一 個 重 點 formatter。

formatter 可 以 將 我 們 的 資 料 重 新 format 成 我 們 想 要 顯 示 的 模 樣 ,例 如 是 百 分 比 ,價 錢 ,日 期 格 式 之 類 的 。當 然 亦 可 以 自 定 格 式 。

1
2
3
...
{name:'price', index:'price', formatter:'currency'},
...

上 例 就 是 使 用 了 jqGrid 內 建 的 貨 幣 格 式 了 。內 建 格 式 都 沒 什 麼 難 以 理 解 的 ,筆 者 就 不 浪 費 時 間 了 。下 面 講 一 點 特 別 一 些 的 formatter 應 用 。

筆 者 不 太 喜 歡 把 圖 片 和 檔 案 放 到 資 料 庫 裡 面 。筆 者 比 較 喜 歡 用 index number 來 命 名 每 筆 資 料 相 關 的 圖 片 和 檔 案 。在 這 種 情 況 ,我 們 就 可 以 用 formatter 來 自 定 義 顯 示 圖 片 ,或 檔 案 下 載 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("#list").jqGrid({
url: 'data_json.php',
...
colModel :[
....
{name:'picture', index:'ind', formatter:displayPicture},
....
],
...
});

function displayPicture(cellvalue, options, rowObject){
return "<img src='picture/" + options.rowId + ".jpg' alt='' width='150' height='150' />";
}

上 例 中 我 們 在 formatter 使 用 了 一 條 自 定 義 的 函 數 displayPicture。由 於 資 料 庫 裡 面 並 沒 有 picture 欄 位 ,所 以 是 不 會 有 cellvalue 的 。但 由 於 我 們 只 需 要 index number 作 為 圖 片 的 檔 名 ,所 以 其 實 用 rowId 就 夠 了 。(例 子 中 假 設 所 有 圖 片 都 儲 存 在 picture 資 料 夾 裡 面 )

要 顯 示 一 條 下 載 檔 案 的 連 結 也 是 一 樣 。

1
2
3
function displayLink(cellvalue, options, rowObject){
return "<a href='invoice/" + options.rowId + ".pdf' target='_blank' >下 載 單 據 </a rel="noopener noreferrer">";
}

上 例 的 自 定 義 函 數 ,亦 是 用 了 rowId 來 成 為 檔 名 ,建 構 了 一 個 下 載 的 超 連 結 。

但 是 在 我 的 資 產 管 理 系 統 之 中 ,不 是 每 一 個 資 產 都 有 圖 片 和 單 據 ,那 怎 麼 辦 呢 ?很 可 惜 ,因 為 jqGrid 是 javascript 寫 出 來 的 ,所 以 不 太 可 能 直 接 檢 查 伺 服 器 上 面 某 個 檔 案 是 否 存 在 。聰 明 的 讀 者 一 定 想 到 了 ,前 台 不 能 做 ,當 然 是 交 還 給 後 台 伺 服 器 端 來 做 。

還 記 得 為 我 們 傳 回 資 料 的 data_json.php 麼 ?其 實 在 資 料 庫 傳 回 資 料 的 時 候 ,我 們 就 可 以 順 便 檢 查 檔 案 是 否 存 在 於 伺 服 器 上 面 了 。還 是 借 用 jqGrid 裡 面 的 php 例 子 。

1
2
3
4
5
6
7
8
9
10
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    $responce->rows[$i]=$row;
    $i++;
}
echo json_encode($responce);

假 如 我 們 要 在 傳 回 的 json 為 每 一 筆 資 料 增 加 一 個 自 定 的 欄 位 ,其 實 十 分 簡 單 。

1
2
3
4
5
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    $row['testing']=1;
    $responce->rows[$i]=$row;
    $i++;
}

這 樣 的 話 ,在 jqGrid 就 可 以 使 用 這 個 叫 testing 的 欄 位 了 ,而 它 的 值 都 會 是 1 。同 樣 地 ,我 們 可 以 檢 查 檔 案 存 在 與 否 ,並 且 傳 回 檢 查 結 果 。

1
2
3
4
5
6
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    if (file_exists('picture/'.$row['ind'].'.jpg')) {$row['picture']=1;} else {$row['picture']=0;}
    if (file_exists('invoice/'.$row['ind'].'.pdf')) {$row['invoice']=1;} else {$row['invoice']=0;}
    $responce->rows[$i]=$row;
    $i++;
}

檔 案 存 在 的 話 ,就 傳 回 1,沒 有 就 傳 回 0 。然 後 回 到 jqGrid,在 formatter 作 出 相 應 的 修 改 。

1
2
3
4
5
6
7
function displayPicture(cellvalue, options, rowObject){
if (cellvalue==1) {
return "<img src='picture/" + options.rowId + ".jpg' alt='' width='150' height='150' />";
} else {
return "no picture";
}
}

由 於 在 傳 回 資 料 前 額 外 加 入 了 picture 欄 位 ,於 是 cellvalue 終 於 有 數 值 了 。如 果 它 是 1,就 是 有 圖 片 ,可 以 顯 示 圖 片 給 使 用 者 。如 果 是 0 ,就 不 顯 示 圖 片 ,而 顯 示 no picture。

這 個 自 定 義 formatter 是 不 是 又 強 大 ,又 簡 單 呢 ?不 過 讀 者 千 萬 不 要 誤 會 ,以 為 formatter 只 能 在 form view 裡 面 運 用 。其 實 formatter 是 在 grid 裡 面 就 能 夠 使 用 的 ,它 的 格 式 ,是 在 grid 裡 面 和 form 裡 面 都 同 樣 地 會 被 顯 示 的 。

Form editing 的 View,也 和 search 一 樣 有 一 些 額 外 的 設 定 。

1
2
3
4
5
6
7
8
$("#list").jqGrid('navGrid','#pager',
{edit:false,add:false,del:false,search:false,view:true},
{},
{},
{},
{},
{closeOnEscape:true, labelswidth:'70px', viewPagerButtons:true, drag:true, resize:true}
);

同 樣 的 也 是 很 直 觀 ,viewPagerButtons 就 是 有 沒 有 上 一 個 ,下 一 個 按 鈕 。drag 和 resize 也 沒 什 麼 難 懂 的 。labelswidth 就 是 自 定 labels 的 欄 寬 。labelswidth 可 以 是 px 也 可 以 是 %,jqGrid 的 預 設 值 為 30%,其 實 也 頗 佔 位 的 。但 是 有 一 個 小 問 題 ,如 果 你 每 一 行 有 多 於 一 個 欄 位 的 ,它 只 能 指 定 第 一 欄 的 label 的 寬 度 。

labelswidth: 70px

這 時 候 我 們 可 以 改 在 beforeShowForm 的 時 候 ,替 所 有 的 class 為 CaptionTD 的 TD 加 上 width 為 70px 的 屬 性 。

1
2
3
4
5
6
7
8
9
10
$("#list").jqGrid('navGrid','#pager',
{edit:false,add:false,del:false,search:false,view:true},
{},
{},
{},
{},
{closeOnEscape:true, viewPagerButtons:true, drag:true, resize:true, beforeShowForm : function (eparams) {
  $('td.CaptionTD').attr('width','70px');
}}
);

為 指 定 的 TD 加 上 Width 屬 性

就 這 樣 ,兩 欄 的 label 都 設 定 成 70px 了 。

下 一 次 終 於 可 以 講 Form editting 的 Edit 了 。

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

This entry was posted in jqGrid and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply

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