自定义扩展Jquery easyui datagrid filter组件实现对日期类型区间段的筛选功能。显示效果如一下
是不是非常实用
引用的jquery 组件是 Date Range Picker /
自定义扩展easyui datagird filter，参考代码如一下
$.extend($.fn.datagrid.defaults.filters, { dateRange: { init: function (container, options) { var cc = $('').appendTo(container); var input = $('').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); } }