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,如需转载请自行联系原作者

相关文章
|
8月前
基于EasyUI的后台管理系统页面原型_示例图_下载地址
基于EasyUI的后台管理系统页面原型_示例图_下载地址
63 0
|
4月前
|
SQL XML 关系型数据库
入门指南:利用NHibernate简化.NET应用程序的数据访问
【10月更文挑战第13天】NHibernate是一个面向.NET的开源对象关系映射(ORM)工具,它提供了从数据库表到应用程序中的对象之间的映射。通过使用NHibernate,开发者可以专注于业务逻辑和领域模型的设计,而无需直接编写复杂的SQL语句来处理数据持久化问题。NHibernate支持多种数据库,并且具有高度的灵活性和可扩展性。
71 2
|
6月前
|
开发框架 .NET 数据库连接
闲话 Asp.Net Core 数据校验(三)EF Core 集成 FluentValidation 校验数据例子
闲话 Asp.Net Core 数据校验(三)EF Core 集成 FluentValidation 校验数据例子
116 1
|
6月前
|
前端开发 关系型数据库 MySQL
Python基于Django框架图书管理系统,Bootstrap框架UI,后台EasyUI框架UI,有登录,实现增删改查的富文本效果
本文介绍了一个使用Python Django框架开发的图书管理系统,该系统采用Bootstrap框架进行前端UI设计,EasyUI框架用于后台UI界面,集成了富文本编辑器,并实现了登录及增删改查功能。
127 1
|
7月前
|
开发框架 JSON 前端开发
利用查询条件对象,在Asp.net Web API中实现对业务数据的分页查询处理
利用查询条件对象,在Asp.net Web API中实现对业务数据的分页查询处理
|
8月前
|
开发框架 前端开发 .NET
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
集成于VS 2019,EXT.NET前端和ASP.NET后端,搭配MSSQL 2018数据库。系统覆盖样品管理、数据分析、报表和项目管理等实验室全流程。应用广泛,包括生产质检(如石化、制药)、环保监测、试验研究等领域。随着技术发展,现代LIMS还融合了临床、电子实验室笔记本和SaaS等功能,以满足复杂多样的实验室管理需求。
96 3
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
|
6月前
|
开发框架 前端开发 算法
分享 .NET EF6 查询并返回树形结构数据的 2 个思路和具体实现方法
分享 .NET EF6 查询并返回树形结构数据的 2 个思路和具体实现方法
111 0
|
6月前
|
开发框架 NoSQL .NET
使用 Asp.net core webapi 集成配置系统,提高程序的灵活和可维护性
使用 Asp.net core webapi 集成配置系统,提高程序的灵活和可维护性
|
8月前
|
JSON 开发框架 前端开发
技术经验分享:ASP.NETCoreMVC打造一个简单的图书馆管理系统(修正版)(七)学生信息增删
技术经验分享:ASP.NETCoreMVC打造一个简单的图书馆管理系统(修正版)(七)学生信息增删
57 0

热门文章

最新文章