我正在尝试制作一个自定义过滤器,它将使用日期输入控件按日期过滤网格,一个用于小于,一个用于大于.
我似乎能够在columnDefs中使用它来获取我想要的控件:{field:’mixedDate’,cellFilter:’date’,filterHeaderTemplate:’< div> From< input type =“date”> ;到< input type =“date”>< / div>‘ }.当将这些东西放在不同的范围内时,我也可以通过设置data-ng-model =“colFilter.term”来进行某种过滤.尽管如此,过滤似乎并不均衡.
有没有人有这方面的代码可行或可以指向正确的方向?
以下是关于他们自己网站上的主题的一些教程,但我不太确定如何操纵它们以满足我的需求或者甚至可能.
> @L_404_1@
> ui-grid custom filtering
首先,你应该包括jQuery UI Datepicker
然后你还将为它创建一个指令:
app.directive('datePicker',function(){ return { restrict : "A",require: 'ngModel',link : function(scope,element,attrs,ngModel){ $(function(){ $(element).datepicker({ changeMonth: true,changeYear: true,closeText: 'Clear',showButtonPanel: true,onClose: function () { var event = arguments.callee.caller.caller.arguments[0]; // If "Clear" gets clicked,then really clear it if ($(event.delegateTarget).hasClass('ui-datepicker-close')) { $(this).val(''); scope.$apply(function() { ngModel.$setViewValue(null); }); } },onSelect: function(date){ scope.$apply(function() { ngModel.$setViewValue(date); }); } }); }) } } })
在您的columnDefs中,您还需要使用客户过滤器和过滤器标头模板:
filters:[{condition:checkStart},{condition:checkEnd}],filterHeaderTemplate:’< div class =“ui-grid-filter-container”> from:< input style =“display:inline; width:30 %“class =”ui-grid-filter-input“date-picker type =”text“ng-model =”col.filters [0] .term“/> to:< input style =“display:inline; width:30%”class =“ui-grid-filter-input”date-picker type =“text”ng-model =“col.filters [1] .term” />< / DIV>” 假设您正在使用momentjs
过滤器功能如下:
function checkStart(term,value,row,column) { term = term.replace(/\\/g,"") var now = moment(value); if(term) { if(moment(term).isAfter(now,'day')) return false;; } return true; } function checkEnd(term,"") var now = moment(value); if(term) { if(moment(term).isBefore(now,'day')) return false;; } return true; }