jqGrid 實用技巧 (十二) 自己加個 Search Box

有 些 時 候 ,grid 裡 面 會 有 大 量 資 料 ,要 如 何 讓 使 用 者 快 速 搜 尋 出 所 需 要 的 資 料 ,的 確 費 煞 思 量 。例 如 你 的 grid 有 五 六 個 可 以 搜 尋 的 欄 位 ,然 後 你 在 form search 裡 設 定 了 multiple search,然 後 你 的 使 用 者 每 次 搜 尋 還 是 要 逐 一 選 擇 欄 位 ,再 逐 一 輸 入 條 件 ,真 是 談 不 上 方 便 。

jqGrid Advance Search

特 別 是 對 於 某 些 使 用 者 ,要 選 這 選 那 ,又 要 搞 清 楚 And / Or,又 或 者 equal / not equal / contain 這 一 類 東 西 ,真 是 苦 不 堪 言 。其 實 jqgrid 那 個 multiple search 比 較 適 合 於 精 確 搜 尋 。而 對 於 大 部 分 的 一 般 使 用 ,其 實 一 個 最 簡 單 的 Search Box 加 上 一 點 比 較 模 糊 ,類 似 於 全 文 檢 索 的 搜 尋 功 能 已 經 很 足 夠 。

Search Box

筆 記 今 次 就 為 大 家 介 紹 一 個 最 簡 單 的 Search Box 範 例 吧 。

Search Box,眾 所 周 知 ,就 是 一 張 Form 加 一 個 Text Input 再 加 一 個 Submit Button。

<form id="search-form" action=""> 
 <input id="searchbar" type="text" name="search" />  
 <input id="searchbtn" type="submit" value="" />
</form>

然 後 回 到 我 們 的 jqGrid。

...
$("#list").jqGrid({
...
colNames:['編 號 ','參 加 者 號 碼 ','姓 名 ','聯 絡 電 話 ','身 份 證 號 碼 ','抽 獎 時 間 '],
colModel :[
{name:'id', index:'id', hidden:true, search:false, editable:false },
{name:'appid', index:'appid', search:false, editable:false },
{name:'name', index:'name', search:false, editable:false },
{name:'tel', index:'tel', search:false, editable:false },
{name:'idcard', index:'idcard', search:false, editable:false },
{name:'timestamp', index:'timestamp', search:false, editable:false}
],
...

在 我 的 資 料 庫 裡 面 有 六 個 欄 位 ,雖 說 想 做 一 個 類 似 於 全 文 檢 索 的 功 能 ,但 還 是 有 些 欄 位 是 完 全 無 需 要 搜 尋 的 。例 如 是 id,這 是 系 統 自 己 生 成 的 autoincrement,是 供 內 部 使 用 的 ;另 外 ,那 個 timestamp 也 是 不 用 搜 尋 的 。

我 們 知 道 ,在 jqGrid 使 用 Single Search 的 時 候 ,jqGrid 會 在 postData 加 入 幾 個 參 數 ,然 後 傳 遞 到 jqGrid 的 url 參 數 的 地 址 。這 幾 個 參 數 包 括 _search、searchString、searchOper 和 SearchField,我 們 就 可 以 借 用 這 幾 個 參 數 來 向 後 台 傳 遞 我 們 的 要 求 。

_search 是 true 就 是 搜 尋 。searchString 就 是 使 用 者 輸 入 的 條 件 ,searchOper 就 是 比 對 的 條 件 ,searchField 就 是 搜 尋 那 一 個 欄 位 。

例 如 我 把 searchField 的 值 自 定 為 allfieldsearch,就 等 於 是 要 做 我 的 全 文 檢 索 。這 個 searchField 本 來 是 記 載 搜 尋 那 一 個 欄 位 的 ,我 們 自 定 一 個 值 的 時 候 ,當 然 要 避 免 和 原 來 的 欄 位 名 稱 相 同 。不 然 就 有 可 能 影 響 到 你 的 jqGrid 的 其 他 運 作 。

於 是 ,我 們 在 search-form 的 submit 事 件 ,加 入 所 要 的 功 能 。

...
$("#search-form").submit(function() {
 var searchFiler = $("#searchbar").val(), grid = $("#list");
 if (searchFiler.length === 0) {
  grid[0].p.search = false;
  $.extend(grid[0].p.postData,{searchString:"",searchField:"",searchOper:""});
 } else {
  grid[0].p.search = true;
  $.extend(grid[0].p.postData,{searchString:searchFiler,searchField:"allfieldsearch",searchOper:"cn"});
 }
 grid.trigger("reloadGrid",[{page:1,current:true}]);
 return false;
});
...

上 例 中 ,我 們 取 回 searchbar 的 輸 入 資 料 ,再 合 併 入 grid 的 postData,然 後 就 reload 一 次 Grid。如 果 使 用 者 輸 入 空 白 資 料 ,我 們 也 要 在 postData 清 除 Search 資 料 ,再 reload 一 次 ,令 grid 顯 示 回 全 部 資 料 。

然 後 是 後 台 的 部 分 。

<?php
...
$condition=1; //all records
...
$searchField=$_GET['searchField'];
$searchString=$_GET['searchString'];
...
if ($searchField=='allfieldsearch') {
 $condition = " appid like '%$searchString%' or name like '%$searchString%' or tel like '%$searchString%' or idcard like '%$searchString%' ";
}
...
$SQL = "SELECT * FROM luckydraw WHERE $condition ORDER BY $sidx $sord LIMIT $start , $limit";
...

上 例 的 condition,就 是 appid,name,tel,idcard 四 個 欄 位 ,隨 便 一 個 符 合 (like)使 用 者 輸 入 的 條 件 ,都 會 被 檢 索 出 來 。

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 *

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>