ngTable自定义/重写过滤器

来源：互联网发布：开眼mac版下载编辑：程序博客网时间：2024/06/04 20:18

在使用ngTable 时用到了需要进行按时间过滤，但是ngTable并没有该功能，所以需要自定义过滤器，但是如果自定义了过滤器，则会覆盖原来的，所以就需要重写过滤器

ngTable过滤器的原理是按照过滤的条件遍历所有的列表项内容，如果满足过滤条件则返回true，显示该记录，如果不满足条件则返回false，不显示该条记录，过滤条件有任何变化都会触发过滤

text:根据字符匹配，如果被过滤的值有该字符，则显示该记录

number:根据数值进行匹配，如果数值相等，则显示该记录

select:根据下拉列表选择的值进行匹配，如果值相等，则显示该记录

添加自定义的过滤器控件
- 在HTML中

<script type="text/ng-template" id="/filter/js/startDateFilter.html">    <input type="text"></script>

添加自定义的过滤器控件
- 在js中

$scope.customFilter = {            start:{                id:'/filter/js/startDateFilter.html',                placeholder:'Start'            }        }

需要在ngTable的配置中指定过滤器

$scope.userTable = new NgTableParams({},            {                // initial sort order                filterDelay: 0,                filterOptions: {filterFn: $scope.customFilterFn},                dataset: data            });

为指定列设置控件

<td data-title="'日期'" filter="customFilter">                    {{user.date|date:'yyyy-MM-dd'}}                </td>

重写过滤器方法，实现过滤器功能

$scope.customFilterFn = function (date, filterValues) {            return data.filter(function (item) {                var result = true;                if (typeof(filterValues.name) != undefined && filterValues.name != null) {                    result = result && (item.name.indenOf(filterValues.name) > -1);                }                if (typeof(filterValues.sex) != undefined && filterValues.sex != null) {                    result = result && (item.sex == filterValues.sex);                }                if (typeof(filterValues.startDate) != undefined && filterValues.startDate != null) {                    result = result && (item.startDate >= filterValues.startDate);                }                return result;            })        }

页面代码

<!DOCTYPE html><html lang="en" ng-app="myApp" ng-controller="myCtrl"><head>    <meta charset="UTF-8">    <title>自定义过滤器</title></head><link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"><link href="https://cdn.bootcss.com/ng-table/1.0.0/ng-table.min.css" rel="stylesheet"><body><div class="row">    <!--自定义filter控件-->    <script type="text/ng-template" id="dateFilter.html">        <input type="date">    </script>    <div class="col-md-12 table-responsive">        <table ng-table="userTable" class="table table-condensed table-bordered table-striped table-hover "               show-filter="true">            <tr ng-repeat="user in $data">                <td data-title="'用户名'" filter="{username: 'text'}" sortable="'username'">{{user.username}}</td>                <td data-title="'性别'" filter="{sex: 'select'}" filter-data="sexs" sortable="'sex'">{{user.sex}}</td>                <td data-title="'性别'" filter="customFilter" sortable="'date'">                    {{user.date|date:'yyyy-MM-dd'}}                </td>            </tr>        </table>    </div></div></body><script type="text/ng-template" id="/filter/js/startDateFilter.html">    <input type="text"></script><script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script><script src="https://cdn.bootcss.com/ng-table/1.0.0/ng-table.min.js"></script><script type="text/javascript">    var app = angular.module('myApp', ['ngTable']);    app.controller('myCtrl', function ($scope, NgTableParams) {        $scope.sexs = [{            "id": "男",            "title": "男"        }, {            "id": "女",            "title": "女"        }]        var data = [{            "username": "农夫山泉",            "sex": "男",            "date": 1004570428580        }, {            "username": "哇哈哈",            "sex": "女",            "date": 1784570428580        },            {            "username": "Alice",            "sex": "男",            "date": 1466570428580        },            {            "username": "CCC",            "sex": "女",            "date": 1584570428580        }];        $scope.userTable = new NgTableParams({                sorting: {id: "asc"}            },            {                // initial sort order                filterDelay: 0,                filterOptions: {filterFn: $scope.customFilterFn},                dataset: data            });        $scope.customFilter = {            start:{                id:'/filter/js/startDateFilter.html',                placeholder:'Start'            }        }        $scope.customFilterFn = function (date, filterValues) {            return data.filter(function (item) {                var result = true;                console.log(filterValues);                if (typeof(filterValues.name) != undefined && filterValues.name != null) {                    result = result && (item.name.indenOf(filterValues.name) > -1);                }                if (typeof(filterValues.sex) != undefined && filterValues.sex != null) {                    result = result && (item.sex == filterValues.sex);                }                if (typeof(filterValues.startDate) != undefined && filterValues.startDate != null) {                    result = result && (item.startDate >= filterValues.startDate);                }                return result;            })        }    })</script></html>

0 0