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

 

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

是不是非常实用

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

 

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

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

$.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功能 参考代码如一下

 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

$(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");                         }                     }                 },                 ]);         })

　　

后台代码如一下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

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);                        }                    }