当前位置: 首页 > 工具软件 > ngTable > 使用案例 >

angularjs ngTable -Custom filter template-calendar

通骁
2023-12-01
jsp页面:

<script type="text/ng-template" id="path/to/your/filters/top-Date-One.html">
<input type="text" ng-click="popup1.opened=!popup1.opened" uib-datepicker-popup="{{formats[2]}}" ng-model="vm.dateInfoOne" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" readonly class="form-control width-inherit" style="background-color: #fff"/>
</script>

<table  ng-table="vm.tableParamsCompletedOrder" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="order in $data">
<td title="'Date'" filter="{orderDate: 'path/to/your/filters/top-Date-One.html'}" sortable="'orderDate'">{{order.orderDate | date:'dd-MM-yyyy'}}</td>
<td title="'User Email'" filter="{userEmail: 'text'}" sortable="'userEmail'">{{order.userEmail}}</td>
<td title="'First Name'" filter="{firstName: 'text'}" sortable="'firstName'">{{order.firstName}}</td>
<td title="'Last Name'" filter="{lastName: 'text'}" sortable="'lastName'">{{order.lastName}}</td>
<td title="'Company'" filter="{companyName: 'text'}" sortable="'companyName'">{{order.companyName}}</td>
<td title="'Order Number'" filter="{orderCode: 'text' }" sortable="'orderCode'"><a href="#" data-ng-click="fn.openOrderInfo(order);">{{order.orderCode}}</a></td>
<td title="'Datasource'" filter="{datasource: 'text'}" sortable="'datasource'">{{order.datasource}}</td>
<td title="'Quantity'" filter="{quantity : 'text'}" sortable="'quantity'">{{order.quantity}}</td>
</tr>
</table>

其中

input是bootstrap中对应的日历控件
id="path/to/your/filters/top-Date-One.html"  对应  filter="{orderDate: 'path/to/your/filters/top-Date-One.html'}"



js:

angular.module("ni.controllers.user.reports", ["ngTable", "ngTableDemos", "angularMask"]);
angular.module("ni.controllers.user.reports").config(setConfigPhaseSettings);
setConfigPhaseSettings.$inject = ["ngTableFilterConfigProvider"];
function setConfigPhaseSettings(ngTableFilterConfigProvider) {
var filterAliasUrls = {
// note: ngTable also registers a 'number' filter
// we're overriding this alias to point to our custom template
};
ngTableFilterConfigProvider.setConfig({
aliasUrls: filterAliasUrls
});

// optionally set a default url to resolve alias names that have not been explicitly registered
// if you don't set one, then 'ng-table/filters/' will be used by default
ngTableFilterConfigProvider.setConfig({
defaultBaseUrl: "ng-table/filters/"
});
}

angularjs controller 中

//日历控件
$scope.popup1 = {
opened: false
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd-MM-yyyy', 'shortDate'];
$scope.altInputFormats = ['M!/d!/yyyy'];


//ordersList post得到的结果集合
vm.tableParamsCompletedOrder = new NgTableParams({count: 15 }, {counts:[], dataset: ordersList });

//对于日历使用监听
$scope.$watch('vm.dateInfoOne',function(n,o){
if(n!=o && n != undefined && vm.status=="2,3,4"){
var temp;
temp= _.filter(vm.tempCompletedOrder,function(item){
return $filter('date')(n, 'yyyy-MM-dd')==$filter('date')(item.orderDate, 'yyyy-MM-dd');
});
vm.tableParamsCompletedOrder = new NgTableParams({count: 15, filter: vm.tableParamsCompletedOrder.filter()}, {counts:[], dataset: temp });
}else {
if (vm.tableParamsCompletedOrder != undefined) {
vm.tableParamsCompletedOrder = new NgTableParams({count: 15, filter: vm.tableParamsCompletedOrder.filter()}, {counts: [], dataset: vm.tempCompletedOrder});
}
}
})

其中
vm.tableParamsCompletedOrder.filter()是向vm.tableParamsCompletedOrder中增加之前的过滤条件

$filter('date')(item.orderDate, 'yyyy-MM-dd')将日期格式化,item.orderDate是字符戳的形式



具体参考http://ng-table.com/#/filtering/demo-custom-template







转载于:https://www.cnblogs.com/qyhol/p/5359935.html

 类似资料: