您的位置：首页 > Web前端 > JavaScript

EXTJS4 Grid Filter 插件的使用与后台数据解析------Extjs 查询筛选功能的实现

2013-06-28 18:32 961 查看

先汗一个，一个小功能又踢腾了一天。本来这个带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.组织插件配置，这里你也可以将它组织成类

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

encode:false,//jsonencodethefilterquery

//指定要对哪些列进行过滤
filters:[{
type:'boolean',
dataIndex:'IsSuccessed'
}]
};

这里的filter的type有string，boolean，numeric，date，还有list。前四个很容易理解，第五个类似enum,就是列可供选择的常量值。

4.将插件放入gridpanel

features:[filters],

5.怎么在后台获取传入的值呢？

先看下筛选的时候都往后台传了什么：

这还只是一条筛选，如果再几个条件更麻烦，解决方法如下：

//外层数据
publicclassExtFilterInfo
{
publicstringField{get;set;}
publicExtFilterDataData{get;set;}
}

//内层数据
publicclassExtFilterData
{
publicstringType{get;set;}
publicstringValue{get;set;}
publicstringComparison{get;set;}
}

模型数据绑定解析

publicclassExtFilterInfoModelBinder:DefaultModelBinder
{
publicoverrideobjectBindModel(ControllerContextcontrollerContext,ModelBindingContextbindingContext)
{
varfilter=(ExtFilterInfo)base.BindModel(controllerContext,bindingContext);

varfield=bindingContext.ValueProvider.GetValue(bindingContext.ModelName+"[field]");
if(field!=null)
{
filter.Field=field.AttemptedValue;
}
vartype=bindingContext.ValueProvider.GetValue(bindingContext.ModelName+"[data][type]");
varvalue=bindingContext.ValueProvider.GetValue(bindingContext.ModelName+"[data][value]");
varcomparison=bindingContext.ValueProvider.GetValue(bindingContext.ModelName+"[data][comparison]");
if(filter.Data==null)
{
filter.Data=newExtFilterData();
}
if(type!=null)
{
filter.Data.Type=type.AttemptedValue;
}
if(value!=null)
{
filter.Data.Value=value.AttemptedValue;
}
if(comparison!=null)
{
filter.Data.Comparison=comparison.AttemptedValue;
}
returnfilter;
}
}

然后注册registeredin
Application_Start方法中（将下面代码放进去）

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

9.后台数据改怎么接受

publicPageData<Monitor[]>Get([FromUri]string_dc,[FromUri]intpage,[FromUri]intstart,[FromUri]intlimit,[FromUri]ExtFilterInfo[]filter)
{
}

OK，结束，本来想给大家看看贴点数据呢，电脑卡的要死，就算了……，如果感觉对您有所帮助的话请点推荐，谢谢……

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

EXTJS4 Grid Filter 插件的使用 与后台数据解析------Extjs 查询筛选功能的实现

EXTJS4 Grid Filter 插件的使用与后台数据解析------Extjs 查询筛选功能的实现