Skip to content

Commit 3dff3cb

Browse files
EugenDraytsevEugenDraytsev
EugenDraytsev
authored and
EugenDraytsev
committed
Fixed select bug, some encapsulation improvements.
1 parent cf8c608 commit 3dff3cb

File tree

7 files changed

+368
-13
lines changed

7 files changed

+368
-13
lines changed

‎demo/100k/css/angular-data-grid.bootstrap.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.table > thead > tr > th {
2+
vertical-align: middle; }
3+
4+
.p-t-8 {
5+
padding-top: 8px; }
6+
7+
.margin-bottom-basic {
8+
margin-bottom: 15px; }
9+
10+
.pagination {
11+
margin: 0; }
12+
13+
.items-per-page {
14+
margin-left: 15px; }
15+
16+
.sortable:after {
17+
font: 14px/1 FontAwesome;
18+
content: "\f0dc"; }
19+
20+
.sortable.sort-ascent:after {
21+
content: '\f0de';
22+
vertical-align: bottom; }
23+
24+
.sortable.sort-descent:after {
25+
content: "\f0dd";
26+
vertical-align: top; }

‎demo/100k/index.html‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>Angular Data Grid - Bootstrap Design</title>
6+
<link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon">
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
9+
<link rel="stylesheet" href="css/angular-data-grid.bootstrap.css">
10+
</head>
11+
<body ng-app="myApp" ng-controller="myAppController" ng-cloak>
12+
<nav class="navbar navbar-inverse">
13+
<div class="container">
14+
<a href="#" class="navbar-brand">Angular Data Grid - 100k Example</a>
15+
</div>
16+
</nav>
17+
<div class="container">
18+
<div>
19+
<h3>Angular Data Grid 100k Example</h3>
20+
Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs,
21+
pagination and items-per-page functionality.
22+
Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
23+
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
24+
</div>
25+
<hr>
26+
<div class="row">
27+
<div>
28+
<div class="col-md-4">
29+
<div class="form-group">
30+
<label for="orderIdFilter">Search by User ID</label>
31+
<input id="orderIdFilter" type="text" class="form-control order-search-box"
32+
placeholder="Enter User ID"
33+
ng-change="gridActions.filter()"
34+
ng-model="id"
35+
filter-by="id"
36+
filter-type="text">
37+
</div>
38+
</div>
39+
<div class="col-md-4">
40+
<div class="form-group">
41+
<label for="dateFromFilter">Date From</label>
42+
43+
<div class="input-group">
44+
<input type="text"
45+
id="dateFromFilter"
46+
class="form-control"
47+
uib-datepicker-popup="dd/MM/yyyy"
48+
placeholder="DD/MM/YYYY"
49+
max-date="dateTo"
50+
close-text="Close"
51+
ng-model="dateFrom"
52+
show-weeks="true"
53+
is-open="dateFromOpened"
54+
ng-click="dateFromOpened = true"
55+
filter-by="date"
56+
filter-type="dateFrom"
57+
ng-blur="gridActions.filter()"
58+
ng-focus="gridActions.filter()"
59+
show-weeks="false"
60+
close-text="Close"/>
61+
<span class="input-group-btn">
62+
<label for="dateFromFilter" class="btn btn-default">
63+
<i class="fa fa-calendar"></i></label>
64+
</span>
65+
</div>
66+
</div>
67+
</div>
68+
<div class="col-md-4">
69+
<div class="form-group">
70+
<label for="dateToInput">Date To</label>
71+
72+
<div class="input-group">
73+
<input type="text"
74+
id="dateToInput"
75+
class="form-control"
76+
uib-datepicker-popup="dd/MM/yyyy"
77+
placeholder="DD/MM/YYYY"
78+
min-date="dateFrom"
79+
close-text="Close"
80+
ng-model="dateTo"
81+
show-weeks="true"
82+
is-open="dateToOpened"
83+
ng-click="dateToOpened = true"
84+
filter-by="date"
85+
filter-type="dateTo"
86+
ng-blur="gridActions.filter()"
87+
ng-focus="gridActions.filter()"
88+
show-weeks="false"
89+
close-text="Close">
90+
<span class="input-group-btn">
91+
<label for="dateToInput" class="btn btn-default">
92+
<i class="fa fa-calendar"></i></label>
93+
</span>
94+
</div>
95+
</div>
96+
<div ng-show="dateTo || dateFrom" class="buttons-right">
97+
<a href="" ng-click="dateTo = ''; dateFrom = ''; reloadGrid();">Clear Dates</a>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
<hr>
103+
<div class="row">
104+
<div class="col-md-12">
105+
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
106+
<div class="row">
107+
<div class="col-md-3">
108+
<span class="items">{{filtered.length}} users total</span>
109+
<div>Time stats</div>
110+
<div>Copy time: {{_time.copy}}</div>
111+
<div>Filter time: {{_time.filters}}</div>
112+
<div>Sort time: {{_time.sort}}</div>
113+
<div>All time: {{_time.all}}</div>
114+
</div>
115+
<div class="col-md-9 text-right">
116+
<form class="form-inline pull-right margin-bottom-basic">
117+
<div class="form-group">
118+
<grid-pagination max-size="5"
119+
boundary-links="true"
120+
class="pagination-sm"
121+
total-items="paginationOptions.totalItems"
122+
ng-model="paginationOptions.currentPage"
123+
ng-change="reloadGrid()"
124+
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
125+
</div>
126+
<div class="form-group items-per-page">
127+
<label for="itemsOnPageSelect1">Items per page:</label>
128+
<select id="itemsOnPageSelect1" class="form-control input-sm"
129+
ng-init="paginationOptions.itemsPerPage = '10'"
130+
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
131+
<option>10</option>
132+
<option>25</option>
133+
<option>50</option>
134+
<option>75</option>
135+
</select>
136+
</div>
137+
</form>
138+
</div>
139+
</div>
140+
<table class="table table-bordered table-striped">
141+
<thead>
142+
<tr>
143+
<th sortable="id" class="sortable">
144+
User Id
145+
</th>
146+
147+
<th sortable='name' class="sortable">
148+
Name
149+
</th>
150+
<th sortable='phone' class="sortable">
151+
Phone
152+
</th>
153+
<th sortable="date" class="sortable">
154+
Date Of Birth
155+
</th>
156+
</tr>
157+
</thead>
158+
<tbody>
159+
<tr grid-item>
160+
<td width="30%" ng-bind="item.id"></td>
161+
<td ng-bind="item.name"></td>
162+
<td ng-bind="item.phone"></td>
163+
<td width="30%" ng-bind="item.date | date:'MM/dd/yyyy'"></td>
164+
</tr>
165+
</tbody>
166+
</table>
167+
<form class="form-inline pull-right margin-bottom-basic">
168+
<div class="form-group">
169+
<grid-pagination max-size="5"
170+
boundary-links="true"
171+
class="pagination-sm"
172+
total-items="paginationOptions.totalItems"
173+
ng-model="paginationOptions.currentPage"
174+
ng-change="reloadGrid()"
175+
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
176+
</div>
177+
<div class="form-group items-per-page">
178+
<label for="itemsOnPageSelect2">Items per page:</label>
179+
<select id="itemsOnPageSelect2" class="form-control input-sm"
180+
ng-init="paginationOptions.itemsPerPage = '10'"
181+
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
182+
<option>10</option>
183+
<option>25</option>
184+
<option>50</option>
185+
<option>75</option>
186+
</select>
187+
</div>
188+
</form>
189+
</div>
190+
</div>
191+
</div>
192+
<hr>
193+
<div>
194+
<button class="btn btn-info margin-bottom-basic" ng-click="showCode = !showCode">CodePen</button>
195+
<div ng-show="showCode">
196+
<p data-height="768" data-theme-id="21603" data-slug-hash="xZddZm" data-default-tab="html"
197+
data-user="AngularDataGrid" class='codepen'>See the Pen <a
198+
href='http://codepen.io/AngularDataGrid/pen/xZddZm/'>xZddZm</a> by AngularDataGrid (<a
199+
href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.
200+
</p>
201+
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
202+
</div>
203+
</div>
204+
<hr>
205+
</div>
206+
</body>
207+
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
208+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
209+
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
210+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
211+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
212+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
213+
<script src="../../dist/pagination.min.js"></script>
214+
<script src="../../dist/dataGrid.js"></script>
215+
<script src="js/demoApp.js"></script>
216+
217+
</html>

‎demo/100k/js/demoApp.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
(function () {
2+
'use strict';
3+
4+
angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
5+
.controller('myAppController', ['$scope', function ($scope) {
6+
7+
$scope.gridOptions = {
8+
data: generateJSON(100000),
9+
urlSync: true
10+
};
11+
12+
}]);
13+
14+
function generateJSON(length) {
15+
var jsonObj = [],
16+
i,
17+
max,
18+
names = ['Ann', 'Ben', 'Patrick', 'Steve', 'Fillip', 'Bob'],
19+
item;
20+
for (i = 0, max = length; i < max; i++) {
21+
22+
item = {};
23+
item.id = i;
24+
item.name = names[Math.round(Math.random() * (names.length - 1))];
25+
item.phone = '+375-29-' + Math.round(Math.random() * 1000000);
26+
item.date = Math.round(Math.random() * 1000000000000);
27+
jsonObj.push(item);
28+
29+
}
30+
return jsonObj;
31+
}
32+
})();
33+
34+

‎demo/100k/scss/angular-data-grid.bootstrap.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.table > thead > tr > th {
2+
vertical-align: middle;
3+
}
4+
.p-t-8 {
5+
padding-top: 8px;
6+
}
7+
.margin-bottom-basic {
8+
margin-bottom: 15px;
9+
}
10+
11+
.pagination {
12+
margin: 0;
13+
}
14+
15+
.items-per-page {
16+
margin-left: 15px;
17+
}
18+
19+
.sortable {
20+
&:after {
21+
font: 14px/1 FontAwesome;
22+
content: "\f0dc";
23+
}
24+
&.sort-ascent:after {
25+
content: '\f0de';
26+
vertical-align: bottom;
27+
}
28+
&.sort-descent:after {
29+
content: "\f0dd";
30+
vertical-align: top;
31+
}
32+
}

‎dist/dataGrid.js‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -215,12 +215,35 @@
215215
}
216216

