先汗一个,一个小功能又踢腾了一天。本来这个带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,结束, 本来想给大家看看贴点数据呢,电脑卡的要死,就算了……,如果感觉对您有所帮助的话请点推荐,谢谢……

 

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

  1. ASP.NET easyUI--datagrid 通过ajax请求ASP.NET后台数据的分页查询

    js前台对datagrid的定义代码,如下 mygrid = $('#mytable').datagrid({ fit: true, //自动大小 height: 'auto', rownumbers ...

  2. Android后台数据接口交互实现注册功能

    首先,在ecplise里面新建一个叫做TestServices的web工程.在WebContent--WEB-INF--libs文件夹下导入两个jar包:mysql-connector-java-6. ...

  3. Logstash filter 插件之 grok

    本文简单介绍一下 Logstash 的过滤插件 grok. Grok 的主要功能 Grok 是 Logstash 最重要的插件.它可以解析任意文本并把它结构化.因此 Grok 是将非结构化的日志数据解 ...

  4. logstash之Filter插件

    Logstash之所以强悍的主要原因是filter插件:通过过滤器的各种组合可以得到我们想要的结构化数据 1:grok正则表达式 grok**正则表达式是logstash非常重要的一个环节**:可以通 ...

  5. 通用后台管理系统(ExtJS 4.2 + Spring MVC 3.2 + Hibernate)

    通用后台管理系统(ExtJS 4.2 +Spring MVC 3.2 + Hibernate) 开发语言JAVA 成品成品 前端技术extjs 数据库mysql,sql server,oracle 系 ...

  6. 用ajax获取后台数据,返回json数据,怎么在前台使用?

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  7. 【AS3】Flash与后台数据交换四种方法整理

    随着Flash Player 9的普及,AS3编程也越来越多了,所以这次重新整理AS3下几种与后台数据交换方法.1.URLLoader(URLStream)2.FlashRemoting3.XMLSo ...

  8. WordPress插件制作教程(四): 将数据保存到数据库

    上一篇讲解了添加菜单的方法,这一篇为大家讲解如何将数据保存到数据库中,并且显示在页面上,不会因提交表单时刷新页面输入框中内容消失.要实现这一功能我们需要借助WordPress函数来实现,下面就来讲解具 ...

  9. Easyui DataGrid DateRange Filter 漂亮实用的日期区间段筛选功能

    自定义扩展Jquery easyui datagrid filter组件实现对日期类型区间段的筛选功能.显示效果如一下 是不是非常实用 引用的jquery 组件是 Date Range Picker ...

随机推荐

  1. 卓豪ManageEngine参加2018企业数字化转型与CIO职业发展高峰论坛

    卓豪ManageEngine参加2018企业数字化转型与CIO职业发展高峰论坛 2018年10月20日,78CIO APP在北京龙城温德姆酒店主办了主题为“新模式.新动能.新发展”的<2018企 ...

  2. selenium_unittest基本框架

    from selenium import webdriver import unittest import time #创建类引入unitest.testcase用例库 class BaiDu_tes ...

  3. 第37章:MongoDB-集群--Replica Sets(副本集)---单机的搭建

    ①创建副本集 1:先创建几个存放数据的文件夹,比如在前面的dbs下面创建db1,db2,db3: 同理在前面的logs下面创建logs1,logs2,logs3 2:在启动MongoDB服务器的时候, ...

  4. EventTrigger动态添加监听事件

    在 Unity3D 中,通过拖拽的方式在 EventTrigger 组件中添加监听事件就不多说了,很简单.这里主要说的是通过代码动态往 EventTrigger 组件中添加监听事件,有个很坑的地方,就 ...

  5. 2.3.7synchronized代码块有volatile同步的功能

    关键字synchronized可以使多个线程访问同一个资源具有同步性,而且他还具有将线程工作内存中的私有变量与公共内存中的变量同步的功能. package com.cky.thread; /** * ...

  6. javabean的特点

    javabean的三个基础条件 1.拥有私有的属性 2.共有的get,set方法 3.默认的构造方法

  7. git cmd 命令在已有的仓库重新添加新的文件夹

    正确步骤: 1. git init //初始化仓库 git add .(文件name) //添加文件到本地仓库 git commit -m “first commit” //添加文件描述信息 git ...

  8. 背水一战 Windows 10 (87) - 文件系统: 获取文件的属性, 修改文件的属性, 获取文件的缩略图

    [源码下载] 背水一战 Windows 10 (87) - 文件系统: 获取文件的属性, 修改文件的属性, 获取文件的缩略图 作者:webabcd 介绍背水一战 Windows 10 之 文件系统 获 ...

  9. create-react-app创建的项目npm run build之后静态文件找不到

    create-react-app创建的项目npm run build之后,运行build中的index.html,什么都没显示,打开浏览器的F12,发现了几个红色的报错,提示几个文件找不到. 查看生成 ...

  10. 关于java集合的一些操作

    1.数组转集合 java提供了一个方法:Arrays.asList(T... a)的方法. 测试: String[] arr = {"Lida","huanda" ...