开发者社区> 文艺小青年> 正文

ASP.NET MVC5+EF6+EasyUI 后台管理系统(81)-数据筛选(万能查询)

简介:
+关注继续查看

系列目录

前言

听标题的名字似乎是一个非常牛X复杂的功能,但是实际上它确实是非常复杂的,我们本节将演示如何实现对数据,进行组合查询(数据筛选)

我们都知道Excel中是如何筛选数据的.就像下面一样

他是一个并的关系,我们现在要做的也是这样的效果,下面我们将利用EasyUI的DataGrid为例来扩展(就算是其他组件也是可以的,同样的实现方式!)

实现思路

  1. 前台通过查询组合json
  2. 后台通过反射拆解json
  3. 进行组合查询

虽然短短3点,够你写个3天天夜了

优点:需要从很多数据中得到精准的数据,通常查一些商品他们的属性异常接近的情况下使用

缺点:我实现的方式为伪查询,大量数据请使用存储过程

简单了解

从Easyui的官方扩展中了解到一个JS文件,但是实质上,这个文件BUG很多,在使用中我曾经一度认为是使用出现问题,其实他根本就不可用

所以我这里先献上修改后的整个JS代码

 修改版datagrid-filter.js

为了实现一个目的:输入数据后按回车查询数据。

这个扩展可以集成:Easyui 90%的Form组件

1.时间

2.数字

3.下拉Combobox

4.密码框

等等.......

实际上只用到1,2,3个Combxbox一般为动态数据AJAX从后台获取

看到代码(我已经封装好了,尽情调用即可,想要了解就进入查看代码写法和逻辑)

上面的废话已经说完了!下面来说说如何调用

前端实现方式

1.引入datagrid-filter.js

<script src="~/Scripts/easyui/datagrid-filter.js"></script>

2.调用

调用之前来看看我们以前写的datagrid。这是一个普通的datagrid

复制代码
 $('#List').datagrid({
            url: '@Url.Action("GetList")',
            width: SetGridWidthSub(10),
            methord: 'post',
            height: $(window).height()/2-35,
            fitColumns: true,
            sortName: 'CreateTime',
            sortOrder: 'desc',
            idField: 'Id',
            pageSize: 15,
            pageList: [15, 20, 30, 40, 50],
            pagination: true,
            striped: true, //奇偶行是否区分
            singleSelect: true,//单选模式
            remoteFilter:true,
            columns: [[
                { field: 'Id', title: 'Id', width: 80,hidden:true},
                { field: 'Name', title: '产品名称', width: 80, sortable: true },
                { field: 'Code', title: '产品代码', width: 80, sortable: true },
                { field: 'Price', title: '产品价格', width: 80, sortable: true },
                { field: 'Color', title: '产品颜色', width: 80, sortable: true },
                { field: 'Number', title: '产品数量', width: 80, sortable: true },
                {
                    field: 'CategoryId', title: '类别', width: 80, sortable: true, formatter: function (value, row, index) {
                        return row.ProductCategory;
                    }
                },
                { field: 'ProductCategory', title: '类别', width: 80, sortable: true,hidden:true },
                { field: 'CreateTime', title: 'CreateTime', width: 80, sortable: true },
                { field: 'CreateBy', title: 'CreateBy', width: 80, sortable: true }
            ]]
        });
复制代码

那么我只想告诉大家我的DataGrid用的id名称是List而已

复制代码
     var dg = $('#List');
        var op = ['equal', 'notequal', 'less', 'greater'];
        var comboData=[{ value: '', text: 'All' }, { value: 'P', text: 'P' }, { value: 'N', text: 'N' }]
        dg.datagrid('enableFilter', [
            InitNumberFilter(dg, 'Price', op),
            InitNumberFilter(dg, 'Number', op),
            InitDateFilter(dg, 'CreateTime', op),
            InitComboFilter(dg, 'CategoryId', comboData, '', 'Id', 'Name', 'Name', "post")
        ]);
复制代码

那么前端的效果就出来了!如此简单都是因为封装的JS帮我们做了大量的工作,效果如下:

