很 多 時 候 ，我 們 都 會 在 grid 裡 面 加 一 些 按 鈕 （button），方 便 使 用 者 快 速 地 做 一 些 修 改 。這 一 回 ，筆 者 就 在 jqGrid 上 面 實 作 一 個 自 定 義 按 鈕 給 大 家 參 考 。
這 一 次 的 例 子 ，是 在 jqGrid 加 入 「上 移 」和 「下 移 」按 鈕 ，以 方 便 使 用 者 快 速 地 更 改 jqGrid 上 面 的 資 料 的 次 序 。
jqGrid custom button
為 了 實 現 使 用 者 自 由 更 改 次 序 的 目 的 ，所 以 筆 者 在 資 料 庫 增 加 了 顯 示 次 序 的 欄 位 （displayorder）。當 使 用 者 在 displayorder=4 的 那 一 行 資 料 按 「上 移 」時 ，該 行 資 料 的 displayorder 就 會 變 為 3，而 原 來 displayorder=3 的 那 一 行 資 料 ，其 displayorder 就 會 相 應 的 變 為 4。即 是 每 當 使 用 者 按 下 自 定 義 按 鈕 時 ，相 鄰 兩 行 資 料 的 displayorder 就 會 互 換 。
...
colModel :[
....
{name:'displayorder',index:'displayorder',width:30,search:false,editable:false,viewable:false,formatter:moveButton}
],
...
|
再 一 次 回 到 colModel，自 定 義 按 鈕 當 然 可 以 用 edittype:’button’，但 自 由 度 就 遠 遠 不 如 自 己 用 formatter 了 。這 一 次 我 們 用 一 條 自 定 義 function，moveButton。
function moveButton(cellvalue, options, rowObject){
return "<input class='movingup' type='button' name='" + cellvalue + "' value='上 移 ' />";
}
|
首 先 來 簡 單 一 點 的 ，只 加 一 個 button。我 們 為 button 加 了 一 個 class 叫 movingup，然 後 name 就 定 義 為 cellvalue，即 是 displayorder 的 值 。
有 「上 移 」，當 然 也 要 有 「下 移 」吧 。為 了 節 省 一 點 欄 寬 ，而 且 行 高 也 夠 位 ，所 以 就 用
做 一 個 分 行 分 開 兩 個 button。
function moveButton(cellvalue, options, rowObject){
return "<input type='button' value='上 移 ' class='movingup' name='" + cellvalue + "'><br><input type='button' value='下 移 ' class='movingdown' name='" + cellvalue + "'>";
}
|
「下 移 」的 name 同 樣 是 cellvalue，就 只 是 class 改 為 movingdown。
有 了 button 之 後 ，我 們 就 要 用 jquery 加 入 按 「按 鈕 」的 動 作 了 。
$("#list").delegate("input.movingup","click",function(){
var displayorder = $(this).attr('name');
$.ajax({
type:"post",
url:"movingposition.php",
data:{displayorder:displayorder,direction:'up'}
}).done(function(){
$("#list").jqGrid().trigger("reloadGrid");
});
});
|
我 們 用 delegate 方 法 ，為 jqGrid（#list）裡 面 的 所 有 class=movingup 的 input 的 click 事 件 ，加 入 一 條 function，去 實 行 我 們 的 動 作 。
然 後 我 們 就 用 ajax 方 法 ，把 變 數 傳 遞 到 movingposition.php。php 檔 就 會 取 得 變 數 （displayorder 和 direction），和 在 資 料 庫 做 相 應 的 變 動 （就 只 是 交 換 兩 筆 資 料 的 displayorder 而 已 ）。
當 ajax 完 成 之 後 ，callback function 就 會 對 jqGrid 進 行 一 次 reload，於 是 displayorder 的 變 動 就 會 馬 上 反 映 出 來 了 。
我 們 在 上 面 只 處 理 了 「上 移 」按 鈕 ，其 實 「下 移 」也 是 同 樣 的 。
$("#list").delegate("input.movingdown","click",function(){
var displayorder = $(this).attr('name');
$.ajax({
type:"post",
url:"movingposition.php",
data:{displayorder:displayorder,direction:'down'}
}).done(function(){
$("#list").jqGrid().trigger("reloadGrid");
});
});
|
我 們 再 增 加 一 個 delegate 方 法 ，但 這 次 的 對 象 是 input.movingdown。另 外 ，ajax 的 data 裡 面 的 direction 也 相 應 的 修 改 為 down。
輕 輕 鬆 鬆 的 ，我 們 就 做 好 了 我 們 的 custom button 了 。至 於 那 個 php，沒 什 麼 難 度 的 ，就 留 給 諸 君 自 由 發 揮 了 。
留言列表
工具 (3)
