jqGrid與Struts2的結合應用（六） —— 使用colModel設定查詢功能

上一篇主要講述了，如何結合Action類進行查詢，以及查詢的幾種主要方式。

在searchGrid方法中，我們傳入的options選項，定義了查詢所需要的通用屬性。舉個例子來說吧，當點擊查詢按鈕的時候，彈出的查詢對話方塊裡包含Grid中的各個列作為可選的查詢條件，而比較方式也統統都是等於、不等於、小於、小於等於、大於、大於等於、開始於、不開始於等等。

假如我們並不希望使用者使用這麼多的查詢條件，或者某列是文本形式的、根本不可能出現大於小於之類的問題的時候，如何針對不同的列，定義這些條件的構成方式呢？

我們可以使用colModel的options屬性，來覆蓋searchGrid的options屬性中的某些設定，從而為不同的列設定不同的查詢樣式。

在本系列的第一篇，曾經介紹了colModel的一些常見options選項，下面來介紹一下colModel與查詢相關的三個選項：

• search
  
  ：決定該列是否被列作查詢條件，預設為true。
• stype
  
  ：決定該列的輸入方式；text：建立一個輸入框；select：建立一個select下拉式清單。
• searchoptions
  
  ：對於查詢的特定選項；應注意區分，此options選項不同於searchGrid方法的options選項。

下面來介紹searchoptions選項的各個屬性（具體參考官方文檔 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:singe_searching
）：

• dataUrl
  
  ：這個屬性只在colModel的stype屬性為“select”的時候才有效；此選項表示從何處載入select元素；當設定了此屬性的時候，jqGrid將會使用ajax請求得到有效select HTML，來填充select下拉式功能表的位置。例如<select><option value=“1”>One</option> <option value=“2”>Two</option></select>；這一過程僅執行一次。
• buildSelect
  
  ：此屬性僅當dataUrl被設定的情況下有效；當從Server中無法得到構建好的有效select HTML元素的時候，可以使用自訂的這個方法，產生完整有效select HTML元素；此方法的參數即是Server的response。
• dataInit
  
  ：如果設定此選項，則此選項對應的方法會在建立HTML元素的時候，執行一次；對於制定的方法，HTML元素會被當做參數傳遞進去。
• attr
  
  ：此選項的值是一個object，用來在建立HTML元素的時候，設定這個元素的合法屬性。
• searchhidden
  
  ：預設情況下，Grid表格中隱藏的列是不會被列出查詢條件的；如果仍需要將隱藏的某列，列為查詢條件，則將該列的searchhidden選項設為true。
• sopt
  
  ：類似於searchGrid方法的sopt選項（詳見上一篇文章），用於指定條件比較的方式。如果不設定，則預設使用所有方式，即：['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']。
• defaultValue
  
  ：查詢輸入框中的預設值。

對於這些選項來說，之前的例子似乎簡單了一些。為了示範這些選項，我使用一個新的例子，具體的伺服器端代碼就不貼了（和之前的例子在伺服器端大同小異），主要看看用戶端方面的變化。

javascript代碼：

