|
0
|
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));
|
