有 些 時 候 ，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）使 用 者 輸 入 的 條 件 ，都 會 被 檢 索 出 來 。
留言列表
工具 (3)