说明一下:InitComboFilter如果是Ajax那么第4个参数传URL即可,键值分别是Id和Name

其中:var op = ['equal', 'notequal', 'less', 'greater'];是漏斗,说再多也不明白,如要深入了解需要看源码

3.回车执行过滤

回车事件在源码中的

到此,前端的调用就结束了!

后台实现方式

 因为前端会传过来多一个参数,所以我们后台需要写多一个参数来接受,修改以前的GridPager就补多一个参数就好了。

 View Code
 public string filterRules { get; set; }

所以Controller没有变化。

BLL变化如下:

 View Code
复制代码
 //启用通用列头过滤
            if (!string.IsNullOrWhiteSpace(pager.filterRules))
            {
                List<DataFilterModel> dataFilterList = JsonHandler.Deserialize<List<DataFilterModel>>(pager.filterRules).Where(f => !string.IsNullOrWhiteSpace(f.value)).ToList();
                queryData = LinqHelper.DataFilter<Spl_Product>(queryData, dataFilterList);
            }
复制代码

其他都不变。

后台也是做了大量大量的工作的,看LinqHelper这个类

 View Code

预览效果

总结

实现一个组合查询,只需要在原来的基础上添加几行代码

后台:

复制代码
  //启用通用列头过滤
            if (!string.IsNullOrWhiteSpace(pager.filterRules))
            {
                List<DataFilterModel> dataFilterList = JsonHandler.Deserialize<List<DataFilterModel>>(pager.filterRules).Where(f => !string.IsNullOrWhiteSpace(f.value)).ToList();
                queryData = LinqHelper.DataFilter<Spl_Product>(queryData, dataFilterList);
            }
复制代码

前端:

复制代码
   var dg = $('#List');
        var op = ['equal', 'notequal', 'less', 'greater'];
        var comboData={Category:[]}; //[{ value: '', text: 'All' }, { value: 'P', text: 'P' }, { value: 'N', text: 'N' }]
       
        dg.datagrid('enableFilter', [
            InitNumberFilter(dg, 'Price', op),
            InitNumberFilter(dg, 'Number', op),
            InitDateFilter(dg, 'CreateTime', op),
            InitComboFilter(dg, 'CategoryId', comboData, '../Spl/ProductCategory/GetComboxData', 'Id', 'Name', 'Name', "post")
        ]);
复制代码

完全没有任何逻辑,谁都能用,示例代码下载

 链接:http://pan.baidu.com/s/1pL30drd 密码:1yrc

 本文转自ymnets博客园博客,原文链接:http://www.cnblogs.com/ymnets/p/6129139.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery EasyUI API 中文文档 - DataGrid 数据表格
扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 1.
1019 0
《构建实时机器学习系统》一1.7 案例:Netflix在机器学习竞赛中学到的经验
本节书摘来自华章出版社《构建实时机器学习系统》一 书中的第1章,第1.7节,作者:彭河森 汪涵,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1599 0
SAS学习笔记之《SAS编程与数据挖掘商业案例》(3)变量操作、观测值操作、SAS数据集管理
SAS学习笔记之《SAS编程与数据挖掘商业案例》(3)变量操作、观测值操作、SAS数据集管理 1. SAS变量操作的常用语句 ASSIGNMENT 创建或修改变量 SUM 累加变量或表达式 KEEP 规定在数据集中保留的变量 DROP 规定在数据集中删除的变量 ARRAY 定义一个数组 RENAME
1486 0
jQuery EasyUI API 中文文档 - 数据表格(DataGrid)
DataGrid 数据表格 扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults 。 依赖 panel resizable linkbutton pagination 用法 1.
1117 0
使用IntelliJ IDEA开发SpringMVC网站(四)用户管理
原文:使用IntelliJ IDEA开发SpringMVC网站(四)用户管理 摘要 通过对用户表的管理,更加深入地讲解SpringMVC的操作。 目录[-] 文章已针对IDEA 15做了一定的更新,部分更新较为重要,请重新阅读文章并下载最新源码。
1030 0
3576
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载