Skip to content

Commit e101eb6

Browse files
IvanBisultanovIvanBisultanov
IvanBisultanov
authored and
IvanBisultanov
committed
change folder structure
1 parent 6b0995b commit e101eb6

File tree

9 files changed

+478
-24
lines changed

9 files changed

+478
-24
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
Light and flexible Data Grid for AngularJS apps, with built-in sorting, pagination and filtering options, unified API for client-side and server-side data fetching,
33
seamless synchronization with browser address bar and total freedom in mark-up and styling suitable for your application.
44

5-
Demo Bootstrap: http://angular-data-grid.github.io/
5+
Demo Bootstrap: http://angular-data-grid.github.io/demo/bootstrap/
66

7-
Demo Material: http://angular-data-grid.github.io/demo/material.html
7+
Demo Material: http://angular-data-grid.github.io/demo/material/
88

99
### Features
1010
- Does not have any hard-coded template so you can choose any mark-up you need, from basic `<table>` layout to any `<div>` structure.

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

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,23 @@
11
.table > thead > tr > th {
2-
vertical-align: middle;
3-
}
2+
vertical-align: middle; }
43

54
.margin-bottom-basic {
6-
margin-bottom: 15px;
7-
}
5+
margin-bottom: 15px; }
86

97
.pagination {
10-
margin: 0;
11-
}
8+
margin: 0; }
129

1310
.items-per-page {
14-
margin-left: 15px;
15-
}
11+
margin-left: 15px; }
1612

1713
.sortable:after {
18-
font: 14px/1 FontAwesome;
19-
content: "\f0dc";
20-
}
14+
font: 14px/1 FontAwesome;
15+
content: "\f0dc"; }
2116

2217
.sortable.sort-ascent:after {
23-
content: '\f0de';
24-
vertical-align: bottom;
25-
}
18+
content: '\f0de';
19+
vertical-align: bottom; }
2620

2721
.sortable.sort-descent:after {
28-
content: "\f0dd";
29-
vertical-align: top;
30-
}
22+
content: "\f0dd";
23+
vertical-align: top; }

‎demo/bootstrap/index.html‎

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

‎demo/bootstrap/js/demoApp.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
2+
.controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
3+
4+
$scope.gridOptions = {
5+
data: [],
6+
urlSync: true
7+
};
8+
myAppFactory.getData().then(function (responseData) {
9+
$scope.gridOptions.data = responseData.data;
10+
});
11+
12+
}])
13+
.factory('myAppFactory', function ($http) {
14+
return {
15+
getData: function () {
16+
return $http({
17+
method: 'GET',
18+
url: 'http://angular-data-grid.github.io/demo/data.json'
19+
});
20+
}
21+
}
22+
});
23+

‎demo/material.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ <h4>Angular Data Grid sample using out-of-box Angular Material styling</h4>
4141
</div>
4242
<hr>
4343
<div layout-gt-sm="row" layout-sm="column" layout-align="stretch center">
44-
<div flex-gt-sm="33" flex-sm="100" layout="row" layout-align="center start">
44+
<div flex-gt-sm="30" flex-sm="100" layout="row" layout-align="center start">
4545
<md-input-container md-no-float md-is-error="false" class="md-block flex-gt-xs flex-xs">
4646
<input ng-model="code"
4747
class="md-input"
@@ -53,7 +53,7 @@ <h4>Angular Data Grid sample using out-of-box Angular Material styling</h4>
5353
aria-invalid="false">
5454
</md-input-container>
5555
</div>
56-
<div flex-gt-sm="33" flex-sm="100" layout="row" layout-align="start center">
56+
<div flex-gt-sm="30" flex-sm="100" layout="row" layout-align="start center">
5757
<md-datepicker ng-model="dateFrom"
5858
flex="100"
5959
md-placeholder="From"
@@ -63,7 +63,7 @@ <h4>Angular Data Grid sample using out-of-box Angular Material styling</h4>
6363
filter-type="dateFrom"
6464
ng-change="gridActions.filter()"></md-datepicker>
6565
</div>
66-
<div flex-gt-sm="33" flex-sm="100" layout="row" layout-align="start center">
66+
<div flex-gt-sm="30" flex-offset-gt-sm="5" flex-sm="100" layout="row" layout-align="start center">
6767
<md-datepicker ng-model="dateTo"
6868
flex="100"
6969
md-placeholder="To"

‎demo/material/css/angular-data-grid.material.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ th md-select {
1919
.md-errors-spacer {
2020
display: none; }
2121

22-
.md-datepicker-input-container {
22+
.md-datepicker-input-container,
23+
.md-datepicker-input {
2324
width: 100%; }
2425

2526
.pagination {

0 commit comments

Comments
 (0)