-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·75 lines (68 loc) · 4.71 KB
/
index.html
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
<!--
* Edi-Table
* Angular-based version
* v. 0.1.0
-->
<!DOCTYPE html>
<html lang="en" ng-app="ediTables73">
<head>
<meta charset="utf-8">
<title>Editable Table | Angular version</title>
<meta description="">
<link href="app.css" rel="stylesheet" type="text/css">
<script src="vendors/ang/angular1-3-12.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="TableController as ctrl">
<p class="dblclk"><strong>Edi-Table73</strong>: Angular based version</p>
<div class="dblclk small">Hot keys:
<ul>
<li><em>DblClick</em> — Start editing of a cell</li>
<li><em>Enter</em> — Start / cancel the editing mode in the current cell</li>
<li><em>Tab, Shift-Tab</em> — Move through a table</li>
<li><em>Esc</em> or <em>Click</em> (out of an active cell) — Stop editing</li>
</ul>
</div>
<h1>Table 1<img src="img/saving.gif" alt="Saving data" title="Saving data" class="saving-in-progress"></h1>
<div class="parameters">
<label>Number of rows:
<input type="number" class="param-input" min="1" max="100" ng-model="ctrl.rowsOnPage" ng-change="ctrl.calcMaxPage()">
</label>
<label style="margin-left:20px;"> Active page number:
<input type="number" class="param-input" min="1" max={{ctrl.maxPage}} ng-model="ctrl.pageNumber">
</label>
<span style="margin-left:20px;">Cancel sorting: <a href="" class="no-sorting" ng-click="ctrl.sortBy='' ">✕</a></span>
<span><a href="" class="save-data" ng-click="ctrl.saveData()" ng-class="ctrl.savingClass()" title="Result of saving: {{ctrl.savingResult}}">Save</a></span>
<span><a href="" class="load-data" ng-click="ctrl.loadData()" title="Testing operation">Load</a></span>
</div>
<table class="table">
<thead>
<tr>
<th><a href="" ng-click="ctrl.sortBy='tdArray[0].text'; reverse=!reverse;">N</a></th>
<th><a href="" ng-click="ctrl.sortBy='tdArray[1].text'; reverse=!reverse;">Company</a></th>
<th><a href="" ng-click="ctrl.sortBy='tdArray[2].text'; reverse=!reverse;">Region</a></th>
<th><a href="" ng-click="ctrl.sortBy='tdArray[3].text'; reverse=!reverse;">Start Date</a></th>
<th><a href="" ng-click="ctrl.sortBy='tdArray[4].text'; reverse=!reverse;">Responsible</a></th>
<th><a href="" ng-click="ctrl.sortBy='tdArray[5].text'; reverse=!reverse;">Status</a></th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr id={{row.id}} class="row_on_click" ng-repeat="row in ctrl.rows | orderBy : ctrl.sortBy : reverse | limitTo : (ctrl.rowsOnPage*ctrl.pageNumber) | filter : ctrl.paginate as results">
<td class="col_id_id" ng-dblclick="yes0=!yes0"><input type="text" ng-model="row.tdArray[0].text" ng-init="yes0=true" ng-readonly="yes0" ng-blur="yes0=true" ng-keydown="yes0=ctrl.checkKey( $event, yes0 )"></td>
<td class="col_id_name" ng-dblclick="yes1=!yes1"><input type="text" ng-model="row.tdArray[1].text" ng-init="yes1=true" ng-readonly="yes1" ng-blur="yes1=true" ng-keydown="yes1=ctrl.checkKey( $event, yes1 )"></td>
<td class="col_id_regeon" ng-dblclick="yes2=!yes2"><input type="text" ng-model="row.tdArray[2].text" ng-init="yes2=true" ng-readonly="yes2" ng-blur="yes2=true" ng-keydown="yes2=ctrl.checkKey( $event, yes2 )"></td>
<td class="col_id_start_date" ng-dblclick="yes3=!yes3"><input type="text" ng-model="row.tdArray[3].text" ng-init="yes3=true" ng-readonly="yes3" ng-blur="yes3=true" ng-keydown="yes3=ctrl.checkKey( $event, yes3 )"></td>
<td class="col_id_responsible" ng-dblclick="yes4=!yes4"><input type="text" ng-model="row.tdArray[4].text" ng-init="yes4=true" ng-readonly="yes4" ng-blur="yes4=true" ng-keydown="yes4=ctrl.checkKey( $event, yes4 )"></td>
<td class="col_id_status" ng-dblclick="yes5=!yes5"><input type="text" ng-model="row.tdArray[5].text" ng-init="yes5=true" ng-readonly="yes5" ng-blur="yes5=true" ng-keydown="yes5=ctrl.checkKey( $event, yes5 )"></td>
<td class="add-new-row" ng-click="ctrl.addRow( row.id )"><img src="img/plus.png" alt="Add a new row" title="Add a new row after the current one"></td>
<td class="delete-row" ng-click="ctrl.deleteRow( row.id )"><img src="img/delete.png" alt="Delete this row" title="Delete this row"></td>
</tr>
<tr ng-if="results.length === 0">
<td colspan="8" class="center-row" ng-click="ctrl.addRow( null )"><img src="img/plus.png" alt="Add a new row" title="Add a new row"> Add a new row</td>
</tr>
</tbody>
</table>
</body>
</html>