jqGrid 實用技巧 (十三) Css 及 Custom Scrollbar

[anti-both]

為 了 切 合 不 同 客 戶 的 不 同 設 計 風 格 ,我 們 一 般 都 比 較 少 使 用 預 設 值 。jqGrid 的 外 觀 ,都 是 根 據 jquery ui 的 theme 的 ,所 以 風 格 很 容 易 和 網 頁 統 一 。但 是 還 有 部 分 外 觀 上 的 設 定 是 不 夠 完 善 的 ,這 時 候 我 們 就 要 自 己 去 修 改 jqGrid 的 css 了 。

要 修 改 css,就 有 必 要 理 解 一 下 jqGrid 的 結 構 。在 我 們 的 html 檔 裡 面 ,原 來 jqGrid 就 是 一 個 <table id=list3></table>,那 個 id list3 就 是 我 們 jqGrid 的 id。

在 jqGrid 運 行 的 時 候 ,就 會 將 那 個 table 轉 化 為 下 面 的 樣 子 。

jqGrid 的 結 構

在 最 外 面 ,就 是 整 個 jqGrid,就 是 一 個 <div id=gbox_list3 … >。然 後 我 們 看 得 見 的 部 分 ,就 包 括 在 一 個 <div id=gview_list3 … > 裡 面 。

gview_list3 裡 面 就 有 三 大 部 分 ,分 別 是 title bar,header,和 data 。Title bar 就 是 一 個 <div class=ui-jqgrid-titlbar … >。Header 就 是 一 個 <div class=ui-jqgrid-hidv … >。Data 就 是 一 個 <div class=ui-jqgrid-bdiv … >。

在 data div 裡 面 ,包 含 了 本 來 的 <table id=list3 …. >,裡 面 就 是 jgGrid 裡 面 的 資 料 行 。

如 果 我 們 單 純 的 用 #list3 作 為 css 又 或 者 jquery 的 selector ,那 麼 我 們 肯 定 選 取 不 到 title bar 或 者 header。所 以 這 個 結 構 要 好 好 留 心 一 下 。

舉 個 最 簡 單 的 例 子 ,例 如 你 不 想 顯 示 header。jqGrid 裡 面 沒 有 這 個 選 項 ,我 們 就 要 自 己 動 手 了 。

1
$('#list3 .ui-jqgrid-hdiv').hide();

如 果 你 想 當 然 的 用 #list3 作 為 selector ,那 當 然 會 沒 反 應 ,因 為 header 在 list3 的 外 頭 啊 。

1
2
3
$('#gbox_list3 .ui-jqgrid-hdiv').hide();
   or
$('#gview_list3 .ui-jqgrid-hdiv').hide();

我 們 要 用 回 最 外 面 #gbox_list3 又 或 者 #gview_list3 做 為 selector 才 可 。( 因 為 header 本 身 沒 有 id,所 以 要 用 它 的 class 來 選 取 )

現 在 大 家 也 有 了 一 點 基 本 認 識 ,就 可 以 回 到 本 文 的 主 題 Custom Scrollbar 了 。

其 實 Scrollbar 這 個 東 西 ,都 是 瀏 覽 器 內 建 的 ,並 不 是 一 個 獨 立 的 tag,不 可 以 自 己 改 css。那 別 人 的 custom scrollbar 是 如 何 做 的 呢 ?其 實 就 是 把 一 個 container 縮 小 ,再 把 overflow 設 定 為 hidden ( 這 樣 就 不 會 顯 示 內 建 的 scroll bar 了 ),然 後 就 自 己 畫 兩 條 scrollbar,再 用 script 為 scroll bar 的 不 同 event ( mousedown, mousemove, mouseup 之 類 ) 加 上 相 應 的 捲 動 功 能 。

