gird 新增 remoteFilter，進行資料塞選

[smlsunxie]

關鍵字： remoteFilter

若要讓 grid 支援 Filter 功能步驟如下：

前端調整

1. 在 grid 新增 process config，新增 config = Utilities.createFiltersFeature(config);，將會根據 gird 之 columns 設定 filter

2. grid column 是否用正確的 xtype 會影響 filter 的呈現，目前主要的對應：

   • gridcolumn 或者沒有設定 (預設): string
   • numbercolumn: number
   • datecolumn: date

   請檢查 grid 是否有正確設定欄位型態，其中 id 請設為 numbercolumn

   controller 調整，以 itemController 為例

    def index(Integer max) {
        def list = Item.createCriteria().list(params,params.criteria)

        render (contentType: 'application/json') {
            [itemInstanceList: list, itemInstanceTotal: list.totalCount]
        }     
    }

目前是 grid 搭配 filter 加上分頁，所以必須使用 createCriteria，他會多處理一個 properties 為 totalCount，作為分頁情況下的總筆數，如果是原本的作法 [itemInstanceList: Item.list(params), itemInstanceTotal: Item.count()] 無法處理。

其中 params.criteria 處理在 ExtJSFilters.groovy 將會解析由前端傳入的 filter 參數，因此所有 controller 不需重覆定義，直接從 params 取用即可。

查詢前端傳入的 filter json 範例

[
    {
        "type": "string",
        "value": "222",
        "field": "name"
    },
    {
        "type": "numeric",
        "comparison": "lt",
        "value": 1,
        "field": "dueDays"
    },
    {
        "type": "numeric",
        "comparison": "gt",
        "value": 1,
        "field": "dueDays"
    },
    {
        "type": "date",
        "comparison": "lt",
        "value": "10/02/2013",
        "field": "effectEndDate"
    },
    {
        "type": "date",
        "comparison": "gt",
        "value": "10/16/2013",
        "field": "effectEndDate"
    },
    {
        "type": "date",
        "comparison": "eq",
        "value": "10/23/2013",
        "field": "effectEndDate"
    }
]

操作畫面

1. 文字

1. 數值

1. 日期

參考資料

• Grails: Dynamically building criteria queries
• Extjs: FiltersFeature