1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
| <!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>
|