在 現 今 的 速 食 社 會 ,要 你 只 為 了 改 一 改 jqGrid scrollbar 的 外 觀 而 自 己 寫 個 jquery plugin 很 不 人 道 。所 以 筆 者 建 議 大 家 出 去 找 一 些 能 用 的 scrollbar plugin 就 可 以 了 。

筆 者 今 次 示 範 用 的 ,是 HyeonJe Jun 所 寫 的 perfect-scrollbar plugin。這 個 plugin 非 常 精 簡 ,非 常 易 用 。

首 先 ,還 是 要 引 用 所 需 要 引 用 的 檔 案 。

1
2
3
<link rel="stylesheet" type="text/css" href="perfect-scrollbar.min.css" />
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="perfect-scrollbar.js"></script>

然 後 ,找 一 個 想 要 自 定 scrollbar 的 物 件 ,例 如 一 個 div 吧 。 (container 必 須 要 是 一 個 tag)。

1
<div id="Demo"></div>

再 執 行 下 列 程 式 碼 。

1
$('#Demo').perfectScrollbar();

跟 你 用 開 的 jquery plugin 沒 什 麼 分 別 吧 ?十 足 的 簡 單 便 捷 。執 行 好 之 後 會 如 何 呢 ?

perfect scrollbar 結 構

它 會 把 本 來 的 <div id=Demo> 變 為 container ( 加 了 一 個 .ps-container 的 class ),然 後 在 裡 面 會 另 外 有 三 個 div。分 別 是 .content,會 裝 有 你 原 來 的 div 裡 面 的 東 西 。還 有 .ps-scrollbar-x 和 .ps-scrollbar-y,就 是 新 畫 出 來 的 兩 條 scrollbar 了 。要 記 得 這 三 個 div 都 是 沒 有 id 的 ,選 取 的 時 候 要 用 class 來 選 取 ,又 或 者 nth-child 之 類 的 方 式 。

回 到 我 們 的 jqGrid,究 竟 要 用 那 一 個 div 作 為 container 呢 ?用 回 一 開 頭 的 那 個 例 子 ,我 們 知 道 資 料 行 是 在 <table id=list3 …. > 裡 面 ,所 以 我 們 可 以 用 外 面 的 div .ui-jqgrid-bdiv 作 為 contianer。

1
$('#gview_list3 div.ui-jqgrid-bdiv').perfectScrollbar();

selector ?的 意 思 就 是 在 id=gview_list3 裡 面 找 一 個 class=ui-jqgrid-bdiv 的 div。當 然 這 是 不 夠 的 ,我 們 還 要 相 應 的 做 一 點 微 調 。jqGrid 的 height 要 改 為 auto,而 原 來 的 height ,要 設 定 為 ui-jqgrid-bdiv 的 height。為 免 瀏 覽 器 built-in 的 scrollbar,我 們 也 要 把 ui-jqgrid-bdiv 的 overflow 設 定 為 hidden。最 後 ,執 行 perfectScrollbar 方 法 的 時 間 也 有 講 究 ,最 好 在 jqGrid 的 loadComplete 事 件 裡 面 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[Example 2]
jQuery("#list3").jqGrid({
...
height: 'auto',
width: 700,
...
...
resizeStop: function(width, index) {
 $('#gview_list3 .ui-jqgrid-bdiv div:first-child').css('width',$('#list5').css('width'));
 $('#gview_list3 .ui-jqgrid-bdiv').perfectScrollbar('update');
},
loadComplete: function(data) {
 $('#gview_list3 div.ui-jqgrid-bdiv').css( {
  "height":"100px",
  "overflow":"hidden"
 });
 $('#gview_list3 div.ui-jqgrid-bdiv').perfectScrollbar();
}
});

另 外 ,在 你 resize 完 column width 之 後 ,資 料 行 的 整 體 寬 度 改 變 了 ,這 時 候 就 有 可 能 要 顯 示 或 者 取 消 horizontal scrollbar 了 (在 我 範 例 中 一 開 始 是 沒 有 horizontal scrollbar 的 )。所 以 ,每 次 resize 完 之 後 都 要 重 新 指 定 content DIV 的 寬 度 ,在 上 例 中 我 用 了 first-child 來 尋 找 content DIV。最 後 還 要 update 一 次 perfect scrollbar。〔Example 2〕

