JQuery + Ajax + table?

Question

[kuzubov]

Наверно вы уже видели как работает phpMyAdmin в режиме просмотра содержимого таблицы. Выводится табличка и если в ячейку кликнуться мышкой — то ячейка заменяется на input text и можно ввести новое значение для ячейки и кликнув мимо — отправить все это в базу данных черех аякс…



Внутренности нечитабельные совсем и навороченные так что посмотрев содержимое вообще не стало понятно как все работает. Пдозреваю что там кроме аякса еще и jquery… Отавить содержимое в базу через аякс я могу используя jquery. Получить назад данные тоже. Н вот сделать такую табличку редактируемую пока не представляю как. Пробовал остые вещи — по клику в ячейку подменять именно в ней данные — получается, но надо же много больше и тут совсем потерялся в том как правильно надо такое делать…



В общем можете подсказать порядок действий или урок какой то как такое делать на jquery + ajax...?



Сразу скажу что варианты с плагинами делающими такие редактируемые таблицы мне не нужны — мне нужно научиться и понять как это работает и использовать то что уже есть готовое, а не менять структуру свою из за каких то новых плагинов… У меня уже есть сайт и все таблички в нем, надо просто уйти от специальных страниц редактирования табличных данных к простому варианту клик+апдейт…

Answer 1

[Urvin]

При кликании на ячейку — поверх нее класть активный input[type=tex], при onblur этого едита отпралять аякс-запрос.
Оно?

Comments

[kuzubov]

Да, но я не понял как в конкретную ячейку это делать… Все примеры по на 1 id ячейки всего лишь работают. тоесть в скрипт надо указать id ячейки и он должен быть уникальным для каждой ячейки и тогда 1000 сктов генерить чтоль для каждой ячейки свой?? надо по функции в которую передавать ячейку или как то определять в какую ячейку ткнул и в ней работать… Плюс не совсем понял как сделать такой двух уровневый скрипт чтобы и подмену и аякс совместить… И еще как сделать чтобы лишь в одной ячейке редактирование было одновременно… Блин, столько вопросов и нифига не понятно как скрутить все вместе…

[Urvin]

Вас очень сложно читать.

var gCurCell;
$(document).ready(function(){
$('.editable_table td').onclick(function(){
gCurCell = this();

// тут подстановка нужного инпута
});

$('#editable_table_input').onblur(function(){
$(gCurCell).html(this.val());
// и пошел аякс-запрос
});
});

[Urvin]

События только без `on`

[kuzubov]

Извиняюсь… Сижу тут на iPad… А на нем писать ну очень тяжело, то буквы не пропечатывает, то еще чего… Жесть…
Щас буду пробовать ваш вариант, спасибо ))

[kuzubov]

Когда ставлю

[kuzubov]

Когда ставлю как написано — ничего не происходит… Конструкция table id=editable-table и последующее указывание .editable_table td — не дает результата… Но если в ячейку напрямую указать td id=aaa и указывание #ааа — то все пашет

[Urvin]

jsfiddle.net/Urvin/hGbTW/

[kuzubov]

Афигительный сайт! Большое спасибо и за пример и за ссылку )) все заработало и уже прикрутил этот имер в табличку и можно смело работать дальше

[Urvin]

Чего не сделаешь за двадцать баксов)

[trueneutral]

После show() неплохо бы еще .focus(), чтобы инпут сразу активным стал.

[Urvin]

Это набросок, еще надо отключить аутлайн у инбокса, отключить бы его рамку, сделать в цвет ячейки… Дальнейшие извращения, считаю, на совести топикстартера.
Обновите набросок по ссылке выше.

[Илья Плотников]

Urvin, а съехать может?

[Urvin]

Что съехать?

[Илья Плотников]

Поле ввода

Answer 2

[Илья Плотников]

Очень извиняюсь за ту простыню, что накатал выше. Вот решение без id и прочих костылей.

// При клике на td ставим input
$("table").on('click', 'td', function(){
	$(this).html("<input type='text' value='"+$(this).text()+"'/>");
// Что бы input не ставился повторно, запрещаем
}).on('click', 'td input', function(){
	return false;
// При потере фокуса в input, возвращаем все как было.
}).on('blur', 'td input', function(){
	// text, т.к. html теги не обрабатываются.
	$(this).parent('td').text($(this).val());
	// Тут можно вставить ajax 
});

Comments

[Илья Плотников]

Если добавлять к таблице строки и столбцы с помощью jquery, работать не перестанет. ID таблицы я бы указал, а то будут обрабатываться все таблицы :)

[kuzubov]

спасибо ) этот пример уж совсем на чистом ява-скрипте получается, что тоже полезно для понимания процесса… на jquery уже все сделал и половину своих табличек уже перевел на аякс в итоге )) все куда проще когда есть готовый пример сразу целый, а не куски из разных уроков показывающие как все делать частями…

[Илья Плотников]

Да не за что :) Я у себя сразу и применил то, что в ответ написал.

Answer 3

[joger]

в td span, onclick заменять на input?

Answer 4

[NeX]

www.appelsiini.net/projects/jeditable

Answer 5

[Илья Плотников]

$(«table»).on('click', 'td', function(){
$(this).html("/>");
});

Обратно по аналогии.
Если ошибся, поправьте пожалуйста, сейчас немного пьян.

Comments

[Илья Плотников]

Забыл code :( Простите.

[Илья Плотников]

$("table").on('click', 'td', function(){
    $(this).html("<input type='text' value='"+$(this).text()+"'/>");
});

[Илья Плотников]

Работает на структуре

<table>
    <tr>
       <td>text</td>
       <td>text</td>
       <td>text</td>
   </tr>
</table>

[Илья Плотников]

Id и прочее не нужно. для input можно указать name, а можно использовать класс поля как name.

<input type="text" name="field[112][37]" value='test'/>

Где 112 — номер строки, 37 — номер столбца. Считается легко.
Так же вместо номеров можно использовать классы строки и столбца.
В PHP получим массив

$_POST['field'][112][37] = 'test';

[Илья Плотников]

Предвкушая вопрос про serialize… Он прекрасно понимает массивы в html.