Easyui DataGrid DateRange Filter 漂亮实用的日期区间段筛选功能
时间:2022-05-08
本文章向大家介绍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);
}
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法