Skip to content

Commit 6b0ee7d

Browse files
Alexander ZhukAlexander Zhuk
Alexander Zhuk
authored and
Alexander Zhuk
committed
Merge remote-tracking branch 'origin/master'
2 parents 3ad1833 + d6e0508 commit 6b0ee7d

File tree

9 files changed

+380
-48
lines changed

9 files changed

+380
-48
lines changed

‎README.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
##Angular Data Grid
1+
## Angular Data Grid
2+
23
Light, flexible and performant Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching,
34
seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application. Angular 1.3 - 1.6 compliant.
45

@@ -8,10 +9,13 @@ Demo Material: http://angular-data-grid.github.io/demo/material/
89

910
Demo 100k: http://angular-data-grid.github.io/demo/100k/
1011

12+
Demo Angular UI Router: http://angular-data-grid.github.io/demo/bootstrap/ui-router.html
13+
1114
### Features
1215
- Does not have any hard-coded template so you can choose any mark-up you need, from basic `<table>` layout to any `<div>` structure.
1316
- Easily switch between the most popular Bootstrap and Google Material theming, or apply your own CSS theme just by changing several CSS classes.
1417
- Built-in sync with browser address bar (URL), so you can copy-n-paste sorting/filtering/pagination results URL and open it in other browser / send to anyone - even if pagination / filtering are done on a client-side.
18+
- Support of [Angular UI Router](https://github.com/angular-ui/ui-router) navigation.
1519
- Unlike most part of other Angular DataGrids, we intentionally use non-isolated scope of the directive to maximize flexibility, so it can be easily synchronized with any data changes inside your controller.
1620
NOTE! With great power comes great responsibility, so use non-isolated API wisely.
1721

@@ -235,3 +239,6 @@ Then create in `gridOptions.customFilters` variable named as `ng-model` with fil
235239
All filters have optional parameter `disable-url`. If you set it to **true**, URL-synchronization for this filter will be disabled.
236240
237241
If you need to use 2 or more grids on page, please add `id` to grids, and then use `grid-id` attribute on filters to specify their corresponding grid. [Example](http://angular-data-grid.github.io/demo/bootstrap/multiple.html)
242+
243+
### Next / Future
244+
- Port data grid to Angular2?

‎demo/bootstrap/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@ <h4>Additional Demos</h4>
4545
<li>
4646
<a href="server-pagination.html" target="_blank">Server pagination</a>
4747
</li>
48+
<li>
49+
<a href="ui-router.html" target="_blank">UI Router plus server pagination</a>
50+
</li>
4851
</ul>
4952
<hr>
5053
<div class="row">

‎demo/bootstrap/js/routerServerPaginationApp.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
(function () {
2+
'use strict';
3+
4+
angular
5+
.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'ui.router', 'angular-loading-bar'])
6+
.config(config)
7+
.factory('myAppFactory', MyAppFactory);
8+
9+
config.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];
10+
MyAppController.$inject = ['$scope', 'myAppFactory', '$state'];
11+
MyAppFactory.$inject = ['$http'];
12+
13+
14+
function config($stateProvider, $urlRouterProvider, $locationProvider) {
15+
//$locationProvider.html5Mode(true);
16+
17+
$urlRouterProvider.otherwise('/orders');
18+
19+
$stateProvider
20+
.state('orders', {
21+
url: '/orders',
22+
templateUrl: 'views/router-server-pagination.html',
23+
controller: MyAppController
24+
})
25+
.state('anotherView', {
26+
url: '/anotherView',
27+
templateUrl: 'views/anotherView.html',
28+
controller: MyAppController
29+
})
30+
}
31+
32+
function MyAppController($scope, myAppFactory, $state) {
33+
34+
$scope.gridOptions = {
35+
data: [],
36+
getData: myAppFactory.getOrdersData,
37+
sort: {
38+
predicate: 'orderNo',
39+
direction: 'asc'
40+
}
41+
};
42+
$scope.UI = {};
43+
$scope.gridActions = {};
44+
$scope.goToAnotherState = function() {
45+
$state.go('anotherView');
46+
};
47+
$scope.back = function() {
48+
$state.go('orders');
49+
};
50+
myAppFactory.getStatuses().then(function (resp) {
51+
$scope.UI.statusOptions = resp.data;
52+
})
53+
}
54+
55+
function MyAppFactory($http) {
56+
var herokuDomain = 'https://server-pagination.herokuapp.com';
57+
return {
58+
getOrdersData: getOrdersData,
59+
getStatuses: getStatuses
60+
};
61+
62+
function getOrdersData(params, callback) {
63+
$http.get(herokuDomain + '/orders' + params).then(function (response) {
64+
callback(response.data.orders, response.data.ordersCount);
65+
});
66+
}
67+
68+
function getStatuses() {
69+
return $http.get(herokuDomain + '/orders/statuses');
70+
}
71+
}
72+
})();

