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

最新推荐文章于 2024-09-30 14:28:41 发布

weixin_33698823

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量128

点赞数

文章标签： javascript 测试前端 ViewUI

原文链接：https://yq.aliyun.com/articles/361560

版权

系列目录

前言

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

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

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

实现思路

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

虽然短短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")
        ]);