Example 2

perfect scrollbar 預 設 的 樣 式 ,和 那 個 要 mouse hover 才 顯 示 出 來 的 方 式 也 不 是 人 人 喜 歡 。但 因 為 perfect scrollbar 就 是 自 己 畫 出 來 的 div,所 以 我 們 就 可 以 用 修 改 css 的 方 法 來 改 變 它 的 外 觀 了 。

在 〔Example 3〕裡 面 ,筆 者 為 jqGrid 加 入 了 shrinkToFit 和 ForceFit 參 數 ,確 保 jqGrid ?的 寬 度 是 固 定 的 ,於 是 ,使 用 者 resize column 的 時 候 ,也 不 會 出 現 horizontal scrollbar 了 。然 後 筆 者 又 修 改 了 perfect scrollbar 的 css ,最 後 在 contianer DIV 加 了 一 個 scrollbar ?的 底 圖 ,於 是 perfect scrollbar 就 變 成 了 一 條 固 定 的 scrollbar 的 樣 子 。

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
jQuery("#list3").jqGrid({
    ....
    height: 'auto',
    width: 685,
    ....
    forceFit: true,
    shrinkToFit: true,
    ....
    loadComplete: function(data) {
     $('#gview_list3 div.ui-jqgrid-bdiv').css( {
      "height":"100px",
      "width":"700px",
      "overflow":"hidden",
      "background-image":"url('scrollbar-bg2.gif')",
      "background-repeat":"repeat-y",
      "background-position":"right top"
     });
     $('#gview_list3 div.ui-jqgrid-bdiv').perfectScrollbar();
     $('#gview_list3 div.ps-scrollbar-y').css({
      "position":"absolute",
      "right":"3px",
      "width":"6px",
      "background-color":"#666",
      "border-radius":"0px",
      "-webkit-border-radius":"0px",
      "-moz-border-radius":"0px",
      "opacity":"0.9",
      "filter":"alpha(opacity = 90)"
     });
    }
   });

在 上 例 中 ,因 為 筆 者 想 把 scrollbar 固 定 在 資 料 行 的 外 面 ,所 以 把 jqGrid 的 width 減 少 了 15px ( width: 685 ),再 在 container DIV 設 定 寬 度 為 700px。

Example 3

這 次 因 為 可 能 有 點 複 雜 ,所 以 筆 者 把 上 面 的 例 子 實 作 了 出 來 ,給 諸 君 參 考 。

https://www.misterngan.com/jqgridexample/scrollbar.html

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

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

3 Responses to jqGrid 實用技巧 (十三) Css 及 Custom Scrollbar

  1. yummy says:

    您好:想請教一下,jqGrid要如果在空白的table上畫上格線呢,也就是不管有沒有資料都顯示格線,謝謝

    • C.T. Leung says:

      你個 jqGrid 有無 row data 先?我印象中只要有 row data ( 即使 row data 每一個 cells 都是 blank ),它也會顯示格線呀。但如果你根本無 row data,咁就當然係乜都唔會顯示啦。

      所謂 jqGrid 的 gridlines,其實只是 table cell ( td ) 的 border。所以如果無 row data,jqGrid 裡面根本無對應的 tr 和 td,那怎麼會顯示 border 呢?

      假如你真係無任何 row data,就必須自己插幾行空白的 ( addRowData )。

      你可以參考下別人的例子 ( 它是固定 rowNum 再補齊空白行的,合大多數人用,你唔係咁用就自己想想怎麼改吧 ):
      http://stackoverflow.com/questions/10206046/how-to-add-empty-rows-to-the-jqgrid

Leave a Reply

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