Kendo UI Grid - 过滤器 - 日期范围 [英] Kendo UI Grid - Filter - Date Range
本文介绍了Kendo UI Grid - 过滤器 - 日期范围的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
按日期范围过滤列与我在 SO
中找到的解决方案非常吻合
如何在两个日期之间定义Kendo网格列过滤器？ - 由MWinstead提出
这个解决方案的唯一问题是如果您只选择结束日期并应用过滤器，则下次打开过滤器菜单时，开始日期将填入您输入的结束日期，并选择LTE运营商，这将由jQuery代码进行更改，导致错误的过滤器
通过 ataravati 在同一个线程中
我们如何解决这个问题？ 解决方案 div>
解决方案是使用 null 值提供 Begin Date ，即使用户没有选择 >
但是，我们必须控制提交按钮 ...
function grid_filterMenuInit（e）{
var currentFieldName = e.field;
if（currentFieldName ===yourFieldDate）{
console.info（ignore this field：<+ currentFieldName +>）;
return;
}
console.info（执行此字段：<+ currentFieldName +>）;
var filterSubmit = e.container.find（[type = submit]：eq（0））;
$（filterSubmit）.click（function（）{
var searchDateAfter = e.container.find（input：eq（0））;
var searchDateAfter1 = $（searchDateAfter）。 val（）;
var searchDateBefore = e.container.find（input：eq（1））;
var searchDateBefore1 = $（searchDateBefore）.val（）;
var gridDatasource = $（＃yourGridId）。data（kendoGrid）。dataSource;
var jsDateBefore = null;
var jsDateAfter = null;
//必须将kendoDateTime转换为JavaScript日期时间对象
//在我的情况下日期时间格式是：yyyy / MM / dd HH：mm：ss
if（typeof searchDateBefore1！=='undefined'）{
jsDateBefore = newJsDate（searchDateBefore1）;
}
if（typeof searchDateAfter1！=='undefined'）{
jsDateAfter = newJsDate（searchDateAfter1）;
}
var previousFilter = gridDatasource.filter（）;
var previousFilters = new Array（）;
var newFilters = new Array（）;
//存储以前的过滤器...
if（typeof previousFilter ==='object'&&; previousFilter.hasOwnProperty（filters））{
PreviousFilters = previousFilter.filters;
for（var i = 0; i< previousFilters.length; i ++）{
if（previousFilters [i] .field！== currentFieldName）{
if（newFilters.length == 0 ）{
newFilters = [previousFilters [i]];
}
else {
newFilters.push（previousFilters [i]）;
$ b //这就是解题：我们必须提供第一个过滤器，即使用户没有提供开始日期
//值为：null
if（newFilters.length == 0）{
newFilters = [{field：currentFieldName，operator：gte，value：jsDateAfter }];
else {
newFilters.push（{field：currentFieldName，operator：gte，value：jsDateAfter}）;
if（jsDateBefore！== null）{
newFilters.push（{field：currentFieldName，operator：lte，value：jsDateBefore}）;
}
gridDatasource.filter（newFilters）;
$（。k-animation-container）。hide（）;
//停止过滤器提交按钮的传播
return false;
}）;
函数newJsDate（dateTime）{
if（dateTime === null ||
typeof dateTime ==='undefined'||
dateTime ===）{
return null;
}
var dateTime1 = dateTime.split（）;
var date = dateTime1 [0];
var time = dateTime1 [1];
var date1 = date.split（/）;
var time1 = time.split（：）;
var year = parseInt（date1 [0]，10）;
var month = parseInt（date1 [1]，10）;
月=月-1;
var day = parseInt（date1 [2]，10）;
var hour = parseInt（time1 [0]，10）;
var minute = parseInt（time1 [1]，10）;
var second = parseInt（time1 [2]，10）;
var jsDate = new日期（年，月，日，
小时，分钟，秒）;
return jsDate;
}
Filtering a column by date range works nice with solution that i've found in SO
How to define a Kendo grid Column filter between two dates? - proposed by MWinstead
But
"The only problem with this solution is that if you only select the End Date and apply the filter, the next time you open the filter menu, the Begin Date will get populated with the End Date you entered and the LTE operator will be selected, which will be changed by the jQuery code, resulting in a wrong filter"
Question asked by ataravati in the same thread
How we can resolve this issue ?
解决方案
The soltion is to provide the Begin Date with null value, even if the user hasn't selected it.
But, we must take control of submit button...
function grid_filterMenuInit(e) {
var currentFieldName = e.field;
if(currentFieldName === "yourFieldDate") {
console.info("ignoring this field: <" + currentFieldName + ">");
return;
}
console.info("performing this field: <" + currentFieldName + ">");
var filterSubmit = e.container.find("[type=submit]:eq(0)");
$(filterSubmit).click(function() {
var searchDateAfter = e.container.find("input:eq(0)");
var searchDateAfter1 = $(searchDateAfter).val();
var searchDateBefore = e.container.find("input:eq(1)");
var searchDateBefore1 = $(searchDateBefore).val();
var gridDatasource = $("#yourGridId").data("kendoGrid").dataSource;
var jsDateBefore = null;
var jsDateAfter = null;
// we must convert kendoDateTime to JavaScript DateTime object
// in my case the date time format is : yyyy/MM/dd HH:mm:ss
if (typeof searchDateBefore1 !== 'undefined') {
jsDateBefore = newJsDate(searchDateBefore1);
}
if (typeof searchDateAfter1 !== 'undefined') {
jsDateAfter = newJsDate(searchDateAfter1);
}
var previousFilter = gridDatasource.filter();
var previousFilters = new Array();
var newFilters = new Array();
// storing the previous filters ...
if (typeof previousFilter === 'object' && previousFilter.hasOwnProperty("filters")) {
previousFilters = previousFilter.filters;
for (var i=0 ; i<previousFilters.length ; i++) {
if (previousFilters[i].field !== currentFieldName) {
if (newFilters.length == 0) {
newFilters = [previousFilters[i]];
}
else {
newFilters.push(previousFilters[i]);
}
}
}
}
// this is the soltion : we must provide the first filter, even if the user has not provide the begin date
// and the value will be : null
if (newFilters.length == 0) {
newFilters = [{field: currentFieldName, operator: "gte", value: jsDateAfter }];
}
else {
newFilters.push ({field: currentFieldName, operator: "gte", value: jsDateAfter });
}
if (jsDateBefore !== null) {
newFilters.push ({field: currentFieldName, operator: "lte", value: jsDateBefore });
}
gridDatasource.filter (newFilters);
$(".k-animation-container").hide();
// to stop the propagation of filter submit button
return false;
});
}
function newJsDate(dateTime) {
if (dateTime === null ||
typeof dateTime === 'undefined' ||
dateTime === "") {
return null;
}
var dateTime1 = dateTime.split(" ");
var date = dateTime1[0];
var time = dateTime1[1];
var date1 = date.split("/");
var time1 = time.split(":");
var year = parseInt(date1[0], 10);
var month = parseInt(date1[1], 10);
month = month - 1;
var day = parseInt(date1[2], 10);
var hour = parseInt(time1[0], 10);
var minute = parseInt(time1[1], 10);
var second = parseInt(time1[2], 10);
var jsDate = new Date(year, month, day,
hour, minute, second);
return jsDate;
}
这篇关于Kendo UI Grid - 过滤器 - 日期范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
