Mercurial > nebulaweb3
comparison default/node_modules/jquery-tabledit/jquery.tabledit.js @ 0:1d038bc9b3d2 default tip
Up:default
author | Liny <dev@neowd.com> |
---|---|
date | Sat, 31 May 2025 09:21:51 +0800 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:1d038bc9b3d2 |
---|---|
1 /*! | |
2 * Tabledit v1.2.3 (https://github.com/markcell/jQuery-Tabledit) | |
3 * Copyright (c) 2015 Celso Marques | |
4 * Licensed under MIT (https://github.com/markcell/jQuery-Tabledit/blob/master/LICENSE) | |
5 */ | |
6 | |
7 /** | |
8 * @description Inline editor for HTML tables compatible with Bootstrap | |
9 * @version 1.2.3 | |
10 * @author Celso Marques | |
11 */ | |
12 | |
13 if (typeof jQuery === 'undefined') { | |
14 throw new Error('Tabledit requires jQuery library.'); | |
15 } | |
16 | |
17 (function($) { | |
18 'use strict'; | |
19 | |
20 $.fn.Tabledit = function(options) { | |
21 if (!this.is('table')) { | |
22 throw new Error('Tabledit only works when applied to a table.'); | |
23 } | |
24 | |
25 var $table = this; | |
26 | |
27 var defaults = { | |
28 url: window.location.href, | |
29 inputClass: 'form-control input-sm', | |
30 toolbarClass: 'btn-toolbar', | |
31 groupClass: 'btn-group btn-group-sm', | |
32 dangerClass: 'danger', | |
33 warningClass: 'warning', | |
34 mutedClass: 'text-muted', | |
35 eventType: 'click', | |
36 rowIdentifier: 'id', | |
37 hideIdentifier: false, | |
38 autoFocus: true, | |
39 editButton: true, | |
40 deleteButton: true, | |
41 saveButton: true, | |
42 restoreButton: true, | |
43 buttons: { | |
44 edit: { | |
45 class: 'btn btn-sm btn-default', | |
46 html: '<span class="glyphicon glyphicon-pencil"></span>', | |
47 action: 'edit' | |
48 }, | |
49 delete: { | |
50 class: 'btn btn-sm btn-default', | |
51 html: '<span class="glyphicon glyphicon-trash"></span>', | |
52 action: 'delete' | |
53 }, | |
54 save: { | |
55 class: 'btn btn-sm btn-success', | |
56 html: 'Save' | |
57 }, | |
58 restore: { | |
59 class: 'btn btn-sm btn-warning', | |
60 html: 'Restore', | |
61 action: 'restore' | |
62 }, | |
63 confirm: { | |
64 class: 'btn btn-sm btn-danger', | |
65 html: 'Confirm' | |
66 } | |
67 }, | |
68 onDraw: function() { return; }, | |
69 onSuccess: function() { return; }, | |
70 onFail: function() { return; }, | |
71 onAlways: function() { return; }, | |
72 onAjax: function() { return; } | |
73 }; | |
74 | |
75 var settings = $.extend(true, defaults, options); | |
76 | |
77 var $lastEditedRow = 'undefined'; | |
78 var $lastDeletedRow = 'undefined'; | |
79 var $lastRestoredRow = 'undefined'; | |
80 | |
81 /** | |
82 * Draw Tabledit structure (identifier column, editable columns, toolbar column). | |
83 * | |
84 * @type {object} | |
85 */ | |
86 var Draw = { | |
87 columns: { | |
88 identifier: function() { | |
89 // Hide identifier column. | |
90 if (settings.hideIdentifier) { | |
91 $table.find('th:nth-child(' + parseInt(settings.columns.identifier[0]) + 1 + '), tbody td:nth-child(' + parseInt(settings.columns.identifier[0]) + 1 + ')').hide(); | |
92 } | |
93 | |
94 var $td = $table.find('tbody td:nth-child(' + (parseInt(settings.columns.identifier[0]) + 1) + ')'); | |
95 | |
96 $td.each(function() { | |
97 // Create hidden input with row identifier. | |
98 var span = '<span class="tabledit-span tabledit-identifier">' + $(this).text() + '</span>'; | |
99 var input = '<input class="tabledit-input tabledit-identifier" type="hidden" name="' + settings.columns.identifier[1] + '" value="' + $(this).text() + '" disabled>'; | |
100 | |
101 // Add elements to table cell. | |
102 $(this).html(span + input); | |
103 | |
104 // Add attribute "id" to table row. | |
105 $(this).parent('tr').attr(settings.rowIdentifier, $(this).text()); | |
106 }); | |
107 }, | |
108 editable: function() { | |
109 for (var i = 0; i < settings.columns.editable.length; i++) { | |
110 var $td = $table.find('tbody td:nth-child(' + (parseInt(settings.columns.editable[i][0]) + 1) + ')'); | |
111 | |
112 $td.each(function() { | |
113 // Get text of this cell. | |
114 var text = $(this).text(); | |
115 | |
116 // Add pointer as cursor. | |
117 if (!settings.editButton) { | |
118 $(this).css('cursor', 'pointer'); | |
119 } | |
120 | |
121 // Create span element. | |
122 var span = '<span class="tabledit-span">' + text + '</span>'; | |
123 | |
124 // Check if exists the third parameter of editable array. | |
125 if (typeof settings.columns.editable[i][2] !== 'undefined') { | |
126 // Create select element. | |
127 var input = '<select class="tabledit-input ' + settings.inputClass + '" name="' + settings.columns.editable[i][1] + '" style="display: none;" disabled>'; | |
128 | |
129 // Create options for select element. | |
130 $.each(jQuery.parseJSON(settings.columns.editable[i][2]), function(index, value) { | |
131 if (text === value) { | |
132 input += '<option value="' + index + '" selected>' + value + '</option>'; | |
133 } else { | |
134 input += '<option value="' + index + '">' + value + '</option>'; | |
135 } | |
136 }); | |
137 | |
138 // Create last piece of select element. | |
139 input += '</select>'; | |
140 } else { | |
141 // Create text input element. | |
142 var input = '<input class="tabledit-input ' + settings.inputClass + '" type="text" name="' + settings.columns.editable[i][1] + '" value="' + $(this).text() + '" style="display: none;" disabled>'; | |
143 } | |
144 | |
145 // Add elements and class "view" to table cell. | |
146 $(this).html(span + input); | |
147 $(this).addClass('tabledit-view-mode'); | |
148 }); | |
149 } | |
150 }, | |
151 toolbar: function() { | |
152 if (settings.editButton || settings.deleteButton) { | |
153 var editButton = ''; | |
154 var deleteButton = ''; | |
155 var saveButton = ''; | |
156 var restoreButton = ''; | |
157 var confirmButton = ''; | |
158 | |
159 // Add toolbar column header if not exists. | |
160 if ($table.find('th.tabledit-toolbar-column').length === 0) { | |
161 $table.find('tr:first').append('<th class="tabledit-toolbar-column"></th>'); | |
162 } | |
163 | |
164 // Create edit button. | |
165 if (settings.editButton) { | |
166 editButton = '<button type="button" class="tabledit-edit-button ' + settings.buttons.edit.class + '" style="float: none;">' + settings.buttons.edit.html + '</button>'; | |
167 } | |
168 | |
169 // Create delete button. | |
170 if (settings.deleteButton) { | |
171 deleteButton = '<button type="button" class="tabledit-delete-button ' + settings.buttons.delete.class + '" style="float: none;">' + settings.buttons.delete.html + '</button>'; | |
172 confirmButton = '<button type="button" class="tabledit-confirm-button ' + settings.buttons.confirm.class + '" style="display: none; float: none;">' + settings.buttons.confirm.html + '</button>'; | |
173 } | |
174 | |
175 // Create save button. | |
176 if (settings.editButton && settings.saveButton) { | |
177 saveButton = '<button type="button" class="tabledit-save-button ' + settings.buttons.save.class + '" style="display: none; float: none;">' + settings.buttons.save.html + '</button>'; | |
178 } | |
179 | |
180 // Create restore button. | |
181 if (settings.deleteButton && settings.restoreButton) { | |
182 restoreButton = '<button type="button" class="tabledit-restore-button ' + settings.buttons.restore.class + '" style="display: none; float: none;">' + settings.buttons.restore.html + '</button>'; | |
183 } | |
184 | |
185 var toolbar = '<div class="tabledit-toolbar ' + settings.toolbarClass + '" style="text-align: left;">\n\ | |
186 <div class="' + settings.groupClass + '" style="float: none;">' + editButton + deleteButton + '</div>\n\ | |
187 ' + saveButton + '\n\ | |
188 ' + confirmButton + '\n\ | |
189 ' + restoreButton + '\n\ | |
190 </div></div>'; | |
191 | |
192 // Add toolbar column cells. | |
193 $table.find('tbody>tr').append('<td style="white-space: nowrap; width: 1%;">' + toolbar + '</td>'); | |
194 } | |
195 } | |
196 } | |
197 }; | |
198 | |
199 /** | |
200 * Change to view mode or edit mode with table td element as parameter. | |
201 * | |
202 * @type object | |
203 */ | |
204 var Mode = { | |
205 view: function(td) { | |
206 // Get table row. | |
207 var $tr = $(td).parent('tr'); | |
208 // Disable identifier. | |
209 $(td).parent('tr').find('.tabledit-input.tabledit-identifier').prop('disabled', true); | |
210 // Hide and disable input element. | |
211 $(td).find('.tabledit-input').blur().hide().prop('disabled', true); | |
212 // Show span element. | |
213 $(td).find('.tabledit-span').show(); | |
214 // Add "view" class and remove "edit" class in td element. | |
215 $(td).addClass('tabledit-view-mode').removeClass('tabledit-edit-mode'); | |
216 // Update toolbar buttons. | |
217 if (settings.editButton) { | |
218 $tr.find('button.tabledit-save-button').hide(); | |
219 $tr.find('button.tabledit-edit-button').removeClass('active').blur(); | |
220 } | |
221 }, | |
222 edit: function(td) { | |
223 Delete.reset(td); | |
224 // Get table row. | |
225 var $tr = $(td).parent('tr'); | |
226 // Enable identifier. | |
227 $tr.find('.tabledit-input.tabledit-identifier').prop('disabled', false); | |
228 // Hide span element. | |
229 $(td).find('.tabledit-span').hide(); | |
230 // Get input element. | |
231 var $input = $(td).find('.tabledit-input'); | |
232 // Enable and show input element. | |
233 $input.prop('disabled', false).show(); | |
234 // Focus on input element. | |
235 if (settings.autoFocus) { | |
236 $input.focus(); | |
237 } | |
238 // Add "edit" class and remove "view" class in td element. | |
239 $(td).addClass('tabledit-edit-mode').removeClass('tabledit-view-mode'); | |
240 // Update toolbar buttons. | |
241 if (settings.editButton) { | |
242 $tr.find('button.tabledit-edit-button').addClass('active'); | |
243 $tr.find('button.tabledit-save-button').show(); | |
244 } | |
245 } | |
246 }; | |
247 | |
248 /** | |
249 * Available actions for edit function, with table td element as parameter or set of td elements. | |
250 * | |
251 * @type object | |
252 */ | |
253 var Edit = { | |
254 reset: function(td) { | |
255 $(td).each(function() { | |
256 // Get input element. | |
257 var $input = $(this).find('.tabledit-input'); | |
258 // Get span text. | |
259 var text = $(this).find('.tabledit-span').text(); | |
260 // Set input/select value with span text. | |
261 if ($input.is('select')) { | |
262 $input.find('option').filter(function() { | |
263 return $.trim($(this).text()) === text; | |
264 }).attr('selected', true); | |
265 } else { | |
266 $input.val(text); | |
267 } | |
268 // Change to view mode. | |
269 Mode.view(this); | |
270 }); | |
271 }, | |
272 submit: function(td) { | |
273 // Send AJAX request to server. | |
274 var ajaxResult = ajax(settings.buttons.edit.action); | |
275 | |
276 if (ajaxResult === false) { | |
277 return; | |
278 } | |
279 | |
280 $(td).each(function() { | |
281 // Get input element. | |
282 var $input = $(this).find('.tabledit-input'); | |
283 // Set span text with input/select new value. | |
284 if ($input.is('select')) { | |
285 $(this).find('.tabledit-span').text($input.find('option:selected').text()); | |
286 } else { | |
287 $(this).find('.tabledit-span').text($input.val()); | |
288 } | |
289 // Change to view mode. | |
290 Mode.view(this); | |
291 }); | |
292 | |
293 // Set last edited column and row. | |
294 $lastEditedRow = $(td).parent('tr'); | |
295 } | |
296 }; | |
297 | |
298 /** | |
299 * Available actions for delete function, with button as parameter. | |
300 * | |
301 * @type object | |
302 */ | |
303 var Delete = { | |
304 reset: function(td) { | |
305 // Reset delete button to initial status. | |
306 $table.find('.tabledit-confirm-button').hide(); | |
307 // Remove "active" class in delete button. | |
308 $table.find('.tabledit-delete-button').removeClass('active').blur(); | |
309 }, | |
310 submit: function(td) { | |
311 Delete.reset(td); | |
312 // Enable identifier hidden input. | |
313 $(td).parent('tr').find('input.tabledit-identifier').attr('disabled', false); | |
314 // Send AJAX request to server. | |
315 var ajaxResult = ajax(settings.buttons.delete.action); | |
316 // Disable identifier hidden input. | |
317 $(td).parents('tr').find('input.tabledit-identifier').attr('disabled', true); | |
318 | |
319 if (ajaxResult === false) { | |
320 return; | |
321 } | |
322 | |
323 // Add class "deleted" to row. | |
324 $(td).parent('tr').addClass('tabledit-deleted-row'); | |
325 // Hide table row. | |
326 $(td).parent('tr').addClass(settings.mutedClass).find('.tabledit-toolbar button:not(.tabledit-restore-button)').attr('disabled', true); | |
327 // Show restore button. | |
328 $(td).find('.tabledit-restore-button').show(); | |
329 // Set last deleted row. | |
330 $lastDeletedRow = $(td).parent('tr'); | |
331 }, | |
332 confirm: function(td) { | |
333 // Reset all cells in edit mode. | |
334 $table.find('td.tabledit-edit-mode').each(function() { | |
335 Edit.reset(this); | |
336 }); | |
337 // Add "active" class in delete button. | |
338 $(td).find('.tabledit-delete-button').addClass('active'); | |
339 // Show confirm button. | |
340 $(td).find('.tabledit-confirm-button').show(); | |
341 }, | |
342 restore: function(td) { | |
343 // Enable identifier hidden input. | |
344 $(td).parent('tr').find('input.tabledit-identifier').attr('disabled', false); | |
345 // Send AJAX request to server. | |
346 var ajaxResult = ajax(settings.buttons.restore.action); | |
347 // Disable identifier hidden input. | |
348 $(td).parents('tr').find('input.tabledit-identifier').attr('disabled', true); | |
349 | |
350 if (ajaxResult === false) { | |
351 return; | |
352 } | |
353 | |
354 // Remove class "deleted" to row. | |
355 $(td).parent('tr').removeClass('tabledit-deleted-row'); | |
356 // Hide table row. | |
357 $(td).parent('tr').removeClass(settings.mutedClass).find('.tabledit-toolbar button').attr('disabled', false); | |
358 // Hide restore button. | |
359 $(td).find('.tabledit-restore-button').hide(); | |
360 // Set last restored row. | |
361 $lastRestoredRow = $(td).parent('tr'); | |
362 } | |
363 }; | |
364 | |
365 /** | |
366 * Send AJAX request to server. | |
367 * | |
368 * @param {string} action | |
369 */ | |
370 function ajax(action) | |
371 { | |
372 var serialize = $table.find('.tabledit-input').serialize() + '&action=' + action; | |
373 | |
374 var result = settings.onAjax(action, serialize); | |
375 | |
376 if (result === false) { | |
377 return false; | |
378 } | |
379 | |
380 var jqXHR = $.post(settings.url, serialize, function(data, textStatus, jqXHR) { | |
381 if (action === settings.buttons.edit.action) { | |
382 $lastEditedRow.removeClass(settings.dangerClass).addClass(settings.warningClass); | |
383 setTimeout(function() { | |
384 //$lastEditedRow.removeClass(settings.warningClass); | |
385 $table.find('tr.' + settings.warningClass).removeClass(settings.warningClass); | |
386 }, 1400); | |
387 } | |
388 | |
389 settings.onSuccess(data, textStatus, jqXHR); | |
390 }, 'json'); | |
391 | |
392 jqXHR.fail(function(jqXHR, textStatus, errorThrown) { | |
393 if (action === settings.buttons.delete.action) { | |
394 $lastDeletedRow.removeClass(settings.mutedClass).addClass(settings.dangerClass); | |
395 $lastDeletedRow.find('.tabledit-toolbar button').attr('disabled', false); | |
396 $lastDeletedRow.find('.tabledit-toolbar .tabledit-restore-button').hide(); | |
397 } else if (action === settings.buttons.edit.action) { | |
398 $lastEditedRow.addClass(settings.dangerClass); | |
399 } | |
400 | |
401 settings.onFail(jqXHR, textStatus, errorThrown); | |
402 }); | |
403 | |
404 jqXHR.always(function() { | |
405 settings.onAlways(); | |
406 }); | |
407 | |
408 return jqXHR; | |
409 } | |
410 | |
411 Draw.columns.identifier(); | |
412 Draw.columns.editable(); | |
413 Draw.columns.toolbar(); | |
414 | |
415 settings.onDraw(); | |
416 | |
417 if (settings.deleteButton) { | |
418 /** | |
419 * Delete one row. | |
420 * | |
421 * @param {object} event | |
422 */ | |
423 $table.on('click', 'button.tabledit-delete-button', function(event) { | |
424 if (event.handled !== true) { | |
425 event.preventDefault(); | |
426 | |
427 // Get current state before reset to view mode. | |
428 var activated = $(this).hasClass('active'); | |
429 | |
430 var $td = $(this).parents('td'); | |
431 | |
432 Delete.reset($td); | |
433 | |
434 if (!activated) { | |
435 Delete.confirm($td); | |
436 } | |
437 | |
438 event.handled = true; | |
439 } | |
440 }); | |
441 | |
442 /** | |
443 * Delete one row (confirm). | |
444 * | |
445 * @param {object} event | |
446 */ | |
447 $table.on('click', 'button.tabledit-confirm-button', function(event) { | |
448 if (event.handled !== true) { | |
449 event.preventDefault(); | |
450 | |
451 var $td = $(this).parents('td'); | |
452 | |
453 Delete.submit($td); | |
454 | |
455 event.handled = true; | |
456 } | |
457 }); | |
458 } | |
459 | |
460 if (settings.restoreButton) { | |
461 /** | |
462 * Restore one row. | |
463 * | |
464 * @param {object} event | |
465 */ | |
466 $table.on('click', 'button.tabledit-restore-button', function(event) { | |
467 if (event.handled !== true) { | |
468 event.preventDefault(); | |
469 | |
470 Delete.restore($(this).parents('td')); | |
471 | |
472 event.handled = true; | |
473 } | |
474 }); | |
475 } | |
476 | |
477 if (settings.editButton) { | |
478 /** | |
479 * Activate edit mode on all columns. | |
480 * | |
481 * @param {object} event | |
482 */ | |
483 $table.on('click', 'button.tabledit-edit-button', function(event) { | |
484 if (event.handled !== true) { | |
485 event.preventDefault(); | |
486 | |
487 var $button = $(this); | |
488 | |
489 // Get current state before reset to view mode. | |
490 var activated = $button.hasClass('active'); | |
491 | |
492 // Change to view mode columns that are in edit mode. | |
493 Edit.reset($table.find('td.tabledit-edit-mode')); | |
494 | |
495 if (!activated) { | |
496 // Change to edit mode for all columns in reverse way. | |
497 $($button.parents('tr').find('td.tabledit-view-mode').get().reverse()).each(function() { | |
498 Mode.edit(this); | |
499 }); | |
500 } | |
501 | |
502 event.handled = true; | |
503 } | |
504 }); | |
505 | |
506 /** | |
507 * Save edited row. | |
508 * | |
509 * @param {object} event | |
510 */ | |
511 $table.on('click', 'button.tabledit-save-button', function(event) { | |
512 if (event.handled !== true) { | |
513 event.preventDefault(); | |
514 | |
515 // Submit and update all columns. | |
516 Edit.submit($(this).parents('tr').find('td.tabledit-edit-mode')); | |
517 | |
518 event.handled = true; | |
519 } | |
520 }); | |
521 } else { | |
522 /** | |
523 * Change to edit mode on table td element. | |
524 * | |
525 * @param {object} event | |
526 */ | |
527 $table.on(settings.eventType, 'tr:not(.tabledit-deleted-row) td.tabledit-view-mode', function(event) { | |
528 if (event.handled !== true) { | |
529 event.preventDefault(); | |
530 | |
531 // Reset all td's in edit mode. | |
532 Edit.reset($table.find('td.tabledit-edit-mode')); | |
533 | |
534 // Change to edit mode. | |
535 Mode.edit(this); | |
536 | |
537 event.handled = true; | |
538 } | |
539 }); | |
540 | |
541 /** | |
542 * Change event when input is a select element. | |
543 */ | |
544 $table.on('change', 'select.tabledit-input:visible', function() { | |
545 if (event.handled !== true) { | |
546 // Submit and update the column. | |
547 Edit.submit($(this).parent('td')); | |
548 | |
549 event.handled = true; | |
550 } | |
551 }); | |
552 | |
553 /** | |
554 * Click event on document element. | |
555 * | |
556 * @param {object} event | |
557 */ | |
558 $(document).on('click', function(event) { | |
559 var $editMode = $table.find('.tabledit-edit-mode'); | |
560 // Reset visible edit mode column. | |
561 if (!$editMode.is(event.target) && $editMode.has(event.target).length === 0) { | |
562 Edit.reset($table.find('.tabledit-input:visible').parent('td')); | |
563 } | |
564 }); | |
565 } | |
566 | |
567 /** | |
568 * Keyup event on document element. | |
569 * | |
570 * @param {object} event | |
571 */ | |
572 $(document).on('keyup', function(event) { | |
573 // Get input element with focus or confirmation button. | |
574 var $input = $table.find('.tabledit-input:visible'); | |
575 var $button = $table.find('.tabledit-confirm-button'); | |
576 | |
577 if ($input.length > 0) { | |
578 var $td = $input.parents('td'); | |
579 } else if ($button.length > 0) { | |
580 var $td = $button.parents('td'); | |
581 } else { | |
582 return; | |
583 } | |
584 | |
585 // Key? | |
586 switch (event.keyCode) { | |
587 case 9: // Tab. | |
588 if (!settings.editButton) { | |
589 Edit.submit($td); | |
590 Mode.edit($td.closest('td').next()); | |
591 } | |
592 break; | |
593 case 13: // Enter. | |
594 Edit.submit($td); | |
595 break; | |
596 case 27: // Escape. | |
597 Edit.reset($td); | |
598 Delete.reset($td); | |
599 break; | |
600 } | |
601 }); | |
602 | |
603 return this; | |
604 }; | |
605 }(jQuery)); |