2 * Create advanced table (resize, reorder, and show/hide columns; and also grid editing).
3 * This function is designed mainly for table DOM generated from browsing a table in the database.
4 * For using this function in other table DOM, you may need to:
5 * - add "draggable" class in the table header <th>, in order to make it resizable, sortable or hidable
6 * - have at least one non-"draggable" header in the table DOM for placing column visibility drop-down arrow
7 * - pass the value "false" for the parameter "enableGridEdit"
8 * - adjust other parameter value, to select which features that will be enabled
10 * @param t the table DOM element
11 * @param enableResize Optional, if false, column resizing feature will be disabled
12 * @param enableReorder Optional, if false, column reordering feature will be disabled
13 * @param enableVisib Optional, if false, show/hide column feature will be disabled
14 * @param enableGridEdit Optional, if false, grid editing feature will be disabled
16 function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdit) {
25 * Variables, assigned with default value, changed later
27 actionSpan: 5, // number of colspan in Actions header in a table
28 tableCreateTime: null, // table creation time, used for saving column order and visibility to server, only available in "Browse tab"
30 // Column reordering variables
31 colOrder: new Array(), // array of column order
33 // Column visibility variables
34 colVisib: new Array(), // array of column visibility
35 showAllColText: '', // string, text for "show all" button under column visibility list
36 visibleHeadersCount: 0, // number of visible data headers
38 // Table hint variables
39 qtip: null, // qtip API
40 reorderHint: '', // string, hint for column reordering
41 sortHint: '', // string, hint for column sorting
42 markHint: '', // string, hint for column marking
43 colVisibHint: '', // string, hint for column visibility drop-down
44 showReorderHint: false,
47 showColVisibHint: false,
50 isCellEditActive: false, // true if current focus is in edit cell
51 isEditCellTextEditable: false, // true if current edit cell is editable in the text input box (not textarea)
52 currentEditCell: null, // reference to <td> that currently being edited
53 cellEditHint: '', // hint shown when doing grid edit
54 gotoLinkText: '', // "Go to link" text
55 wasEditedCellNull: false, // true if last value of the edited cell was NULL
56 maxTruncatedLen: 0, // number of characters that can be displayed in a cell
57 saveCellsAtOnce: false, // $cfg[saveCellsAtOnce]
58 isCellEdited: false, // true if at least one cell has been edited
59 saveCellWarning: '', // string, warning text when user want to leave a page with unsaved edited data
60 lastXHR : null, // last XHR object used in AJAX request
61 isSaving: false, // true when currently saving edited data, used to handle double posting caused by pressing ENTER in grid edit text box in Chrome browser
62 alertNonUnique: '', // string, alert shown when saving edited nonunique table
64 // Common hidden inputs
76 * Start to resize column. Called when clicking on column separator.
79 * @param obj dragged div object
81 dragStartRsz: function(e, obj) {
82 var n = $(g.cRsz).find('div').index(obj); // get the index of separator (i.e., column index)
87 objLeft: $(obj).position().left,
88 objWidth: $(g.t).find('th.draggable:visible:eq(' + n + ') span').outerWidth()
90 $('body').css('cursor', 'col-resize');
92 if (g.isCellEditActive) {
98 * Start to reorder column. Called when clicking on table header.
101 * @param obj table header object
103 dragStartReorder: function(e, obj) {
104 // prepare the cCpy (column copy) and cPointer (column pointer) from the dragged column
105 $(g.cCpy).text($(obj).text());
106 var objPos = $(obj).position();
108 top: objPos.top + 20,
110 height: $(obj).height(),
111 width: $(obj).width()
117 // get the column index, zero-based
118 var n = g.getHeaderIdx(obj);
130 $('body').css('cursor', 'move');
131 $('body').noSelect();
132 if (g.isCellEditActive) {
138 * Handle mousemove event when dragging.
142 dragMove: function(e) {
144 var dx = e.pageX - g.colRsz.x0;
145 if (g.colRsz.objWidth + dx > g.minColWidth) {
146 $(g.colRsz.obj).css('left', g.colRsz.objLeft + dx + 'px');
148 } else if (g.colReorder) {
149 // dragged column animation
150 var dx = e.pageX - g.colReorder.x0;
152 .css('left', g.colReorder.objLeft + dx)
156 var hoveredCol = g.getHoveredCol(e);
158 var newn = g.getHeaderIdx(hoveredCol);
159 g.colReorder.newn = newn;
160 if (newn != g.colReorder.n) {
161 // show the column pointer in the right place
162 var colPos = $(hoveredCol).position();
163 var newleft = newn < g.colReorder.n ?
165 colPos.left + $(hoveredCol).outerWidth();
169 visibility: 'visible'
172 // no movement to other column, hide the column pointer
173 $(g.cPointer).css('visibility', 'hidden');
180 * Stop the dragging action.
184 dragEnd: function(e) {
186 var dx = e.pageX - g.colRsz.x0;
187 var nw = g.colRsz.objWidth + dx;
188 if (nw < g.minColWidth) {
198 } else if (g.colReorder) {
200 if (g.colReorder.newn != g.colReorder.n) {
201 g.shiftCol(g.colReorder.n, g.colReorder.newn);
202 // assign new position
203 var objPos = $(g.colReorder.obj).position();
204 g.colReorder.objTop = objPos.top;
205 g.colReorder.objLeft = objPos.left;
206 g.colReorder.n = g.colReorder.newn;
207 // send request to server to remember the column order
208 if (g.tableCreateTime) {
211 g.refreshRestoreButton();
214 // animate new column position
215 $(g.cCpy).stop(true, true)
217 top: g.colReorder.objTop,
218 left: g.colReorder.objLeft
221 $(g.cPointer).css('visibility', 'hidden');
223 g.colReorder = false;
225 $('body').css('cursor', 'inherit');
226 $('body').noSelect(false);
230 * Resize column n to new width "nw"
232 * @param n zero-based column index
233 * @param nw new width of the column in pixel
235 resize: function(n, nw) {
236 $(g.t).find('tr').each(function() {
237 $(this).find('th.draggable:visible:eq(' + n + ') span,' +
238 'td:visible:eq(' + (g.actionSpan + n) + ') span')
244 * Reposition column resize bars.
246 reposRsz: function() {
247 $(g.cRsz).find('div').hide();
248 var $firstRowCols = $(g.t).find('tr:first th.draggable:visible');
249 for (var n = 0; n < $firstRowCols.length; n++) {
250 var $col = $($firstRowCols[n]);
251 $cb = $(g.cRsz).find('div:eq(' + n + ')'); // column border
252 $cb.css('left', $col.position().left + $col.outerWidth(true))
255 $(g.cRsz).css('height', $(g.t).height());
259 * Shift column from index oldn to newn.
261 * @param oldn old zero-based column index
262 * @param newn new zero-based column index
264 shiftCol: function(oldn, newn) {
265 $(g.t).find('tr').each(function() {
267 $(this).find('th.draggable:eq(' + newn + '),' +
268 'td:eq(' + (g.actionSpan + newn) + ')')
269 .before($(this).find('th.draggable:eq(' + oldn + '),' +
270 'td:eq(' + (g.actionSpan + oldn) + ')'));
272 $(this).find('th.draggable:eq(' + newn + '),' +
273 'td:eq(' + (g.actionSpan + newn) + ')')
274 .after($(this).find('th.draggable:eq(' + oldn + '),' +
275 'td:eq(' + (g.actionSpan + oldn) + ')'));
278 // reposition the column resize bars
281 // adjust the column visibility list
283 $(g.cList).find('.lDiv div:eq(' + newn + ')')
284 .before($(g.cList).find('.lDiv div:eq(' + oldn + ')'));
286 $(g.cList).find('.lDiv div:eq(' + newn + ')')
287 .after($(g.cList).find('.lDiv div:eq(' + oldn + ')'));
289 // adjust the colOrder
290 var tmp = g.colOrder[oldn];
291 g.colOrder.splice(oldn, 1);
292 g.colOrder.splice(newn, 0, tmp);
293 // adjust the colVisib
294 if (g.colVisib.length > 0) {
295 var tmp = g.colVisib[oldn];
296 g.colVisib.splice(oldn, 1);
297 g.colVisib.splice(newn, 0, tmp);
302 * Find currently hovered table column's header (excluding actions column).
305 * @return the hovered column's th object or undefined if no hovered column found.
307 getHoveredCol: function(e) {
309 $headers = $(g.t).find('th.draggable:visible');
310 $headers.each(function() {
311 var left = $(this).offset().left;
312 var right = left + $(this).outerWidth();
313 if (left <= e.pageX && e.pageX <= right) {
321 * Get a zero-based index from a <th class="draggable"> tag in a table.
323 * @param obj table header <th> object
324 * @return zero-based index of the specified table header in the set of table headers (visible or not)
326 getHeaderIdx: function(obj) {
327 return $(obj).parents('tr').find('th.draggable').index(obj);
331 * Reposition the columns back to normal order.
333 restoreColOrder: function() {
334 // use insertion sort, since we already have shiftCol function
335 for (var i = 1; i < g.colOrder.length; i++) {
336 var x = g.colOrder[i];
338 while (j >= 0 && x < g.colOrder[j]) {
342 g.shiftCol(i, j + 1);
345 if (g.tableCreateTime) {
346 // send request to server to remember the column order
349 g.refreshRestoreButton();
353 * Send column preferences (column order and visibility) to the server.
355 sendColPrefs: function() {
356 if ($(g.t).is('.ajax')) { // only send preferences if AjaxEnable is true
364 table_create_time: g.tableCreateTime
366 if (g.colOrder.length > 0) {
367 $.extend(post_params, { col_order: g.colOrder.toString() });
369 if (g.colVisib.length > 0) {
370 $.extend(post_params, { col_visib: g.colVisib.toString() });
372 $.post('sql.php', post_params, function(data) {
373 if (data.success != true) {
374 var $temp_div = $(document.createElement('div'));
375 $temp_div.html(data.error);
376 $temp_div.addClass("error");
377 PMA_ajaxShowMessage($temp_div);
384 * Refresh restore button state.
385 * Make restore button disabled if the table is similar with initial state.
387 refreshRestoreButton: function() {
388 // check if table state is as initial state
389 var isInitial = true;
390 for (var i = 0; i < g.colOrder.length; i++) {
391 if (g.colOrder[i] != i) {
396 // check if only one visible column left
397 var isOneColumn = g.visibleHeadersCount == 1;
398 // enable or disable restore button
399 if (isInitial || isOneColumn) {
400 $('.restore_column').hide();
402 $('.restore_column').show();
407 * Update current hint using the boolean values (showReorderHint, showSortHint, etc.).
408 * It will hide the hint if all the boolean values is false.
412 updateHint: function(e) {
413 if (!g.colRsz && !g.colReorder) { // if not resizing or dragging
415 if (g.showReorderHint && g.reorderHint) {
416 text += g.reorderHint;
418 if (g.showSortHint && g.sortHint) {
419 text += text.length > 0 ? '<br />' : '';
422 if (g.showMarkHint && g.markHint &&
423 !g.showSortHint // we do not show mark hint, when sort hint is shown
425 text += text.length > 0 ? '<br />' : '';
428 if (g.showColVisibHint && g.colVisibHint) {
429 text += text.length > 0 ? '<br />' : '';
430 text += g.colVisibHint;
433 // hide the hint if no text and the event is mouseenter
434 g.qtip.disable(!text && e.type == 'mouseenter');
436 g.qtip.updateContent(text, false);
442 hideHint: function() {
445 g.qtip.disable(true);
450 * Toggle column's visibility.
451 * After calling this function and it returns true, afterToggleCol() must be called.
453 * @return boolean True if the column is toggled successfully.
455 toggleCol: function(n) {
457 // can hide if more than one column is visible
458 if (g.visibleHeadersCount > 1) {
459 $(g.t).find('tr').each(function() {
460 $(this).find('th.draggable:eq(' + n + '),' +
461 'td:eq(' + (g.actionSpan + n) + ')')
465 $(g.cList).find('.lDiv div:eq(' + n + ') input').removeAttr('checked');
467 // cannot hide, force the checkbox to stay checked
468 $(g.cList).find('.lDiv div:eq(' + n + ') input').attr('checked', 'checked');
471 } else { // column n is not visible
472 $(g.t).find('tr').each(function() {
473 $(this).find('th.draggable:eq(' + n + '),' +
474 'td:eq(' + (g.actionSpan + n) + ')')
478 $(g.cList).find('.lDiv div:eq(' + n + ') input').attr('checked', 'checked');
484 * This must be called if toggleCol() returns is true.
486 * This function is separated from toggleCol because, sometimes, we want to toggle
487 * some columns together at one time and do just one adjustment after it, e.g. in showAllColumns().
489 afterToggleCol: function() {
490 // some adjustments after hiding column
495 // check visible first row headers count
496 g.visibleHeadersCount = $(g.t).find('tr:first th.draggable:visible').length;
497 g.refreshRestoreButton();
501 * Show columns' visibility list.
503 * @param obj The drop down arrow of column visibility list
505 showColList: function(obj) {
506 // only show when not resizing or reordering
507 if (!g.colRsz && !g.colReorder) {
508 var pos = $(obj).position();
509 // check if the list position is too right
510 if (pos.left + $(g.cList).outerWidth(true) > $(document).width()) {
511 pos.left = $(document).width() - $(g.cList).outerWidth(true);
515 top: pos.top + $(obj).outerHeight(true)
518 $(obj).addClass('coldrop-hover');
523 * Hide columns' visibility list.
525 hideColList: function() {
527 $(g.cDrop).find('.coldrop-hover').removeClass('coldrop-hover');
531 * Reposition the column visibility drop-down arrow.
533 reposDrop: function() {
534 $th = $(t).find('th:not(.draggable)');
535 for (var i = 0; i < $th.length; i++) {
536 var $cd = $(g.cDrop).find('div:eq(' + i + ')'); // column drop-down arrow
537 var pos = $($th[i]).position();
539 left: pos.left + $($th[i]).width() - $cd.width(),
546 * Show all hidden columns.
548 showAllColumns: function() {
549 for (var i = 0; i < g.colVisib.length; i++) {
550 if (!g.colVisib[i]) {
558 * Show edit cell, if it can be shown
560 * @param cell <td> element to be edited
562 showEditCell: function(cell) {
563 if ($(cell).is('.grid_edit') &&
564 !g.colRsz && !g.colReorder)
566 if (!g.isCellEditActive) {
568 // remove all edit area and hide it
569 $(g.cEdit).find('.edit_area').empty().hide();
570 // reposition the cEdit element
572 top: $cell.position().top,
573 left: $cell.position().left
578 width: $cell.outerWidth(),
579 height: $cell.outerHeight()
581 // fill the cell edit with text from <td>
582 var value = PMA_getCellValue(cell);
583 $(g.cEdit).find('.edit_box').val(value);
585 g.currentEditCell = cell;
586 $(g.cEdit).find('.edit_box').focus();
587 $(g.cEdit).find('*').removeAttr('disabled');
593 * Remove edit cell and the edit area, if it is shown.
595 * @param force Optional, force to hide edit cell without saving edited field.
596 * @param data Optional, data from the POST AJAX request to save the edited field
597 * or just specify "true", if we want to replace the edited field with the new value.
598 * @param field Optional, the edited <td>. If not specified, the function will
599 * use currently edited <td> from g.currentEditCell.
601 hideEditCell: function(force, data, field) {
602 if (g.isCellEditActive && !force) {
603 // cell is being edited, save or post the edited data
604 g.saveOrPostEditedCell();
608 // cancel any previous request
609 if (g.lastXHR != null) {
615 if (g.currentEditCell) { // save value of currently edited cell
616 // replace current edited field with the new value
617 var $this_field = $(g.currentEditCell);
618 var is_null = $this_field.data('value') == null;
620 $this_field.find('span').html('NULL');
621 $this_field.addClass('null');
623 $this_field.removeClass('null');
624 var new_html = $this_field.data('value');
625 if ($this_field.is('.truncated')) {
626 if (new_html.length > g.maxTruncatedLen) {
627 new_html = new_html.substring(0, g.maxTruncatedLen) + '...';
630 $this_field.find('span').text(new_html);
633 if (data.transformations != undefined) {
634 $.each(data.transformations, function(cell_index, value) {
635 var $this_field = $(g.t).find('.to_be_saved:eq(' + cell_index + ')');
636 $this_field.find('span').html(value);
639 if (data.relations != undefined) {
640 $.each(data.relations, function(cell_index, value) {
641 var $this_field = $(g.t).find('.to_be_saved:eq(' + cell_index + ')');
642 $this_field.find('span').html(value);
651 // hide the cell editing area
653 $(g.cEdit).find('.edit_box').blur();
654 g.isCellEditActive = false;
655 g.currentEditCell = null;
656 // destroy datepicker in edit area, if exist
657 var $dp = $(g.cEdit).find('.hasDatepicker');
658 if ($dp.length > 0) {
659 $dp.datepicker('destroy');
660 // change the cursor in edit box back to normal
661 // (the cursor become a hand pointer when we add datepicker)
662 $(g.cEdit).find('.edit_box').css('cursor', 'inherit');
667 * Show drop-down edit area when edit cell is focused.
669 showEditArea: function() {
670 if (!g.isCellEditActive) { // make sure the edit area has not been shown
671 g.isCellEditActive = true;
672 g.isEditCellTextEditable = false;
674 * @var $td current edited cell
676 var $td = $(g.currentEditCell);
678 * @var $editArea the editing area
680 var $editArea = $(g.cEdit).find('.edit_area');
682 * @var where_clause WHERE clause for the edited cell
684 var where_clause = $td.parent('tr').find('.where_clause').val();
686 * @var field_name String containing the name of this field.
687 * @see getFieldName()
689 var field_name = getFieldName($td);
691 * @var relation_curr_value String current value of the field (for fields that are foreign keyed).
693 var relation_curr_value = $td.text();
695 * @var relation_key_or_display_column String relational key if in 'Relational display column' mode,
696 * relational display column if in 'Relational key' mode (for fields that are foreign keyed).
698 var relation_key_or_display_column = $td.find('a').attr('title');
700 * @var curr_value String current value of the field (for fields that are of type enum or set).
702 var curr_value = $td.find('span').text();
704 // empty all edit area, then rebuild it based on $td classes
707 // add goto link, if this cell contains a link
708 if ($td.find('a').length > 0) {
709 var gotoLink = document.createElement('div');
710 gotoLink.className = 'goto_link';
711 $(gotoLink).append(g.gotoLinkText + ': ')
712 .append($td.find('a').clone());
713 $editArea.append(gotoLink);
716 g.wasEditedCellNull = false;
717 if ($td.is(':not(.not_null)')) {
718 // append a null checkbox
719 $editArea.append('<div class="null_div">Null :<input type="checkbox"></div>');
720 var $checkbox = $editArea.find('.null_div input');
721 // check if current <td> is NULL
722 if ($td.is('.null')) {
723 $checkbox.attr('checked', true);
724 g.wasEditedCellNull = true;
727 // if the select/editor is changed un-check the 'checkbox_null_<field_name>_<row_index>'.
728 if ($td.is('.enum, .set')) {
729 $editArea.find('select').live('change', function(e) {
730 $checkbox.attr('checked', false);
732 } else if ($td.is('.relation')) {
733 $editArea.find('select').live('change', function(e) {
734 $checkbox.attr('checked', false);
736 $editArea.find('.browse_foreign').live('click', function(e) {
737 $checkbox.attr('checked', false);
740 $(g.cEdit).find('.edit_box').live('keypress change', function(e) {
741 $checkbox.attr('checked', false);
743 $editArea.find('textarea').live('keydown', function(e) {
744 $checkbox.attr('checked', false);
748 // if null checkbox is clicked empty the corresponding select/editor.
749 $checkbox.click(function(e) {
750 if ($td.is('.enum')) {
751 $editArea.find('select').attr('value', '');
752 } else if ($td.is('.set')) {
753 $editArea.find('select').find('option').each(function() {
754 var $option = $(this);
755 $option.attr('selected', false);
757 } else if ($td.is('.relation')) {
758 // if the dropdown is there to select the foreign value
759 if ($editArea.find('select').length > 0) {
760 $editArea.find('select').attr('value', '');
763 $editArea.find('textarea').val('');
765 $(g.cEdit).find('.edit_box').val('');
769 if ($td.is('.relation')) {
771 $editArea.addClass('edit_area_loading');
773 // initialize the original data
774 $td.data('original_data', null);
777 * @var post_params Object containing parameters for the POST request
780 'ajax_request' : true,
781 'get_relational_values' : true,
785 'column' : field_name,
787 'curr_value' : relation_curr_value,
788 'relation_key_or_display_column' : relation_key_or_display_column
791 g.lastXHR = $.post('sql.php', post_params, function(data) {
793 $editArea.removeClass('edit_area_loading');
794 if ($(data.dropdown).is('select')) {
795 // save original_data
796 var value = $(data.dropdown).val();
797 $td.data('original_data', value);
798 // update the text input field, in case where the "Relational display column" is checked
799 $(g.cEdit).find('.edit_box').val(value);
802 $editArea.append(data.dropdown);
803 $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
806 $editArea.find('select').live('change', function(e) {
807 $(g.cEdit).find('.edit_box').val($(this).val());
810 else if($td.is('.enum')) {
812 $editArea.addClass('edit_area_loading');
815 * @var post_params Object containing parameters for the POST request
818 'ajax_request' : true,
819 'get_enum_values' : true,
823 'column' : field_name,
825 'curr_value' : curr_value
827 g.lastXHR = $.post('sql.php', post_params, function(data) {
829 $editArea.removeClass('edit_area_loading');
830 $editArea.append(data.dropdown);
831 $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
834 $editArea.find('select').live('change', function(e) {
835 $(g.cEdit).find('.edit_box').val($(this).val());
838 else if($td.is('.set')) {
840 $editArea.addClass('edit_area_loading');
843 * @var post_params Object containing parameters for the POST request
846 'ajax_request' : true,
847 'get_set_values' : true,
851 'column' : field_name,
853 'curr_value' : curr_value
856 g.lastXHR = $.post('sql.php', post_params, function(data) {
858 $editArea.removeClass('edit_area_loading');
859 $editArea.append(data.select);
860 $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
863 $editArea.find('select').live('change', function(e) {
864 $(g.cEdit).find('.edit_box').val($(this).val());
867 else if($td.is('.truncated, .transformed')) {
868 if ($td.is('.to_be_saved')) { // cell has been edited
869 var value = $td.data('value');
870 $(g.cEdit).find('.edit_box').val(value);
871 $editArea.append('<textarea></textarea>');
872 $editArea.find('textarea')
874 .live('keyup', function(e) {
875 $(g.cEdit).find('.edit_box').val($(this).val());
877 $(g.cEdit).find('.edit_box').live('keyup', function(e) {
878 $editArea.find('textarea').val($(this).val());
880 $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
882 //handle truncated/transformed values values
883 $editArea.addClass('edit_area_loading');
885 // initialize the original data
886 $td.data('original_data', null);
889 * @var sql_query String containing the SQL query used to retrieve value of truncated/transformed data
891 var sql_query = 'SELECT `' + field_name + '` FROM `' + g.table + '` WHERE ' + PMA_urldecode(where_clause);
893 // Make the Ajax call and get the data, wrap it and insert it
894 g.lastXHR = $.post('sql.php', {
898 'ajax_request' : true,
899 'sql_query' : sql_query,
903 $editArea.removeClass('edit_area_loading');
904 if(data.success == true) {
905 if ($td.is('.truncated')) {
906 // get the truncated data length
907 g.maxTruncatedLen = $(g.currentEditCell).text().length - 3;
910 $td.data('original_data', data.value);
911 $(g.cEdit).find('.edit_box').val(data.value);
912 $editArea.append('<textarea></textarea>');
913 $editArea.find('textarea')
915 .live('keyup', function(e) {
916 $(g.cEdit).find('.edit_box').val($(this).val());
918 $(g.cEdit).find('.edit_box').live('keyup', function(e) {
919 $editArea.find('textarea').val($(this).val());
921 $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
924 PMA_ajaxShowMessage(data.error);
928 g.isEditCellTextEditable = true;
929 } else if ($td.is('.datefield, .datetimefield, .timestampfield')) {
930 var $input_field = $(g.cEdit).find('.edit_box');
932 // remember current datetime value in $input_field, if it is not null
933 var is_null = $td.is('.null');
934 var current_datetime_value = !is_null ? $input_field.val() : '';
936 var showTimeOption = true;
937 if ($td.is('.datefield')) {
938 showTimeOption = false;
940 PMA_addDatepicker($editArea, {
941 altField: $input_field,
942 showTimepicker: showTimeOption,
943 onSelect: function(dateText, inst) {
944 // remove null checkbox if it exists
945 $(g.cEdit).find('.null_div input[type=checkbox]').attr('checked', false);
949 // cancel any click on the datepicker element
950 $editArea.find('> *').click(function(e) {
954 // force to restore modified $input_field value after adding datepicker
955 // (after adding a datepicker, the input field doesn't display the time anymore, only the date)
957 $editArea.datetimepicker('setDate', current_datetime_value);
959 $input_field.val('');
961 $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
963 g.isEditCellTextEditable = true;
964 // only append edit area hint if there is a null checkbox
965 if ($editArea.children().length > 0) {
966 $editArea.append('<div class="cell_edit_hint">' + g.cellEditHint + '</div>');
969 if ($editArea.children().length > 0) {
976 * Post the content of edited cell.
978 postEditedCell: function() {
985 * @var relation_fields Array containing the name/value pairs of relational fields
987 var relation_fields = {};
989 * @var relational_display string 'K' if relational key, 'D' if relational display column
991 var relational_display = $("#relational_display_K").attr('checked') ? 'K' : 'D';
993 * @var transform_fields Array containing the name/value pairs for transformed fields
995 var transform_fields = {};
997 * @var transformation_fields Boolean, if there are any transformed fields in the edited cells
999 var transformation_fields = false;
1001 * @var full_sql_query String containing the complete SQL query to update this table
1003 var full_sql_query = '';
1005 * @var rel_fields_list String, url encoded representation of {@link relations_fields}
1007 var rel_fields_list = '';
1009 * @var transform_fields_list String, url encoded representation of {@link transform_fields}
1011 var transform_fields_list = '';
1013 * @var where_clause Array containing where clause for updated fields
1015 var full_where_clause = Array();
1017 * @var is_unique Boolean, whether the rows in this table is unique or not
1019 var is_unique = $('.edit_row_anchor').is('.nonunique') ? 0 : 1;
1021 * multi edit variables
1023 var me_fields_name = Array();
1024 var me_fields = Array();
1025 var me_fields_null = Array();
1027 // alert user if edited table is not unique
1029 alert(g.alertNonUnique);
1032 // loop each edited row
1033 $('.to_be_saved').parents('tr').each(function() {
1035 var where_clause = $tr.find('.where_clause').val();
1036 full_where_clause.push(PMA_urldecode(where_clause));
1037 var condition_array = jQuery.parseJSON($tr.find('.condition_array').val());
1040 * multi edit variables, for current row
1041 * @TODO array indices are still not correct, they should be md5 of field's name
1043 var fields_name = Array();
1044 var fields = Array();
1045 var fields_null = Array();
1047 // loop each edited cell in a row
1048 $tr.find('.to_be_saved').each(function() {
1050 * @var $this_field Object referring to the td that is being edited
1052 var $this_field = $(this);
1055 * @var field_name String containing the name of this field.
1056 * @see getFieldName()
1058 var field_name = getFieldName($this_field);
1061 * @var this_field_params Array temporary storage for the name/value of current field
1063 var this_field_params = {};
1065 if($this_field.is('.transformed')) {
1066 transformation_fields = true;
1068 this_field_params[field_name] = $this_field.data('value');
1071 * @var is_null String capturing whether 'checkbox_null_<field_name>_<row_index>' is checked.
1073 var is_null = this_field_params[field_name] === null;
1075 fields_name.push(field_name);
1078 fields_null.push('on');
1081 fields_null.push('');
1082 fields.push($this_field.data('value'));
1084 var cell_index = $this_field.index('.to_be_saved');
1085 if($this_field.is(":not(.relation, .enum, .set, .bit)")) {
1086 if($this_field.is('.transformed')) {
1087 transform_fields[cell_index] = {};
1088 $.extend(transform_fields[cell_index], this_field_params);
1090 } else if($this_field.is('.relation')) {
1091 relation_fields[cell_index] = {};
1092 $.extend(relation_fields[cell_index], this_field_params);
1095 // check if edited field appears in WHERE clause
1096 if (where_clause.indexOf(PMA_urlencode(field_name)) > -1) {
1097 var field_str = '`' + g.table + '`.' + '`' + field_name + '`';
1098 for (var field in condition_array) {
1099 if (field.indexOf(field_str) > -1) {
1100 condition_array[field] = is_null ? 'IS NULL' : "= '" + this_field_params[field_name].replace(/'/g,"''") + "'";
1106 }); // end of loop for every edited cells in a row
1109 var new_clause = '';
1110 for (var field in condition_array) {
1111 new_clause += field + ' ' + condition_array[field] + ' AND ';
1113 new_clause = new_clause.substring(0, new_clause.length - 5); // remove the last AND
1114 new_clause = PMA_urlencode(new_clause);
1115 $tr.data('new_clause', new_clause);
1116 // save condition_array
1117 $tr.find('.condition_array').val(JSON.stringify(condition_array));
1119 me_fields_name.push(fields_name);
1120 me_fields.push(fields);
1121 me_fields_null.push(fields_null);
1123 }); // end of loop for every edited rows
1125 rel_fields_list = $.param(relation_fields);
1126 transform_fields_list = $.param(transform_fields);
1128 // Make the Ajax post after setting all parameters
1130 * @var post_params Object containing parameters for the POST request
1132 var post_params = {'ajax_request' : true,
1133 'sql_query' : full_sql_query,
1135 'server' : g.server,
1138 'clause_is_unique' : is_unique,
1139 'where_clause' : full_where_clause,
1140 'fields[multi_edit]' : me_fields,
1141 'fields_name[multi_edit]' : me_fields_name,
1142 'fields_null[multi_edit]' : me_fields_null,
1143 'rel_fields_list' : rel_fields_list,
1144 'do_transformations' : transformation_fields,
1145 'transform_fields_list' : transform_fields_list,
1146 'relational_display' : relational_display,
1148 'submit_type' : 'save'
1151 if (!g.saveCellsAtOnce) {
1152 $(g.cEdit).find('*').attr('disabled', 'disabled');
1153 var $editArea = $(g.cEdit).find('.edit_area');
1154 $(g.cEdit).find('.edit_box').addClass('edit_box_posting');
1156 $('.save_edited').addClass('saving_edited_data')
1157 .find('input').attr('disabled', 'disabled'); // disable the save button
1162 url: 'tbl_replace.php',
1167 if (!g.saveCellsAtOnce) {
1168 $(g.cEdit).find('*').removeAttr('disabled');
1169 $(g.cEdit).find('.edit_box').removeClass('edit_box_posting');
1171 $('.save_edited').removeClass('saving_edited_data')
1172 .find('input').removeAttr('disabled'); // enable the save button back
1174 if(data.success == true) {
1175 PMA_ajaxShowMessage(data.message);
1176 // update where_clause related data in each edited row
1177 $('.to_be_saved').parents('tr').each(function() {
1178 var new_clause = $(this).data('new_clause');
1179 var $where_clause = $(this).find('.where_clause');
1180 var old_clause = $where_clause.attr('value');
1181 var decoded_old_clause = PMA_urldecode(old_clause);
1182 var decoded_new_clause = PMA_urldecode(new_clause);
1184 $where_clause.attr('value', new_clause);
1185 // update Edit, Copy, and Delete links also
1186 $(this).find('a').each(function() {
1187 $(this).attr('href', $(this).attr('href').replace(old_clause, new_clause));
1188 // update delete confirmation in Delete link
1189 if ($(this).attr('href').indexOf('DELETE') > -1) {
1190 $(this).removeAttr('onclick')
1192 .bind('click', function() {
1193 return confirmLink(this, 'DELETE FROM `' + g.db + '`.`' + g.table + '` WHERE ' +
1194 decoded_new_clause + (is_unique ? '' : ' LIMIT 1'));
1198 // update the multi edit checkboxes
1199 $(this).find('input[type=checkbox]').each(function() {
1200 var $checkbox = $(this);
1201 var checkbox_name = $checkbox.attr('name');
1202 var checkbox_value = $checkbox.attr('value');
1204 $checkbox.attr('name', checkbox_name.replace(old_clause, new_clause));
1205 $checkbox.attr('value', checkbox_value.replace(decoded_old_clause, decoded_new_clause));
1208 // update the display of executed SQL query command
1209 $('#result_query').remove();
1210 if (typeof data.sql_query != 'undefined') {
1212 $('#sqlqueryresults').prepend(data.sql_query);
1214 // hide and/or update the successfully saved cells
1215 g.hideEditCell(true, data);
1217 // remove the "Save edited cells" button
1218 $('.save_edited').hide();
1219 // update saved fields
1220 $(g.t).find('.to_be_saved')
1221 .removeClass('to_be_saved')
1222 .data('value', null)
1223 .data('original_data', null);
1225 g.isCellEdited = false;
1227 PMA_ajaxShowMessage(data.error);
1234 * Save edited cell, so it can be posted later.
1236 saveEditedCell: function() {
1238 * @var $this_field Object referring to the td that is being edited
1240 var $this_field = $(g.currentEditCell);
1241 var $test_element = ''; // to test the presence of a element
1243 var need_to_post = false;
1246 * @var field_name String containing the name of this field.
1247 * @see getFieldName()
1249 var field_name = getFieldName($this_field);
1252 * @var this_field_params Array temporary storage for the name/value of current field
1254 var this_field_params = {};
1257 * @var is_null String capturing whether 'checkbox_null_<field_name>_<row_index>' is checked.
1259 var is_null = $(g.cEdit).find('input:checkbox').is(':checked');
1262 if ($(g.cEdit).find('.edit_area').is('.edit_area_loading')) {
1263 // the edit area is still loading (retrieving cell data), no need to post
1264 need_to_post = false;
1265 } else if (is_null) {
1266 if (!g.wasEditedCellNull) {
1267 this_field_params[field_name] = null;
1268 need_to_post = true;
1271 if ($this_field.is('.bit')) {
1272 this_field_params[field_name] = '0b' + $(g.cEdit).find('.edit_box').val();
1273 } else if ($this_field.is('.set')) {
1274 $test_element = $(g.cEdit).find('select');
1275 this_field_params[field_name] = $test_element.map(function(){
1276 return $(this).val();
1278 } else if ($this_field.is('.relation, .enum')) {
1279 // results from a drop-down
1280 $test_element = $(g.cEdit).find('select');
1281 if ($test_element.length != 0) {
1282 this_field_params[field_name] = $test_element.val();
1285 // results from Browse foreign value
1286 $test_element = $(g.cEdit).find('span.curr_value');
1287 if ($test_element.length != 0) {
1288 this_field_params[field_name] = $test_element.text();
1291 this_field_params[field_name] = $(g.cEdit).find('.edit_box').val();
1293 if (g.wasEditedCellNull || this_field_params[field_name] != PMA_getCellValue(g.currentEditCell)) {
1294 need_to_post = true;
1299 $(g.currentEditCell).addClass('to_be_saved')
1300 .data('value', this_field_params[field_name]);
1301 if (g.saveCellsAtOnce) {
1302 $('.save_edited').show();
1304 g.isCellEdited = true;
1307 return need_to_post;
1311 * Save or post currently edited cell, depending on the "saveCellsAtOnce" configuration.
1313 saveOrPostEditedCell: function() {
1314 var saved = g.saveEditedCell();
1315 if (!g.saveCellsAtOnce) {
1319 g.hideEditCell(true);
1323 g.hideEditCell(true, true);
1325 g.hideEditCell(true);
1331 * Initialize column resize feature.
1333 initColResize: function() {
1334 // create column resizer div
1335 g.cRsz = document.createElement('div');
1336 g.cRsz.className = 'cRsz';
1338 // get data columns in the first row of the table
1339 var $firstRowCols = $(g.t).find('tr:first th.draggable');
1341 // create column borders
1342 $firstRowCols.each(function() {
1343 var cb = document.createElement('div'); // column border
1344 $(cb).addClass('colborder')
1345 .mousedown(function(e) {
1346 g.dragStartRsz(e, this);
1348 $(g.cRsz).append(cb);
1352 // attach to global div
1353 $(g.gDiv).prepend(g.cRsz);
1357 * Initialize column reordering feature.
1359 initColReorder: function() {
1360 g.cCpy = document.createElement('div'); // column copy, to store copy of dragged column header
1361 g.cPointer = document.createElement('div'); // column pointer, used when reordering column
1364 g.cCpy.className = 'cCpy';
1367 // adjust g.cPointer
1368 g.cPointer.className = 'cPointer';
1369 $(g.cPointer).css('visibility', 'hidden'); // set visibility to hidden instead of calling hide() to force browsers to cache the image in cPointer class
1371 // assign column reordering hint
1372 g.reorderHint = PMA_messages['strColOrderHint'];
1374 // get data columns in the first row of the table
1375 var $firstRowCols = $(g.t).find('tr:first th.draggable');
1377 // initialize column order
1378 $col_order = $('#col_order'); // check if column order is passed from PHP
1379 if ($col_order.length > 0) {
1380 g.colOrder = $col_order.val().split(',');
1381 for (var i = 0; i < g.colOrder.length; i++) {
1382 g.colOrder[i] = parseInt(g.colOrder[i]);
1385 g.colOrder = new Array();
1386 for (var i = 0; i < $firstRowCols.length; i++) {
1392 $(t).find('th.draggable')
1393 .mousedown(function(e) {
1394 if (g.visibleHeadersCount > 1) {
1395 g.dragStartReorder(e, this);
1398 .mouseenter(function(e) {
1399 if (g.visibleHeadersCount > 1) {
1400 g.showReorderHint = true;
1401 $(this).css('cursor', 'move');
1403 $(this).css('cursor', 'inherit');
1406 .mouseleave(function(e) {
1407 g.showReorderHint = false;
1409 // restore column order when the restore button is clicked
1410 $('.restore_column').click(function() {
1411 g.restoreColOrder();
1414 // attach to global div
1415 $(g.gDiv).append(g.cPointer);
1416 $(g.gDiv).append(g.cCpy);
1418 // prevent default "dragstart" event when dragging a link
1419 $(t).find('th a').bind('dragstart', function() {
1423 // refresh the restore column button state
1424 g.refreshRestoreButton();
1428 * Initialize column visibility feature.
1430 initColVisib: function() {
1431 g.cDrop = document.createElement('div'); // column drop-down arrows
1432 g.cList = document.createElement('div'); // column visibility list
1435 g.cDrop.className = 'cDrop';
1438 g.cList.className = 'cList';
1441 // assign column visibility related hints
1442 g.colVisibHint = PMA_messages['strColVisibHint'];
1443 g.showAllColText = PMA_messages['strShowAllCol'];
1445 // get data columns in the first row of the table
1446 var $firstRowCols = $(g.t).find('tr:first th.draggable');
1448 // initialize column visibility
1449 $col_visib = $('#col_visib'); // check if column visibility is passed from PHP
1450 if ($col_visib.length > 0) {
1451 g.colVisib = $col_visib.val().split(',');
1452 for (var i = 0; i < g.colVisib.length; i++) {
1453 g.colVisib[i] = parseInt(g.colVisib[i]);
1456 g.colVisib = new Array();
1457 for (var i = 0; i < $firstRowCols.length; i++) {
1462 // get data columns in the first row of the table
1463 var $firstRowCols = $(t).find('tr:first th.draggable');
1465 // make sure we have more than one column
1466 if ($firstRowCols.length > 1) {
1467 var $colVisibTh = $(g.t).find('th:not(.draggable)');
1468 PMA_createqTip($colVisibTh);
1470 // create column visibility drop-down arrow(s)
1471 $colVisibTh.each(function() {
1473 var cd = document.createElement('div'); // column drop-down arrow
1474 var pos = $th.position();
1475 $(cd).addClass('coldrop')
1477 if (g.cList.style.display == 'none') {
1478 g.showColList(this);
1483 $(g.cDrop).append(cd);
1485 .mouseenter(function(e) {
1486 g.showColVisibHint = true;
1488 .mouseleave(function(e) {
1489 g.showColVisibHint = false;
1492 // add column visibility control
1493 g.cList.innerHTML = '<div class="lDiv"></div>';
1494 var $listDiv = $(g.cList).find('div');
1495 for (var i = 0; i < $firstRowCols.length; i++) {
1496 var currHeader = $firstRowCols[i];
1497 var listElmt = document.createElement('div');
1498 $(listElmt).text($(currHeader).text())
1499 .prepend('<input type="checkbox" ' + (g.colVisib[i] ? 'checked="checked" ' : '') + '/>');
1500 $listDiv.append(listElmt);
1501 // add event on click
1502 $(listElmt).click(function() {
1503 if ( g.toggleCol($(this).index()) ) {
1508 // add "show all column" button
1509 var showAll = document.createElement('div');
1510 $(showAll).addClass('showAllColBtn')
1511 .text(g.showAllColText);
1512 $(g.cList).append(showAll);
1513 $(showAll).click(function() {
1516 // prepend "show all column" button at top if the list is too long
1517 if ($firstRowCols.length > 10) {
1518 var clone = showAll.cloneNode(true);
1519 $(g.cList).prepend(clone);
1520 $(clone).click(function() {
1526 // hide column visibility list if we move outside the list
1527 $(t).find('td, th.draggable').mouseenter(function() {
1531 // attach to global div
1532 $(g.gDiv).append(g.cDrop);
1533 $(g.gDiv).append(g.cList);
1540 * Initialize grid editing feature.
1542 initGridEdit: function() {
1543 // create cell edit wrapper element
1544 g.cEdit = document.createElement('div');
1547 g.cEdit.className = 'cEdit';
1548 $(g.cEdit).html('<textarea class="edit_box" rows="1" ></textarea><div class="edit_area" />');
1551 // assign cell editing hint
1552 g.cellEditHint = PMA_messages['strCellEditHint'];
1553 g.saveCellWarning = PMA_messages['strSaveCellWarning'];
1554 g.alertNonUnique = PMA_messages['strAlertNonUnique'];
1555 g.gotoLinkText = PMA_messages['strGoToLink'];
1557 // initialize cell editing configuration
1558 g.saveCellsAtOnce = $('#save_cells_at_once').val();
1561 $(t).find('td.data')
1562 .click(function(e) {
1563 if (g.isCellEditActive) {
1564 g.saveOrPostEditedCell();
1565 e.stopPropagation();
1567 g.showEditCell(this);
1568 e.stopPropagation();
1570 // prevent default action when clicking on "link" in a table
1571 if ($(e.target).is('a')) {
1575 $(g.cEdit).find('.edit_box').focus(function(e) {
1578 $(g.cEdit).find('.edit_box, select').live('keydown', function(e) {
1579 if (e.which == 13) {
1580 // post on pressing "Enter"
1582 g.saveOrPostEditedCell();
1585 $(g.cEdit).keydown(function(e) {
1586 if (!g.isEditCellTextEditable) {
1587 // prevent text editing
1591 $('html').click(function(e) {
1592 // hide edit cell if the click is not from g.cEdit
1593 if ($(e.target).parents().index(g.cEdit) == -1) {
1597 $('html').keydown(function(e) {
1598 if (e.which == 27 && g.isCellEditActive) {
1600 // cancel on pressing "Esc"
1601 g.hideEditCell(true);
1604 $('.save_edited').click(function() {
1608 $(window).bind('beforeunload', function(e) {
1609 if (g.isCellEdited) {
1610 return g.saveCellWarning;
1614 // attach to global div
1615 $(g.gDiv).append(g.cEdit);
1617 // add hint for grid editing feature when hovering "Edit" link in each table row
1618 PMA_createqTip($(g.t).find('.edit_row_anchor a'), PMA_messages['strGridEditFeatureHint']);
1626 // wrap all data cells, except actions cell, with span
1627 $(t).find('th, td:not(:has(span))')
1628 .wrapInner('<span />');
1630 // create grid elements
1631 g.gDiv = document.createElement('div'); // create global div
1633 // initialize the table variable
1636 // get data columns in the first row of the table
1637 var $firstRowCols = $(t).find('tr:first th.draggable');
1639 // initialize visible headers count
1640 g.visibleHeadersCount = $firstRowCols.filter(':visible').length;
1642 // assign first column (actions) span
1643 if (! $(t).find('tr:first th:first').hasClass('draggable')) { // action header exist
1644 g.actionSpan = $(t).find('tr:first th:first').prop('colspan');
1649 // assign table create time
1650 // #table_create_time will only available if we are in "Browse" tab
1651 g.tableCreateTime = $('#table_create_time').val();
1654 g.sortHint = PMA_messages['strSortHint'];
1655 g.markHint = PMA_messages['strColMarkHint'];
1657 // assign common hidden inputs
1658 var $common_hidden_inputs = $('.common_hidden_inputs');
1659 g.token = $common_hidden_inputs.find('input[name=token]').val();
1660 g.server = $common_hidden_inputs.find('input[name=server]').val();
1661 g.db = $common_hidden_inputs.find('input[name=db]').val();
1662 g.table = $common_hidden_inputs.find('input[name=table]').val();
1665 $(t).addClass('pma_table');
1667 // add relative position to global div so that resize handlers are correctly positioned
1668 $(g.gDiv).css('position', 'relative');
1670 // link the global div
1671 $(t).before(g.gDiv);
1672 $(g.gDiv).append(t);
1675 enableResize = enableResize == undefined ? true : enableResize;
1676 enableReorder = enableReorder == undefined ? true : enableReorder;
1677 enableVisib = enableVisib == undefined ? true : enableVisib;
1678 enableGridEdit = enableGridEdit == undefined ? true : enableGridEdit;
1682 if (enableReorder &&
1683 $('.navigation').length > 0) // disable reordering for result from EXPLAIN or SHOW syntax, which do not have a table navigation panel
1690 if (enableGridEdit &&
1691 $(t).is('.ajax')) // make sure AjaxEnable is enabled in Settings
1696 // create qtip for each <th> with draggable class
1697 PMA_createqTip($(t).find('th.draggable'));
1699 // register events for hint tooltip
1700 $(t).find('th.draggable a')
1701 .attr('title', '') // hide default tooltip for sorting
1702 .mouseenter(function(e) {
1703 g.showSortHint = true;
1706 .mouseleave(function(e) {
1707 g.showSortHint = false;
1710 $(t).find('th.marker')
1711 .mouseenter(function(e) {
1712 g.showMarkHint = true;
1714 .mouseleave(function(e) {
1715 g.showMarkHint = false;
1717 // register events for dragging-related feature
1718 if (enableResize || enableReorder) {
1719 $(document).mousemove(function(e) {
1722 $(document).mouseup(function(e) {
1727 // bind event to update currently hovered qtip API
1729 .mouseenter(function(e) {
1730 g.qtip = $(this).qtip('api');
1733 .mouseleave(function(e) {
1738 $(t).removeClass('data');
1739 $(g.gDiv).addClass('data');