angularjs ngTable -Custom filter template-calendar

Posted 2020-07-05 qinyahui

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