forked from brenthamby/parse-javascript-datatable
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (158 loc) · 4.69 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
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.0.4.min.js"></script>
<script src="js/ParseTable.js"></script>
<link href="css/parse-table.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function(){
var applicationId = ""
var javaScriptKey = ""
var tableName = ""
if(!applicationId || !javaScriptKey || !tableName){
alert("to try this out please enter your parse.com credentials:"
+"\n\napplicationId"
+"\n\njavaScriptKey"
+"\n\ntableName"
+"\n\n"
);
return;
}
Parse.initialize(
applicationId,
javaScriptKey
);
pt = new ParseTable({
el : $("#table"),
parseObjName : tableName,
deletable : true,
editable : true,
cols : [],
/*
displayInterceptors:{
City : function(d){
return d.substring(0,4)+"..."
}
},
editInterceptors:{
State : function(obj){
var target = obj.el; // DOM ref to the cell
var parseObj = obj.parseObj; // parse instance
var col = obj.col; // column name in question
var val = target.data("rawdata"); // raw data (diff if was displayIntercepted)
var myEdit = $("<select class='pt_edit'><option>CA<option>NY<option>VT</select>")
.val(target.html().trim()).change(function(){
parseObj.set(obj.col,$(this).val())
parseObj.save()
pt.editing=false
pt.render()
})
target.append(myEdit)
}
}
*/
})
})
</script>
</head>
<body>
<h1>Parse Data Table</h1>
<hr>
<p>
This is a simple flexible library that allows you to view and edit your parse.com
data in a tabular format. You can set the table to be editable and/or deletable.
For basic types the editing is very simple, you just click on the field and a little
editor appears. For complex types and for large amounts of data in a single cell
there are interceptor functions that allow you to handle the display of the data and
the method for updating, e.g. for Date types you might intercept the up event and
provide your favorite Datepicker. Here is a quick run down of the features:
<ul>
<li>pagable and sortable tabular interface</li>
<li>interceptor design pattern for adding custom display and update features</li>
<li>only 200 lines of code</li>
<li>relies on jquery, underscore, underscore templates and of course parse</li>
</ul>
</p>
<div id="table"></div>
<!--
container template that holds the table
-->
<script type="text/template" class="pt_table_container">
<div class=pt_container>
<div class=pt_controls id=pt_controls<%- rc.id %>>
<img src='images/spinny.gif' id=pt_controls_loading<%- rc.id %>>
<button id=pt_controls_prev<%- rc.id %>>prev</button>
<button id=pt_controls_next<%- rc.id %>>next</button>
<select id=pt_controls_size<%- rc.id %>>
<option>2</option>
<option>3</option>
<option>5</option>
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
<option>100</option>
</select>
page : <span id=pt_controls_page<%- rc.id %>><%- rc.page %></span>
</div>
<table id=pt_table<%- rc.id %>></table>
</div>
</script>
<!--
template that holds the column (headers)
-->
<script type="text/template" class="pt_table_data_headers">
<thead>
<tr class=top_row>
<% _.each(rc.cols, function(item){
var pretty = (item.replace( /([A-Z])/g, " $1" ))
pretty = pretty.charAt(0).toUpperCase() + pretty.slice(1);
%>
<th class=pt_header data-colname=<%=item%> data-sortorder=''><%- pretty %></th>
<% }) %>
<% if (rc.deletable) {%>
<td style="width:20px"></td>
<% } %>
</tr>
</thead>
<tbody>
</tbody>
</script>
<!--
template that holds the rows (data)
-->
<script type="text/template" class="pt_table_data">
<% var i=0; _.each(rc.rows, function(row){
var color = (i++)%2 ? "odd" : "even";
%>
<tr id=<%=row.id%> class=<%-color%>>
<% _.each(row.cells, function(item){
%>
<td>
<div data-rawdata='<%- item.rawdata %>' data-colname=<%- item.col %> class="pt_cell <% if (rc.editable) {%> js-editable<%}%>">
<%= item.display %>
</div>
</td>
<% }) %>
<% if (rc.deletable) {%>
<td class=js-deletable><img src=images/del.png></td>
<% } %>
</tr>
<% }) %>
</script>
<!--
template for edit
-->
<script type="text/template" class="pt_table_cell_edit">
<div class="pt_edit">
<textarea><%= rc.value %></textarea>
<br>
<button class=js-save>save</button>
<button class=js-cancel>cancel</button>
</div>
</script>
</body>
</html>