Skip to content

Commit 70e50b3

Browse files
kuldeepkeshwarkuldeepkeshwar
committed
first commit
1 parent 01f0ea0 commit 70e50b3

File tree

25 files changed

+30831
-0
lines changed

25 files changed

+30831
-0
lines changed

‎Gruntfile.js‎

Lines changed: 413 additions & 0 deletions
Large diffs are not rendered by default.

‎README.md‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
# ui-grid
2+
3+
## ui-grid can be used to create grid with basic functionality like (sort,filter,pagination)
4+
5+
6+
## Directives :
7+
* **ui-grid** : the core directive for the ui-grid which accept an configuration object.
8+
9+
| Property | type | Description |
10+
| :--------|:---------|:-------|
11+
| src | `string`/`object` | collection of items, can be array or Url or promise |
12+
| remote | `boolean`(default: false) | mark true to enable remote paging |
13+
| manualFilter | `boolean`(default: false) | mark true to enable to trigger filtering of the records manually |
14+
| listeners | `object` | callback functions
15+
1). beforeLoadingData : called before loading the records.
16+
2). afterLoadingData : called after loading the records
17+
| | | |
18+
|:--------|:---------|:-------|
19+
| pager | `object` | paging configuation object e.g
20+
```javascript
21+
var pager={
22+
count:20
23+
}
24+
```
25+
26+
| | | |
27+
|:--------|:---------|:-------|
28+
| filters | `array` | array of filter object e.g
29+
```javascript
30+
var filters=[{
31+
key:'last_name',
32+
value:'smith',
33+
filterfn:function(){...}
34+
},{
35+
key:'city',
36+
value:'la',
37+
filterfn:function(){...}
38+
}]
39+
```
40+
* **ui-grid-filter** : used to apply filters
41+
42+
| Type | Description |
43+
| :---------:|:-------:|
44+
| `string`/`object`| can be name of the proptery or filter object with filter function e.g |
45+
46+
```javascript
47+
var filter={
48+
key:'last_name',
49+
filterfn:function(){...}
50+
}
51+
```
52+
* **ui-grid-sort** : used to apply sort
53+
54+
| Type | Description |
55+
| :---------:|:-------:|
56+
| `string`/`object`| can be name of the proptery or sorter object with sort function e.g
57+
```javascript
58+
var sorter={
59+
key:'last_name',
60+
sortfn:function(){...}
61+
}
62+
```
63+
64+
65+
* **ui-grid-repeat** : responsible for rendering the grid row
66+
## Usage :
67+
68+
### **ui-grid** :
69+
#### HTML
70+
```html
71+
<table ui-grid="gridOptions">
72+
<thead>
73+
<tr>
74+
<th>First Name</th>
75+
<th>Last Name</th>
76+
<th>Age</th>
77+
<th>City</th>
78+
</tr>
79+
</thead>
80+
<tbody>
81+
<tr ui-grid-repeat var="item">
82+
<td>{{item.first_name}}</td>
83+
<td>{{item.last_name}}</td>
84+
<td>{{item.age}}</td>
85+
<td>{{item.city}}</td>
86+
</tr>
87+
</tbody>
88+
</table>
89+
```
90+
##### CODE
91+
```javascript
92+
angular.module('myApp',['ui.grid']);
93+
angular.module('myApp').controller("myCtrl",function($scope){
94+
var master_list=[];
95+
for(var k=1;k<=5000;k++){
96+
master_list.push({first_name:'A'+k,last_name:'a'+k,age:k,city:'city'+k})
97+
}
98+
$scope.gridOptions={
99+
src:master_list
100+
}
101+
});
102+
```
103+
104+
105+
### **ui-grid-sort** : accepts property name e.g 'last_name' or Object which has property name and sort function.
106+
#### HTML
107+
```html
108+
<table ui-grid="gridOptions">
109+
<thead>
110+
<tr>
111+
th ui-grid-sort='sort1'>First Name</th>
112+
<th ui-grid-sort='last_name'>Last Name</th>
113+
<th ui-grid-sort='age'>Age</th>
114+
<th ui-grid-sort='city'>City</th>
115+
</tr>
116+
</thead>
117+
<tbody>
118+
<tr ui-grid-repeat var="item">
119+
<td>{{item.first_name}}</td>
120+
<td>{{item.last_name}}</td>
121+
<td>{{item.age}}</td>
122+
<td>{{item.city}}</td>
123+
</tr>
124+
</tbody>
125+
</table>
126+
```
127+
#### CODE
128+
```javascript
129+
angular.module('myApp',['ui.grid']);
130+
angular.module('myApp').controller("myCtrl",function($scope){
131+
var master_list=[];
132+
for(var k=1;k<=5000;k++){
133+
master_list.push({first_name:'A'+k,last_name:'a'+k,age:k,city:'city'+k})
134+
}
135+
$scope.gridOptions={
136+
src:master_list
137+
}
138+
$scope.sort1={
139+
key:'first_name',
140+
sortFn:function(array,sorter,order){
141+
array.sort();
142+
}
143+
}
144+
});
145+
```
146+
### **ui-grid-filter** : accepts property name e.g 'first_name' or Object which has property name and filter function.
147+
#### HTML
148+
```html
149+
<table ui-grid="gridOptions">
150+
<thead>
151+
<tr>
152+
th ui-grid-sort='sort1'>First Name</th>
153+
<th ui-grid-sort='last_name'>Last Name</th>
154+
<th ui-grid-sort='age'>Age</th>
155+
<th ui-grid-sort='city'>City</th>
156+
</tr>
157+
<tr>
158+
<td ><input type="text" ng-model="filter.first_name" ui-grid-filter='first_name'></td>
159+
<td ><input type="text" ng-model="filter.last_name" ui-grid-filter='filter1'></td>
160+
<td ><input type="text" ng-model="filter.age" ui-grid-filter='age'></td>
161+
<td ><input type="text" ng-model="filter.city" ui-grid-filter='city'></td>
162+
</tr>
163+
</thead>
164+
<tbody>
165+
<tr ui-grid-repeat var="item">
166+
<td>{{item.first_name}}</td>
167+
<td>{{item.last_name}}</td>
168+
<td>{{item.age}}</td>
169+
<td>{{item.city}}</td>
170+
</tr>
171+
</tbody>
172+
</table>
173+
```
174+
#### CODE
175+
```javascript
176+
angular.module('myApp',['ui.grid']);
177+
angular.module('myApp').controller("myCtrl",function($scope){
178+
var master_list=[];
179+
for(var k=1;k<=5000;k++){
180+
master_list.push({first_name:'A'+k,last_name:'a'+k,age:k,city:'city'+k})
181+
}
182+
$scope.gridOptions={
183+
src:master_list
184+
}
185+
$scope.sort1={
186+
key:'first_name',
187+
sortFn:function(array,sorter,order){
188+
array.sort();
189+
}
190+
}
191+
$scope.filter1={
192+
key:'last_name',
193+
filterFn:function(array,filter,value){
194+
for(var i = array.length - 1; i >= 0; i--) {
195+
if(value && array[i][filter.key]!=value){
196+
array.splice(i, 1);
197+
}
198+
}
199+
}
200+
}
201+
});
202+
```

‎app/.buildignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.coffee

0 commit comments

Comments
 (0)