jqGrid 實用技巧 (九) Pager 裡面的按鈕

Posted on October 22, 2012 by C.T. Leung

[anti-both]

之 前 講 了 很 多 課 ，都 是 圍 繞 colModel 的 。到 了 這 一 課 ，我 們 終 於 可 以 擺 脫 那 個 colModel，看 看 jqGrid 的 其 他 地 方 。這 一 課 我 會 講 解 幾 個 有 關 Pager 的 實 用 技 巧 。

jqGrid 的 Pager 裡 面 內 建 有 add、edit、view、del、search 等 幾 個 按 鈕 。每 一 個 按 鈕 對 應 相 關 的 Form Editing。設 定 的 方 式 如 下 ：

1
2
3
4
5
6
7
8
9
10

...
$("#list").jqGrid('navGrid','#pager',
　{edit:true,add:true,del:true,search:true, view:true},
　{}, //settings for edit
　{}, //settings for add
　{}, //settings for edit
　{}, //settings for search
　{}  //settings for view
);
...

在 網 頁 上 顯 示 出 來 的 ，就 會 是 如 下 的 樣 子 。

pager buttons

而 針 對 每 一 個 按 鈕 的 詳 細 設 定 ，其 實 就 是 針 對 每 一 個 Form Editing 的 詳 細 設 定 。例 如 Form 的 大 小 ，closeOnEscape，closeAfterEdit，reloadAfterSubmit 等 等 。但 這 些 設 定 都 很 悶 ，而 且 都 在 官 網 有 很 詳 細 的 解 釋 ，詳 細 可 以 參 考 jqGrid Wiki 的 Form Editing。

筆 者 今 次 介 紹 幾 個 好 玩 又 實 用 的 技 巧 。例 如 有 一 次 ，筆 者 遇 到 一 個 比 較 特 殊 的 情 況 ，在 同 一 個 Grid （或 者 應 該 說 Table）只 容 許 有 限 的 資 料 筆 數 ，那 究 竟 可 以 怎 麼 辦 呢 ？可 不 可 以 在 某 些 情 況 之 下 停 用 那 個 新 增 按 鈕 呢 ？答 案 當 然 是 可 以 的 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

...
$("#list").jqGrid(
url:'xxx_json.php',
datatype:'json',
...
...
loadComplete: function(ids) {
 if(jQuery("#list").jqGrid('getGridParam','records') > 10 ) {
  $("#add_list").addClass('ui-state-disabled');
 } else {
  $("#add_list").removeClass('ui-state-disabled');
 }
},
...
...
);
...

我 們 可 以 做 的 ，就 是 在 jqGrid 的 loadComplete 事 件 ，檢 查 一 下 Grid 的 records 數 量 ，如 果 大 於 某 個 數 ，我 們 就 停 用 新 增 按 鈕 。

上 例 中 ，我 們 首 先 檢 查 grid 的 records 是 否 大 於 10，如 果 是 的 話 ，就 為 id=add_list 的 這 個 按 鈕 加 入 ui-state-disabled 這 個 class。因 為 jqGrid 上 面 的 按 鈕 都 是 使 用 jquery ui 裡 面 的 按 鈕 的 ，所 以 超 簡 單 的 ，只 要 為 它 加 上 一 個 ui-state-disabled 的 class，就 可 以 將 按 鈕 停 用 了 。如 果 要 變 回 可 用 ，亦 只 是 要 移 除 ui-state-disabled 的 class 而 已 。

而 每 一 個 Pager 按 鈕 的 id，就 是 按 鈕 的 id 加 上 grid 的 id。例 如 上 面 的 grid 的 id 是 list，所 以 新 增 按 鈕 就 是 add_list。其 他 按 鈕 對 應 的 名 稱 就 是 edit_list，del_list 等 等 。

如 果 你 以 為 這 個 停 用 pager 按 鈕 的 技 巧 很 不 常 用 ，那 你 就 大 錯 特 錯 了 。資 料 庫 應 用 程 式 ，很 多 時 會 跟 據 每 一 筆 資 料 的 內 容 ，來 決 定 能 不 能 修 改 或 刪 除 的 。且 看 以 下 另 一 案 例 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

