1. 程式人生 > 其它 >EXTJS4 Grid Filter 外掛的使用 與後臺資料解析------Extjs 查詢篩選功能的實現

EXTJS4 Grid Filter 外掛的使用 與後臺資料解析------Extjs 查詢篩選功能的實現

  先汗一個,一個小功能又踢騰了一天。本來這個帶Demo的,但是上面介紹的不是很詳細。用的時候問題不大,主要問題在檔案匯入方面.以為這個外掛的使用和其他的不一樣。

1.首先是需要引入檔案的位置:如圖

需要把整個grid都考到vs下,vs中結構如下:

2.設定路徑,將檔案匯入

Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '../ext-js4.2/ux');
Ext.require([
'*',
'Ext.toolbar.Paging',
 'Ext.ux.grid.FiltersFeature',//必不可少的
'Scripts.*'
])

3.組織外掛配置,這裡你也可以將它組織成類

var filters = {
        alias: 'widget.filters',
        ftype: 'filters',

        encode: false, // json encode the filter query


        //指定要對哪些列進行過濾
        filters: [{
            type: 'boolean',
            dataIndex: 'IsSuccessed'
        }]
    };

這裡的filter的type有string,boolean,numeric,date,還有list。前四個很容易理解,第五個類似enum,就是列可供選擇的常量值。

4.將外掛放入gridpanel

features: [filters],

5.怎麼在後臺獲取傳入的值呢?

先看下篩選的時候都往後臺傳了什麼:

這還只是 一條篩選,如果再幾個條件更麻煩,解決方法如下:

//外層資料 
public class ExtFilterInfo
    {
        public string Field { get; set; }
        public ExtFilterData Data { get; set; }
    }

//內層資料
    public class ExtFilterData
    {
        public string Type { get; set; }
        public string Value { get; set; }
        public string Comparison { get; set; }
    }
模型資料繫結解析
 public class ExtFilterInfoModelBinder : DefaultModelBinder
    {
        public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
            var filter = (ExtFilterInfo)base.BindModel(controllerContext, bindingContext);

            var field = bindingContext.ValueProvider.GetValue(bindingContext.ModelName + "[field]");
            if (field != null)
            {
                filter.Field = field.AttemptedValue;
            }
            var type = bindingContext.ValueProvider.GetValue(bindingContext.ModelName + "[data][type]");
            var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName + "[data][value]");
            var comparison = bindingContext.ValueProvider.GetValue(bindingContext.ModelName + "[data][comparison]");
            if (filter.Data == null)
            {
                filter.Data = new ExtFilterData();
            }
            if (type != null)
            {
                filter.Data.Type = type.AttemptedValue;
            }
            if (value != null)
            {
                filter.Data.Value = value.AttemptedValue;
            }
            if (comparison != null)
            {
                filter.Data.Comparison = comparison.AttemptedValue;
            }
            return filter;
        }
    }

然後註冊registered in Application_Start方法中(將下面程式碼放進去)

 ModelBinders.Binders.Add(typeof(Oland.HIP.WebAdmin.API.ExtFilterInfo), new Oland.HIP.WebAdmin.API.ExtFilterInfoModelBinder());

9.後臺資料改怎麼接受

public PageData<Monitor[]> Get([FromUri]string _dc, [FromUri] int page, [FromUri] int start, [FromUri] int limit, [FromUri] ExtFilterInfo[] filter)
        {
}

OK,結束, 本來想給大家看看貼點資料呢,電腦卡的要死,就算了……,如果感覺對您有所幫助的話請點推薦,謝謝……