forked from ssy341/datatables-cn
-
Notifications
You must be signed in to change notification settings - Fork 0
/
tomato.html
347 lines (302 loc) · 15.9 KB
/
tomato.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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:)</title>
<!--bootstrap css 样式文件-->
<link rel="stylesheet" href="./bootstrap/3.3.5/bootstrap.min.css">
<!-- datatables css 样式文件 bootstrap版-->
<link rel="stylesheet" href="./datatables/dataTables.bootstrap.css">
<!--buttons 样式文件-->
<link rel="stylesheet" href="./datatables/buttons.dataTables.min.css">
<style>
table.dataTable tbody tr.selected {
background-color: #b0bed9;
}
table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected {
background-color: #abb9d3;
}
table.dataTable.hover tbody tr:hover.selected,
table.dataTable.hover tbody tr.odd:hover.selected,
table.dataTable.hover tbody tr.even:hover.selected, table.dataTable.display tbody tr:hover.selected,
table.dataTable.display tbody tr.odd:hover.selected,
table.dataTable.display tbody tr.even:hover.selected {
background-color: #a9b7d1;
}
table.dataTable.order-column tbody tr.selected > .sorting_1,
table.dataTable.order-column tbody tr.selected > .sorting_2,
table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
table.dataTable.display tbody tr.selected > .sorting_2,
table.dataTable.display tbody tr.selected > .sorting_3 {
background-color: #acbad4;
}
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
background-color: #a6b3cd;
}
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
background-color: #a7b5ce;
}
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
background-color: #a9b6d0;
}
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
background-color: #acbad4;
}
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
background-color: #adbbd6;
}
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
background-color: #afbdd8;
}
table.dataTable.display tbody tr:hover.selected > .sorting_1,
table.dataTable.display tbody tr.odd:hover.selected > .sorting_1,
table.dataTable.display tbody tr.even:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_1,
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_1 {
background-color: #a1aec7;
}
table.dataTable.display tbody tr:hover.selected > .sorting_2,
table.dataTable.display tbody tr.odd:hover.selected > .sorting_2,
table.dataTable.display tbody tr.even:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_2,
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_2 {
background-color: #a2afc8;
}
table.dataTable.display tbody tr:hover.selected > .sorting_3,
table.dataTable.display tbody tr.odd:hover.selected > .sorting_3,
table.dataTable.display tbody tr.even:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_3,
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_3 {
background-color: #a4b2cb;
}
</style>
</head>
<body>
<p id="countTime"></p>
<!-- 主表 -->
<table class="table table-striped table-bordered dataTable no-footer" id="inlineEditDataTable">
</table>
<!-- 番茄钟配置 modal-->
<div class="modal fade" id="configModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="config">配置</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
按钮文字配置：
<div class="form-group">
<label for="saveButton" class="col-sm-2 control-label">保存</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="saveButton">
</div>
<label for="delButton" class="col-sm-2 control-label">删除</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="delButton">
</div>
<label for="editButton" class="col-sm-2 control-label">编辑</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="editButton">
</div>
<label for="doneButton" class="col-sm-2 control-label">完成</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="doneButton">
</div>
<label for="tomatoButton" class="col-sm-2 control-label">启动</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="tomatoButton">
</div>
<label for="addtomatoButton" class="col-sm-2 control-label">添加</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="addtomatoButton">
</div>
<label for="csvButton" class="col-sm-2 control-label">导出CSV</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="csvButton">
</div>
<label for="itemButton" class="col-sm-2 control-label">添加事项</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemButton">
</div>
<label for="itemFromButton" class="col-sm-2 control-label">从表格中添加事项</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemFromButton">
</div>
<label for="showButton" class="col-sm-2 control-label">显示完成项</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="showButton">
</div>
<label for="hideButton" class="col-sm-2 control-label">隐藏完成项</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="hideButton">
</div>
<label for="configButton" class="col-sm-2 control-label">配置</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="configButton">
</div>
</div>
列名配置：
<div class="form-group">
<label for="priorityColumn" class="col-sm-2 control-label">第一列</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="priorityColumn">
</div>
<label for="itemColumn" class="col-sm-2 control-label">第二列</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="itemColumn">
</div>
<label for="timeColumn" class="col-sm-2 control-label">第三列</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="timeColumn">
</div>
<label for="typeColumn" class="col-sm-2 control-label">第四列</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="typeColumn">
</div>
<label for="backgroundColorColumn" class="col-sm-2 control-label">第五列</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="backgroundColorColumn">
</div>
<label for="createDateColumn" class="col-sm-2 control-label">第六列</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="createDateColumn">
</div>
<label for="actionColumn" class="col-sm-2 control-label">第七列</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="actionColumn">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="">保存</button>
</div>
</div>
</div>
</div>
<!-- 常用数据表格 modal-->
<div class="modal fade" id="oftenModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="often">表格2</h4>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered dataTable no-footer" style="width:100%"
id="oftenDataTable">
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">我啥也不做</button>
</div>
</div>
</div>
</div>
<!-- 功能说明 Modal -->
<div class="modal fade" id="timeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="timeModalLabel">增加预估时间</h4>
</div>
<div class="modal-body">
<p>
哎哟！番茄用完了，任务还没有完成，不要紧你可以做再次预估
</p>
<p>
这是你第次预估，你还剩次预估
</p>
<p>
PS：总共可以做三次预估，如果三次预估的时间里都没有完成，即任务还需要分细
</p>
<div class="input-group">
<label for="timeInput">请输入预估时间：</label>
<input type="text" id="timeInput" >
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="addTomato()">增加预估</button>
</div>
</div>
</div>
</div>
<!-- 功能说明 Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">本例子说明</h4>
</div>
<div class="modal-body">
本例子有如下功能：
<ul>
<li>dom的应用</li>
<li>render的应用</li>
<li>是用本地静态数据（浏览器本地缓存），而非ajax取数</li>
<li>国际化</li>
<li>buttons的应用（自带按钮，自定义按钮【非dom添加】）</li>
<li>打印表格</li>
<li>导出表格为 csv/excel/pdf</li>
<li>复制表格数据到内存剪贴板</li>
<li>行内编辑保存</li>
<li>表格的增删改查</li>
<li>列显示隐藏</li>
<li>弹出模态框</li>
<li>时间格式化</li>
<li>填充行的背景色</li>
<li>值替换</li>
<li>行内生成select,input</li>
<li>数据从a表到b表</li>
<li>根据数据判断行是否显示或者隐藏</li>
</ul>
已知bug:
<ul>
<li>不能在隐藏列的情况下编辑，添加新行</li>
<li>导出pdf不支持中文，原因在于字体文件</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="alert('加群连接在底部哦:)')">加群给点意见吧！</button>
</div>
</div>
</div>
</div>
</body>
<!--jquery 核心库 -->
<script src="./js/jquery-2.0.0.js"></script>
<!--bootstrap js 核心库 -->
<script src="./bootstrap/3.3.5/bootstrap.min.js"></script>
<!--datatables js 核心库 -->
<script src="./datatables/jquery.dataTables.min.js"></script>
<!--是用buttons的基本js-->
<script src="./datatables/dataTables.buttons.min.js"></script>
<!--支持库-->
<script src="./datatables/jszip.min.js"></script>
<!--生成pdf需要的js-->
<script src="./datatables/pdfmake.min.js"></script>
<!--字体文件-->
<script src="./datatables/vfs_fonts.js"></script>
<!--buttons html5 支持 -->
<script src="./datatables/buttons.html5.min.js"></script>
<!--打印支持-->
<script src="./datatables/buttons.print.min.js"></script>
<!--buttons flash 支持 -->
<script src="./datatables/buttons.flash.min.js"></script>
<!--列显示隐藏js-->
<script src="./datatables/buttons.colVis.min.js"></script>
<!--tomato js-->
<script src="./js/tomato.js"></script>
</html>