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

自定义扩展Jquery easyui datagrid filter组件实现对日期类型区间段的筛选功能。显示效果如一下

是不是非常实用

引用的jquery 组件是 Date Range Picker / http://www.daterangepicker.com/

自定义扩展easyui datagird filter,参考代码如一下

$.extend($.fn.datagrid.defaults.filters, {
    dateRange: {
        init: function (container, options) {
            var cc = $('<span class="textbox combo datebox"><span class="textbox-addon textbox-addon-right" style="right: 0px; top: 1px;"><a href="javascript:" class="textbox-icon combo-arrow" icon-index="0" tabindex="-1" style="width: 18px; height: 22px;"></a></span></span>').appendTo(container);
            var input = $('<input type="text" style="border:0px">').appendTo(cc);
            var myoptions = {
                applyClass: 'btn-sm btn-success',
                cancelClass: 'btn-sm btn-default',
                locale: {
                    applyLabel: '确认',
                    cancelLabel: '清空',
                    fromLabel: '起始时间',
                    toLabel: '结束时间',
                    customRangeLabel: '自定义',
                    firstDay: 1,
                    daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月'],  
                },
                ranges: {
                    
                    //'最近1小时': [moment().subtract('hours',1), moment()],
                    '今日': [moment(), moment()],
                    '昨日': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                    '最近7日': [moment().subtract(6,'days'), moment()],
                    '最近30日': [moment().subtract(29, 'days'), moment()],
                    '本月': [moment().startOf("month"), moment().endOf("month")],
                    '上个月': [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
                },
                opens: 'right',    // 日期选择框的弹出位置
                separator: '-',
                showWeekNumbers: false,     // 是否显示第几周
                format: 'MM/DD/YYYY'
            }
            input.daterangepicker(myoptions);
            container.find('.textbox-icon').on('click', function () {
                container.find('input').trigger('click.daterangepicker');
            });
            if (options.onChange == undefined) {
                console.log('Can not find function:onChange for', input[0]);
            }
            else {
                input.on('cancel.daterangepicker', function (ev, picker) {
                    $(this).val('');
                    options.onChange('');
                });
                input.on('apply.daterangepicker', function (ev, picker) {
                    options.onChange(picker.startDate.format('MM/DD/YYYY') +'-'+ picker.endDate.format('MM/DD/YYYY'));
                });
            }
            
            
            return input;
        },
        destroy: function (target) {
            $(target).daterangepicker('destroy');
        },
        getValue: function (target) {
            return $(target).daterangepicker('getValue') ;
        },
        setValue: function (target, value) {
           
            $(target).daterangepicker('setValue', value);
           
        },
        resize: function (target, width) {
            $(target)._outerWidth(width)._outerHeight(24);
           // $(target).daterangepicker('resize', width / 2);
        }
    }
});

Datagrid 开启filter功能 参考代码如一下

$(function () {

            $dg.datagrid("enableFilter", [
                

                {
                    field: "StartDate",
                    type: "dateRange",
                    options: {
                        onChange: function (value) {
                            $dg.datagrid("addFilterRule", {
                                field: "StartDate",
                                op: "between",
                                value: value
                            });

                            $dg.datagrid("doFilter");
                        }
                    }
                },
                {
                    field: "EndDate",
                    type: "dateRange",
                    options: {
                        onChange: function (value) {
                            $dg.datagrid("addFilterRule", {
                                field: "EndDate",
                                op: "between",
                                value: value
                            });

                            $dg.datagrid("doFilter");
                        }
                    }
                },


            ]);
        })

后台代码如一下

 if (rule.field == "StartDate" && !string.IsNullOrEmpty(rule.value))
                    {
                        if (rule.op == "between")
                        {
                            var datearray = rule.value.Split(new char[] { '-' });
                            var start = Convert.ToDateTime(datearray[0]);
                            var end = Convert.ToDateTime(datearray[1]);

                            And(x => SqlFunctions.DateDiff("d", start, x.StartDate) >= 0);
                            And(x => SqlFunctions.DateDiff("d", end, x.StartDate) <= 0);
                        }
                    }





                    if (rule.field == "EndDate" && !string.IsNullOrEmpty(rule.value))
                    {
                        if (rule.op == "between")
                        {
                            var datearray = rule.value.Split(new char[] { '-' });
                            var start = Convert.ToDateTime(datearray[0]);
                            var end = Convert.ToDateTime(datearray[1]);

                            And(x => SqlFunctions.DateDiff("d", start, x.EndDate) >= 0);
                            And(x => SqlFunctions.DateDiff("d", end, x.EndDate) <= 0);
                        }
                    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

ExecuteReader在执行有输出参数的存储过程时拿不到输出参数

异常处理汇总-后端系列 http://www.cnblogs.com/dunitian/p/4523006.html 后期会在博客首发更新:http://dnt...

36970
来自专栏跟着阿笨一起玩NET

C#实现树型结构TreeView节点拖拽的简单功能(转)

本文摘抄博客园里面的牛人吉日嘎啦。http://www.cnblogs.com/jirigala

29610
来自专栏c#开发者

在DataGrid中创建一个弹出式Details窗口

在DataGrid中创建一个弹出式Details窗口 这篇文章来自DotNetJunkie的提议。他最初写信要求我们提供一个关于如何创建在DataGrid 中...

39380
来自专栏熊二哥

Spring.NET的AOP怎么玩

之前公司一直不让使用第三方组件,因此AOP方面的组建一直不能使用,很多面向切面的应用只能通过自己写一些GenericMethod的泛型方法来解决,有一些呆板。由...

19750
来自专栏码匠的流水账

聊聊spring cloud gateway的RetryGatewayFilter

本文主要研究一下spring cloud gateway的RetryGatewayFilter

21620
来自专栏向治洪

React Native调用Android相机图库

概述 在很多的React Native开发中,我们需要调用原生的api实现调用相机和图库的功能,网上用的最多的开源库如:react-native-image-p...

31790
来自专栏Kubernetes

kube-proxy源码分析

##kube-proxy介绍 请参考我的另一篇博文:kube-proxy工作原理 ##源码目录结构分析 cmd/kube-proxy //负责kub...

77550
来自专栏wannshan(javaer,RPC)

ConcurrentHashMap 锁分段 源码分析

看ConcurrentHashMap下几个属性: /** * The default concurrency level for this table...

42260
来自专栏人工智能LeadAI

实时Android语音对讲系统架构

本文属于Android局域网内的语音对讲项目(https://github.com/yhthu/intercom)系列,《通过UDP广播实现Android局域网...

1.4K40
来自专栏Java成神之路

Java微信公众平台开发_03_消息管理之被动回复消息

上一节,我们启用服务器配置的时候,填写了一个服务器地址(url),如下图,这个url就是回调url,是开发者用来接收微信消息和事件的接口URL 。也就是说,用户...

1.7K50

扫码关注云+社区

领取腾讯云代金券