...
$("#list").jqGrid(
...
colModel :[
...
 {name:'status', index:'status', width:50, editable:false,edittype:'select',editoptions:{value:'0:not submitted;1:submitted;2:approved;3:paid'}, formatter:'select'},
...
],
...
multiselect: false,
onSelectRow: function(ids) {
 var rowStatus=$("#list").getCell(ids,'status');
  switch(rowStatus) {
   case '0':
    $("#edit_list").removeClass('ui-state-disabled');
    break;
   case '1':
    $("#edit_list").addClass('ui-state-disabled');
    break;
   case '2':
    $("#edit_list").addClass('ui-state-disabled');
    break;
   case '3':
    $("#edit_list").addClass('ui-state-disabled');
    break;
  }
},
...
);
...

在 上 例 中 ，是 一 個 Petty Cash Claim Form System，grid 裡 面 的 一 張 一 張 claim form。Status 欄 位 ，就 是 顯 示 該 張 claim form 究 竟 是 not submitted，submitted，approved 還 是 paid。由 於 claim form 由 submit 那 一 刻 起 就 不 容 許 使 用 者 再 修 改 了 ，所 以 就 有 上 面 的 例 子 。

我 們 在 onSelectRow 事 件 裡 面 （就 是 使 用 者 選 取 一 個 row 的 時 候 觸 發 ），我 們 先 把 status 欄 位 儲 存 到 rowStatus 變 數 ，再 按 那 個 rowStatus 的 值 來 決 定 究 竟 是 不 是 可 以 edit。因 為 每 一 個 row 的 status 都 不 盡 相 同 ，所 以 我 們 可 以 把 multiselect 設 定 為 false，這 樣 確 保 了 使 用 者 每 次 只 可 以 選 取 一 個 row。

個 人 覺 得 ，用 這 個 onSelectRow 就 停 用 edit 按 鈕 的 做 法 ，比 起 在 edit 按 鈕 的  beforeShowForm 才 檢 查 是 不 是 可 以 修 改 ，實 在 是 省 時 快 捷 得 多 。

想 當 然 的 ，在 你 也 可 以 在 子 母 資 料 表 ，用 這 個 onSelectRow 事 件 來 決 定 子 表 單 的 add / edit botton 情 況 啦 。子 母 資 料 表 的 例 子 ，沒 有 比 在 jqGrid Demos 裡 面 的 Master Detail 例 子 更 簡 單 明 瞭 的 了 。

假 如 我 們 的 子 資 料 表 的 grid 叫 做 list_detail，那 它 們 相 應 的 id 就 是 add_list_detail，edit_list_detail 和 del_list_detail。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

...
$("#list").jqGrid(
...
onSelectRow: function(ids) {
 var rowStatus=$("#list").getCell(ids,'status');
  switch(rowStatus) {
   case '0':
    $("#edit_list").removeClass('ui-state-disabled');
    $("#add_list_detail").removeClass('ui-state-disabled');
    $("#edit_list_detail").removeClass('ui-state-disabled');
    $("#del_list_detail").removeClass('ui-state-disabled');
    break;
   case '1':
    $("#edit_list").addClass('ui-state-disabled');
    $("#add_list_detail").addClass('ui-state-disabled');
    $("#edit_list_detail").addClass('ui-state-disabled');
    $("#del_list_detail").addClass('ui-state-disabled');
    break;
   case '2':
    $("#edit_list").addClass('ui-state-disabled');
    $("#add_list_detail").addClass('ui-state-disabled');
    $("#edit_list_detail").addClass('ui-state-disabled');
    $("#del_list_detail").addClass('ui-state-disabled');
    break;
   case '3':
    $("#edit_list").addClass('ui-state-disabled');
    $("#add_list_detail").addClass('ui-state-disabled');
    $("#edit_list_detail").addClass('ui-state-disabled');
    $("#del_list_detail").addClass('ui-state-disabled');
    break;
  }
},
...
);
...
...
$("#list_detail").jqGrid(
...
...
);
...

在 上 例 中 ，我 們 仍 然 是 按 照 每 一 個 row 的 status 欄 位 的 值 ，來 決 定 master grid 和 detail grid 裡 面 的 按 鈕 的 使 用 情 況 。

