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，結束， 本來想給大家看看貼點數據呢，電腦卡的要死，就算了……，如果感覺對您有所幫助的話請點推薦，謝謝……