AngularJS-TableView/angular.tableview.html at master · w3core/AngularJS-TableView · GitHub

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<scripttype="text/ng-template" id="tableview.head.cell">
<span>{{$column.title}}</span>
<spanng-if="$column.sortable && $column.field"class="sort"></span>
<inputng-if="$column.filterable && $column.field"
ng-model="tableview.request.like[$column.field]"
placeholder="{{$column.placeholder || 'Search...'}}"
ng-click="$event.stopPropagation();"
ng-change="like($index)"
type="text"
required
/>
</script>

<scripttype="text/ng-template" id="tableview.head.cell.select">
<label><input
type="checkbox"
class="hidden"
ng-checked="isRowsSelected()"
ng-click="onSelectPageRows($event)"
/><iclass="ui-checkbox"></i></label>
</script>

<scripttype="text/ng-template" id="tableview.body.cell.select">
<label><inputtype="checkbox"class="hidden"ng-checked="isRowSelected($row)"ng-click="switchRowSelection($row)"/><iclass="ui-checkbox"></i></label>
</script>

<scripttype="text/ng-template" id="tableview.body.cell">{{$row[$column.field]}}</script>

<scripttype="text/ng-template" id="tableview.body.cell.edit">
<input
ng-if="!$column.editable.type || $column.editable.type == 'text'"
ng-model="$mode.value"
ng-change="validate($index, $row, $mode)"
ng-blur="edition($index, $row, $mode)"
tableview-autofocus
type="text"
/>
<textarea
ng-if="$column.editable.type == 'textarea'"
ng-model="$mode.value"
ng-change="validate($index, $row, $mode)"
ng-blur="edition($index, $row, $mode)"
tableview-autofocus
></textarea>
<spanclass="message"ng-if="$mode.validation.message">{{$mode.validation.message}}</span>
</script>

<scripttype="text/ng-template" id="tableview.pager">
<divclass="limit"ng-include="templateName('pager.limit')"></div>
<divclass="selection"ng-include="templateName('pager.selection')"ng-if="tableview.selection.length"></div>
<divclass="controls"ng-include="templateName('pager.controls')"></div>
</script>

<scripttype="text/ng-template" id="tableview.pager.limit">
<selectng-model="tableview.request.limit"ng-options="o as o for o in tableview.limits"ng-change="limit()"></select>
</script>

<scripttype="text/ng-template" id="tableview.pager.selection">
<spanclass="selected">Selected {{tableview.selection.length}}entries</span>
<buttonclass="deselect"ng-click="tableview.selection = []"title="Deselect all">&times;</button>
</script>

<scripttype="text/ng-template" id="tableview.pager.controls">
<spanclass="pageOf">Page {{tableview.request.page}}of{{tableview.pages}}</span>
<buttonclass="prev"ng-click="prev()"ng-disabled="tableview.request.page < 2">Prev</button><buttonclass="next"ng-click="next()"ng-disabled="tableview.request.page>=tableview.pages">Next</button>
</script>

<divclass="holder" ng-class="{'scroller': !!tableview.scrollable}" ng-style="tableview.scrollable">
<table>
<thead>
<tr>
<thng-if="tableview.selectableBy"
class="selectable"
ng-include="templateName('head.cell.select')"
></th>
<thng-repeat="$column in tableview.columns"
ng-include="templateName('head.cell', $index)"
class="{{
 $column.name ? 'column-'+$column.name : ''
 }} {{
 $column.field ? 'column-'+$column.field : ''
 }}"
ng-class="{
 'sortable':$column.sortable && $column.field,
 'sortable-asc':$column.sorting == 'ASC',
 'sortable-desc':$column.sorting == 'DESC',
 'filterable':$column.filterable && $column.field,
 'editable':$column.editable && $column.field
 }"
ng-click="switchSort($column.field)"
></th>
</tr>
</thead>
<tbody>
<trng-repeat="$row in tableview.rows" ng-if="$index < tableview.request.limit" ng-class="{'selected': tableview.selectableBy && isRowSelected($row)}">
<tdng-if="tableview.selectableBy"
class="selectable"
ng-include="templateName('body.cell.select')"
></td>
<tdng-repeat="$column in tableview.columns"
ng-init="
 $cell = $row[$column.field];
 $mode={edition:false, value:$cell};
"
ng-click="$mode.edition=$column.editable?true:false"
ng-include="$mode.edition ? templateName('body.cell.edit', $index) : templateName('body.cell', $index)"
class="{{
 $column.name ? 'column-'+$column.name : ''
 }} {{
 $column.field ? 'column-'+$column.field : ''
 }}"
ng-class="{
 'sortable':$column.sortable && $column.field,
 'sortable-asc':$column.sorting == 'ASC',
 'sortable-desc':$column.sorting == 'DESC',
 'filterable':$column.filterable && $column.field,
 'editable':$column.editable && $column.field,
 'edition':$mode.edition,
 'invalid':$mode.validation && !$mode.validation.status
 }"
></td>
</tr>
</tbody>
<tfootng-if="templateName('template.foot')" ng-include="templateName('template.foot')"></tfoot>
</table>
</div>
<pagerng-include="templateName('pager')"></pager>
<preng-if="tableview.debug">{{tableview | json}}</pre>