Master Detail Pager Button

Master Detail Pager Button 2

最 後 ，在 Pager 裡 面 ，我 們 也 可 以 加 入 我 們 的 自 定 義 按 鈕 的 。語 法 是 ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$("#list").jqGrid('navGrid','#pager',
 {edit:true,add:true,del:true,search:true, view:true},
 {},
 {},
 {},
 {},
 {}
)
.navSeparatorAdd("#pager")
.jqGrid('navButtonAdd',"#pager",{
 caption:"XLS",
 buttonicon:"ui-icon-newwin",
 onClickButton:printExcel,
 position: "last",
 title:"Export this form to Excel",
 cursor: "pointer"
});

navSeparatorAdd 是 按 鈕 之 間 的 分 隔 線 ，善 用 分 隔 線 可 以 把 不 同 的 自 定 義 按 鈕 分 隔 成 一 組 一 組 的 。

navButtonAdd 就 是 增 加 自 定 義 按 鈕 ，裡 面 可 以 設 定 caption，icon 之 類 的 東 西 。裡 面 最 重 要 的 是 onClickButton，在 這 裡 你 可 以 指 定 一 條 function，那 就 是 你 這 個 自 定 義 按 鈕 真 正 要 做 的 事 情 。

custom button

在 上 例 中 ，筆 者 加 入 了 一 個 export to excel 按 鈕 ，並 且 指 向 了 自 定 義 函 數 printExcel。

1
2
3
4
5
6
7
8

function printExcel() {
  var id = $("#list").jqGrid('getGridParam','selrow');
  if (id) {
    window.open('export_to_excel.php?formid=' + id);
  } else {
    alert('Please select row first');
  }
}

在 printExcel function 裡 面 ，我 們 先 最 得 使 用 者 選 擇 的 row，再 把 form id 傳 送 到 php 檔 ，然 後 server 再 傳 回 我 們 要 求 的 excel 檔 案 。

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

Related Posts:

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

2 Responses to jqGrid 實用技巧 (九) Pager 裡面的按鈕

  1. tony says:
    June 29, 2013 at 2:08 pm

    請教一個問題, 因為pager太小, 想把所有功能(如:新增.刪除.修改.存檔.取消.上下筆.上下頁…)另外用一排button取代, 但是不曉得要如何設動作…..
    請賜教
    謝謝!!!

    Reply
    • C.T. Leung says:
      June 30, 2013 at 12:15 pm

      這個部分其實你是要找到相關的 method，以 form editing 為例。

      add new: jQuery(“#grid_id”).jqGrid(‘editGridRow’, “new”, properties );

      找到了 method 就可以自己加到 button 的 click 事件。

      1
2
3

      $("#button_add").click(function(){
   $("#grid_id").jqGrid('editGridRow', "new", {resize:flase} );
});

      edit grid row: jQuery(“#grid_id”).jqGrid(‘editGridRow’, rowid, properties );

      而 edit row 的話，你就要找到 selected row id。

      1
2
3
4

      $("#button_edit").click(function(){
   rowid = $("#grid_id").jqGrid ('getGridParam', 'selrow'),;
   $("#grid_id").jqGrid('editGridRow', rowid, {resize:flase} );
});

      不過當然，你也要檢驗一下 selected row id，例如沒有 selected row 時要如何處理。用 pager 的話當然就不用煩這些事情了。

      翻頁的話就比較麻煩了，jqgrid 本身沒有這一個 method。

      首先我們要找到 current page。
      $(‘#grid_id’).getGridParam(‘page’);
      然後再自己設定 jqgrid 的 page。
      $(‘#grid_id’).setGridParam({page:123});
      然後再 reload 一次。
      $(‘#grid_id’).trigger(“reloadGrid”);

      1
2
3
4
5
6

      $("#button_next_page").click(function(){
   pageno = $('#grid_id').getGridParam('page');
   pageno = pageno + 1 ;
   $('#grid_id').setGridParam({page:pageno});
   $('#grid_id').trigger("reloadGrid");
});

      不過當然 (又來?!)，你自己也需要驗證一下 pageno 是不是零或者大於最後一頁之類的。用 pager 就當然不用煩這些了。

      Reply

Leave a Reply

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