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

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 先汗一个,一个小功能又踢腾了一天。本来这个带Demo的,但是上面介绍的不是很详细。用的时候问题不大,主要问题在文件导入方面.以为这个插件的使用和其他的不一样。 1.首先是需要引入文件的位置:如图 需要把整个grid都考到vs下,vs中结构如下: 2.

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

 

 

 

 

 

 

 

 

目录
相关文章
|
9天前
|
数据采集 存储 JavaScript
如何使用Cheerio与jsdom解析复杂的HTML结构进行数据提取
在现代网页开发中,复杂的HTML结构给爬虫技术带来挑战。传统的解析库难以应对,而Cheerio和jsdom在Node.js环境下提供了强大工具。本文探讨如何在复杂HTML结构中精确提取数据,结合代理IP、cookie、user-agent设置及多线程技术,提升数据采集的效率和准确性。通过具体示例代码,展示如何使用Cheerio和jsdom解析HTML,并进行数据归类和统计。这种方法适用于处理大量分类数据的爬虫任务,帮助开发者轻松实现高效的数据提取。
如何使用Cheerio与jsdom解析复杂的HTML结构进行数据提取
|
10天前
|
XML JSON API
淘宝京东商品详情数据解析,API接口系列
淘宝商品详情数据包括多个方面,如商品标题、价格、图片、描述、属性、SKU(库存量单位)库存、视频等。这些数据对于买家了解商品详情以及卖家管理商品都至关重要。
|
4天前
|
存储 JSON API
Python编程:解析HTTP请求返回的JSON数据
使用Python处理HTTP请求和解析JSON数据既直接又高效。`requests`库的简洁性和强大功能使得发送请求、接收和解析响应变得异常简单。以上步骤和示例提供了一个基础的框架,可以根据你的具体需求进行调整和扩展。通过合适的异常处理,你的代码将更加健壮和可靠,为用户提供更加流畅的体验。
21 0
|
11天前
|
监控 安全 网络安全
|
11天前
|
存储 开发者 C#
WPF与邮件发送:教你如何在Windows Presentation Foundation应用中无缝集成电子邮件功能——从界面设计到代码实现,全面解析邮件发送的每一个细节密武器!
【8月更文挑战第31天】本文探讨了如何在Windows Presentation Foundation(WPF)应用中集成电子邮件发送功能,详细介绍了从创建WPF项目到设计用户界面的全过程,并通过具体示例代码展示了如何使用`System.Net.Mail`命名空间中的`SmtpClient`和`MailMessage`类来实现邮件发送逻辑。文章还强调了安全性和错误处理的重要性,提供了实用的异常捕获代码片段,旨在帮助WPF开发者更好地掌握邮件发送技术,提升应用程序的功能性与用户体验。
17 0
|
11天前
|
API C# Shell
WPF与Windows Shell完美融合:深入解析文件系统操作技巧——从基本文件管理到高级Shell功能调用,全面掌握WPF中的文件处理艺术
【8月更文挑战第31天】Windows Presentation Foundation (WPF) 是 .NET Framework 的关键组件,用于构建 Windows 桌面应用程序。WPF 提供了丰富的功能来创建美观且功能强大的用户界面。本文通过问题解答的形式,探讨了如何在 WPF 应用中集成 Windows Shell 功能,并通过具体示例代码展示了文件系统的操作方法,包括列出目录下的所有文件、创建和删除文件、移动和复制文件以及打开文件夹或文件等。
25 0
|
11天前
|
开发者 API 开发框架
Xamarin 在教育应用开发中的应用:从课程笔记到互动测验,全面解析使用Xamarin.Forms构建多功能教育平台的技术细节与实战示例
【8月更文挑战第31天】Xamarin 作为一款强大的跨平台移动开发框架,在教育应用开发中展现了巨大潜力。它允许开发者使用单一的 C# 代码库构建 iOS、Android 和 Windows 应用,确保不同设备上的一致体验。Xamarin 提供广泛的 API 支持,便于访问摄像头、GPS 等原生功能。本文通过一个简单的教育应用示例——课程笔记和测验功能,展示了 Xamarin 在实际开发中的应用过程。从定义用户界面到实现保存笔记和检查答案的逻辑,Xamarin 展现了其在教育应用开发中的高效性和灵活性。
21 0
|
11天前
|
数据库 Java 监控
Struts 2 日志管理化身神秘魔法师,洞察应用运行乾坤,演绎奇幻篇章!
【8月更文挑战第31天】在软件开发中,了解应用运行状况至关重要。日志管理作为 Struts 2 应用的关键组件,记录着每个动作和决策,如同监控摄像头,帮助我们迅速定位问题、分析性能和使用情况,为优化提供依据。Struts 2 支持多种日志框架(如 Log4j、Logback),便于配置日志级别、格式和输出位置。通过在 Action 类中添加日志记录,我们能在开发过程中获取详细信息,及时发现并解决问题。合理配置日志不仅有助于调试,还能分析用户行为,提升应用性能和稳定性。
29 0
|
11天前
|
开发者 Java
JSF EL 表达式:乘技术潮流之风,筑简洁开发之梦,触动开发者心弦的强大语言
【8月更文挑战第31天】JavaServer Faces (JSF) 的表达式语言 (EL) 是一种强大的工具,允许开发者在 JSF 页面和后台 bean 间进行简洁高效的数据绑定。本文介绍了 JSF EL 的基本概念及使用技巧,包括访问 bean 属性和方法、数据绑定、内置对象使用、条件判断和循环等,并分享了最佳实践建议,帮助提升开发效率和代码质量。
22 0
|
11天前
|
开发者 监控 开发工具
如何将JSF应用送上云端?揭秘在Google Cloud Platform上部署JSF应用的神秘步骤
【8月更文挑战第31天】本文详细介绍如何在Google Cloud Platform (GCP) 上部署JavaServer Faces (JSF) 应用。首先,确保已准备好JSF应用并通过Maven构建WAR包。接着,使用Google Cloud SDK登录并配置GCP环境。然后,创建`app.yaml`文件以配置Google App Engine,并使用`gcloud app deploy`命令完成部署。最后,通过`gcloud app browse`访问应用,并利用GCP的监控和日志服务进行管理和故障排查。整个过程简单高效,帮助开发者轻松部署和管理JSF应用。
29 0

热门文章

最新文章

推荐镜像

更多