‎demo/bootstrap/ui-router.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!-- index.html -->
2+
<!doctype html>
3+
4+
<html ng-app="myApp">
5+
<head>
6+
<style>
7+
.sortable:after {
8+
font: 14px/1 FontAwesome;
9+
content: "\f0dc";
10+
}
11+
12+
.sortable.sort-ascent:after {
13+
content: '\f0de';
14+
vertical-align: bottom;
15+
}
16+
17+
.sortable.sort-descent:after {
18+
content: "\f0dd";
19+
vertical-align: top;
20+
}
21+
</style>
22+
<!--<base href="/angular-data-grid/demo/bootstrap/"/>-->
23+
<link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon">
24+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
25+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
26+
<link rel="stylesheet" href="css/angular-data-grid.bootstrap.css">
27+
<link rel="stylesheet" href="css/loading-bar.min.css">
28+
</head>
29+
30+
<body>
31+
<nav class="navbar navbar-inverse">
32+
<div class="container">
33+
<a href="#" class="navbar-brand">Angular Data Grid - UI Router Server Pagination Example</a>
34+
<ul class="nav navbar-nav navbar-right">
35+
<li><a href="../bootstrap/">Back to main demo</a></li>
36+
</ul>
37+
</div>
38+
</nav>
39+
<div class="container">
40+
<div class="margin-bottom-basic">
41+
<h3>Angular Data Grid - UI Router Server Pagination.</h3>
42+
<a href="https://github.com/angular-ui/ui-router">UI Router</a> plus all features for server pagination.<br/>
43+
<a href="https://github.com/angular-ui/ui-router">UI Router</a> can be used in both modes (hash and html5).
44+
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
45+
</div>
46+
<hr>
47+
<div ui-view></div>
48+
</div>
49+
</body>
50+
51+
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
52+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
53+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
54+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
55+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
56+
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
57+
<script src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script>
58+
59+
<script src="../../dist/pagination.min.js"></script>
60+
<script src="../../dist/dataGrid.min.js"></script>
61+
<script src="../../dist/loading-bar.min.js"></script>
62+
<script src="js/routerServerPaginationApp.js"></script>
63+
</html>

‎demo/bootstrap/views/anotherView.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<h3>Another View</h3>
2+
<div class="form-group">
3+
<button class="btn btn-primary" ng-click="back()">Back</button>
4+
</div>