217217
function applyFilters() {
218-
$scope.filtered = angular.copy($scope._gridOptions.data);
218+
var time = Date.now(), sorted = false;
219219

220-
applyCustomFilters();
220+
//TO REMOVE ?
221+
$scope._time = {};
222+
223+
if ($scope.sortOptions.predicate && $scope.sortCache && $scope.sortCache.predicate === $scope.sortOptions.predicate
224+
&& $scope.sortCache.direction === $scope.sortOptions.direction) {
225+
$scope.filtered = $scope.sortCache.data.slice();
226+
sorted = true;
227+
} else {
228+
$scope.filtered = $scope._gridOptions.data.slice();
229+
}
221230

222-
//apply orderBy filter
223-
$scope.filtered = $filter('orderBy')($scope.filtered, $scope.sortOptions.predicate, $scope.sortOptions.direction === 'desc');
231+
$scope._time.copy = Date.now() - time;
232+
var time2 = Date.now();
233+
applyCustomFilters();
234+
$scope._time.filters = Date.now() - time2;
235+
var time3 = Date.now();
236+
237+
if ($scope.sortOptions.predicate && !sorted) {
238+
$scope.filtered = $filter('orderBy')($scope.filtered, $scope.sortOptions.predicate, $scope.sortOptions.direction === 'desc');
239+
$scope.sortCache = {
240+
data: $scope.filtered.slice(),
241+
predicate: $scope.sortOptions.predicate,
242+
direction: $scope.sortOptions.direction
243+
}
244+
}
245+
$scope._time.sort = Date.now() - time3;
246+
$scope._time.all = Date.now() - time;
224247
$scope.paginationOptions.totalItems = $scope.filtered.length;
225248
}
226249

@@ -316,7 +339,7 @@
316339
if (serverPagination) {
317340
element.attr('ng-repeat', "item in filtered");
318341
} else {
319-
element.attr('ng-repeat', "item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage");
342+
element.attr('ng-repeat', "item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index");
320343
}
321344
$compile(element)(childScope);
322345
});
@@ -336,7 +359,7 @@
336359

337360
function textFilter(items, value, predicate) {
338361
return items.filter(function (item) {
339-
return value && item[predicate] ? ~item[predicate].toLowerCase().indexOf(value.toLowerCase()) : true;
362+
return value && item[predicate] ? ~(item[predicate] + '').toLowerCase().indexOf(value.toLowerCase()) : true;
340363
});
341364
}
342365

0 commit comments

Comments
 (0)