$(function(){<br />$("#gridTable").jqGrid({<br />url: "listPatentCases.action",<br />datatype: "json",<br />height: 350,<br />width: 700,<br />colModel: [<br />{name:"id",index:"id",label:"編號",width:60, sorttype:"int",sortable:false,<br />searchoptions:{<br />sopt:["eq","ne","lt","le","gt","ge"]// (1)調整比較方式<br />}<br />},<br />{name:"internalNo",index:"internalNo",label:"內部編碼",width:120,searchoptions:{sopt:["eq","ne","bw","bn","ew","en","cn","nc"]},sortable:false},<br />{name:"name",index:"name",label:"名稱",width:120,searchoptions:{sopt:["eq","ne","bw","bn","ew","en","cn","nc"]},sortable:false},<br />{name:"applicationNo",index:"applicationNo",label:"申請號",width:90,searchoptions:{sopt:["eq","ne","bw","bn","ew","en","cn","nc"]},sortable:false},<br />{name:"patentCaseType.caption",index:"patentCaseType",label:"類型",width:60,sortable:false,<br />searchoptions:{<br />sopt:["eq","ne"],<br />stype:"select", // (2)<br />dataUrl:"./js/patentCaseTypeSelect.html"// (3)向Server請求select元素，並載入到查詢對話方塊中<br />}<br />},<br />{name:"patentCaseType._name",index:"patentCaseType_name",label:"類型編碼",width:80,hidden:true,search:false,sortable:false},<br />{name:"appliedDate",index:"appliedDate",label:"申請日期",width:100, formatter:"date",sortable:false,<br />searchoptions:{<br />sopt:["eq","ne","lt","le","gt","ge"],<br />dataInit: function (elem) {// (4)輸入框元素將被作為參數傳入方法函數中<br />$(elem).datepicker();// (5)將輸入框設定為日期選擇框<br />}<br />}<br />},<br />{name:"createdDate",index:"createdDate",label:"建立日期",width:100, formatter:"date",sortable:false,searchoptions:{sopt:["eq","ne","lt","le","gt","ge"],dataInit:function (elem) {<br />$(elem).datepicker();<br />}}},<br />{name:"firstApplicant.id",index:"firstApplicant_id",label:"第一申請人ID",width:80,sortable:false,hidden:true,<br />searchoptions:{<br />sopt:["eq","ne"],<br />searchhidden:true// (6)設定此隱藏列也可作為查詢條件<br />}<br />},<br />{name:"firstApplicant.fullName",index:"firstApplicant",label:"第一申請人",width:80,sortable:false,<br />search:false// (7)設定此列不能作為查詢條件<br />},<br />{name:"firstInventor.id",index:"firstInventor_id",label:"第一發明人ID",width:80,searchoptions:{sopt:["eq","ne"],searchhidden:true},sortable:false,hidden:true},<br />{name:"firstInventor.fullName",index:"firstInventor",label:"第一發明人",width:80,search:false,sortable:false},<br />{name:"firstContact.id",index:"firstContact_id",label:"第一連絡人ID",width:80,searchoptions:{sopt:["eq","ne"],searchhidden:true},sortable:false,hidden:true},<br />{name:"firstContact.fullName",index:"firstContact",label:"第一連絡人",width:80,search:false,sortable:false},<br />{name:"firstAttorney.id",index:"firstAttorney_id",label:"第一代理人ID",width:80,searchoptions:{sopt:["eq","ne"],searchhidden:true},sortable:false,hidden:true},<br />{name:"firstAttorney.fullName",index:"firstAttorney",label:"第一代理人",width:80,search:false,sortable:false}<br />],<br />sortname: "id",<br />sortorder: "desc",<br />viewrecords: true,<br />rowNum: 15,<br />rowList: [15,50,100],<br />prmNames: {search: "search"},<br />jsonReader: {<br />root:"gridModel",<br />records: "record",<br />repeatitems : false<br />},<br />pager: "#gridPager",<br />caption: "案例列表",<br />hidegrid: false,<br />shrinkToFit: false</p><p>}).navGrid("#gridPager",{<br />edit: false,<br />add: false,<br />del: false<br />});<br />});

 

說明：
(1)處調整了比較方式，只保留了等於、不等、小於、小於等於、大於、大於等於六種。

(4)(5)這是dataInit選項的典型應用，即在查詢對話方塊初始化的時候，調用函數。這也是官方文檔中用到的例子。在查詢對話方塊中構建日期選擇欄的絕佳方式。

(6)設定該隱藏列也可作為查詢條件。

(7)設定該列不能作為查詢條件。

(2)(3)當stype為true的時候，dataUrl的設定才會有效。jqGrid會按照dataUrl中的地址向Server發送請求，獲得包含完整有效select元素的response。

註：這應該是一個ajax請求，而datatype是html。如果在頁面上曾經使用$.ajaxSetup設定過dataType為其他格式的話，這裡就很可能會出錯了。應該格外小心。

 

dataUrl中的地址的完整內容：

<select><br /><option value='1'>發明</option><br /><option value='2'>外觀設計</option><br /><option value='3'>實用新型</option><br /></select>

 

 

 

 

通過上面的這些例子，可以看出colModel選項可以控制查詢對話方塊中各個條件與列的關係，以及各種條件在對話方塊中的性狀。

 

 

對查詢部分簡單小結一下，針對查詢的設定有三個入口：

• navGrid方法中的prmSearch參數；
• searchGrid方法的options選項；
• colModel中的stype和searchoptions選項；

使用的時候需要仔細分析辨認，具體內容可以參考官方文檔。