‎demo/bootstrap/views/router-server-pagination.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<div class="container">
2+
<div class="form-group">
3+
<button class="btn btn-primary" ng-click="goToAnotherState()">Go to another state</button>
4+
</div>
5+
<div class="row">
6+
<div>
7+
<div class="col-md-4">
8+
<div class="form-group">
9+
<label for="orderIdFilter">Search by Order #</label>
10+
<input id="orderIdFilter" type="text" class="form-control order-search-box"
11+
placeholder="Enter Order #"
12+
ng-change="gridActions.filter()"
13+
ng-model="orderNo"
14+
filter-by="orderNo"
15+
filter-type="text">
16+
</div>
17+
</div>
18+
<div class="col-md-4">
19+
<div class="form-group">
20+
<label for="dateFromFilter">Date From</label>
21+
22+
<div class="input-group">
23+
<input type="text"
24+
id="dateFromFilter"
25+
class="form-control"
26+
uib-datepicker-popup="dd/MM/yyyy"
27+
placeholder="DD/MM/YYYY"
28+
max-date="dateTo"
29+
close-text="Close"
30+
ng-model="dateFrom"
31+
show-weeks="true"
32+
is-open="dateFromOpened"
33+
ng-click="dateFromOpened = true"
34+
filter-by="placed"
35+
filter-type="dateFrom"
36+
ng-blur="gridActions.filter()"
37+
ng-focus="gridActions.filter()"
38+
show-weeks="false"
39+
close-text="Close"/>
40+
<span class="input-group-btn">
41+
<label for="dateFromFilter" class="btn btn-default">
42+
<i class="fa fa-calendar"></i></label>
43+
</span>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="col-md-4">
48+
<div class="form-group">
49+
<label for="dateToInput">Date To</label>
50+
51+
<div class="input-group">
52+
<input type="text"
53+
id="dateToInput"
54+
class="form-control"
55+
uib-datepicker-popup="dd/MM/yyyy"
56+
placeholder="DD/MM/YYYY"
57+
min-date="dateFrom"
58+
close-text="Close"
59+
ng-model="dateTo"
60+
show-weeks="true"
61+
is-open="dateToOpened"
62+
ng-click="dateToOpened = true"
63+
filter-by="placed"
64+
filter-type="dateTo"
65+
ng-blur="gridActions.filter()"
66+
ng-focus="gridActions.filter()"
67+
show-weeks="false"
68+
close-text="Close">
69+
<span class="input-group-btn">
70+
<label for="dateToInput" class="btn btn-default">
71+
<i class="fa fa-calendar"></i></label>
72+
</span>
73+
</div>
74+
</div>
75+
<div ng-show="dateTo || dateFrom" class="buttons-right">
76+
<a href="" ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates</a>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
82+
83+
<div grid-data grid-options="gridOptions" grid-actions="gridActions" server-pagination="true">
84+
<div class="row">
85+
<div class="col-md-3"><span class="items">{{paginationOptions.totalItems}} items total</span></div>
86+
<div class="col-md-9 text-right">
87+
<form class="form-inline margin-bottom-basic">
88+
<div class="form-group">
89+
<div grid-pagination boundary-links="true"
90+
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
91+
total-items="paginationOptions.totalItems"
92+
ng-model="paginationOptions.currentPage"
93+
ng-change="reloadGrid()"
94+
class="pagination-sm"
95+
items-per-page="paginationOptions.itemsPerPage">
96+
</div>
97+
</div>
98+
<div class="form-group items-per-page">
99+
<label for="itemsOnPageSelect1">Items per page:</label>
100+
<select id="itemsOnPageSelect1" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
101+
ng-change="reloadGrid()">
102+
<option>5</option>
103+
<option>10</option>
104+
<option>50</option>
105+
<option>75</option>
106+
</select>
107+
</div>
108+
</form>
109+
</div>
110+
</div>
111+
112+
<table class="table table-bordered">
113+
<thead>
114+
<tr>
115+
<th width="30%" sortable="orderNo" class="sortable">Order # </th>
116+
<th width="30%" sortable="datePlaced" class="sortable">Date Placed </th>
117+
<th class="st-sort-disable th-dropdown">
118+
<select class="form-control width-15"
119+
filter-by="status"
120+
filter-type="select"
121+
ng-model="status"
122+
ng-change="filter()">
123+
<option value="">All Statuses</option>
124+
<option ng-repeat="option in UI.statusOptions track by option.value"
125+
value="{{option.value}}">{{option.text}}
126+
</option>
127+
</select>
128+
</th>
129+
<th sortable="total" class="sortable">Total </th>
130+
</tr>
131+
</thead>
132+
<tbody>
133+
<tr grid-item>
134+
<td>{{item.orderNo}}</td>
135+
<td>{{item.datePlaced | date:'MM/dd/yyyy'}}</td>
136+
<td>{{item.status}}</td>
137+
<td>{{item.total}}</td>
138+
</tr>
139+
</tbody>
140+
</table>
141+
<div class="row">
142+
<div class="col-md-3"><span class="items">{{paginationOptions.totalItems}} items total</span></div>
143+
<div class="col-md-9 text-right">
144+
<form class="form-inline margin-bottom-basic">
145+
<div class="form-group">
146+
<div grid-pagination boundary-links="true"
147+
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
148+
total-items="paginationOptions.totalItems"
149+
ng-model="paginationOptions.currentPage"
150+
ng-change="reloadGrid()"
151+
class="pagination-sm"
152+
items-per-page="paginationOptions.itemsPerPage">
153+
</div>
154+
</div>
155+
<div class="form-group items-per-page">
156+
<label for="itemsOnPageSelect">Items per page:</label>
157+
<select id="itemsOnPageSelect" class="form-control input-sm" ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
158+
ng-change="reloadGrid()">
159+
<option>5</option>
160+
<option>10</option>
161+
<option>50</option>
162+
<option>75</option>
163+
</select>
164+
</div>
165+
</form>
166+
</div>
167+
</div>
168+
</div>
169+
</div>

0 commit comments

Comments
 (0)