Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Редактируемая таблица с динамическим сохранением, Редактируемая таблица 
:(
    Опции темы
zevgan
Дата 24.8.2009, 17:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 27
Регистрация: 25.3.2005

Репутация: нет
Всего: нет



Доброго времени суток.

Нужно сделать таблицу в html с возможностью редактирования содержимого ячеек по двойному клику мышкой и динамическим сохранением внесенных изменений в MySQL БД по нажатию ентера без перезагрузки страницы. Если кто-то знает скрипт, который делает хотя бы часть из перечисленного - буду оооооочень признателен smile 

А если такого нету, тогда вот вопросы по жабаскрипту:

Как по двойному клику мышкой по ячейке удалить её содержимое, поместить в эту самую ячейку текстовое поле и уже в само это поле бросить старое содержимое ячейки. Затем отследить нажатие ентера в данном текстовом поле, убрать текстовое поле, поместить в ячейку изменённые данные и сохранить это изменение в БД без перезагрузки страницы. Для последнего думаю юзать библиотеку JsHttpRequest.

Заранее спасибо за любой ответ.
PM MAIL   Вверх
bars80080
Дата 24.8.2009, 17:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315



вариант по моему не слишком кошерный, хотя бы потому, что ячеек в таблице может быть довольно много, растягивать их бесконечно тоже не есть гуд, в итоге, если туда ещё запихивать поле, и может даже с кнопкой - таблица будет дёргаться и т.п.

вариант по проще:
просто таблица, с ячейками в которых значения. на каждой ячейке событие onclick с вызовом функции. функция открывает скрытое до тех пор поле (display: none; / block;) банальный div с вложенным полем textarea и двумя кнопками "утвердить", "отменить"
при открытии этого поля, из ячейки копируются значение в поле.

далее, я бы оставил тему о перезаписи одной ячейки на сервере. смысл? запросы имеют тенденцию к выполнению в течение нескольких секунд, пока туда-сюда вернётся, что-нибудь может случить. потому, я бы ввёл другую систему: изменение значений нескольких ячеек, а затем перезагрузка страницы и перезапись всех указанных ячеек во всех указанных строчках. имхо здесь и будет максимальная экономия на ресурсах и наибольшая надёжность системы.

в таком случае по нажатию кнопки "утвердить" должно происходить сравнение содержимого поля и редактируемой ячейки. если произошли изменения, то:
а) скопировать предыдущее значение ячейки в скрытое поле input:hidden, дабы можно было откатить назад
б) скопировать содержимое textarea в ячейку
в) скрыть поле textarea
г) пометить ячейку цветом, как отредактированную
д) открыть кнопку "сохранить изменения"


конечно, тут основная работа будет заключаться в сохранении идентификатора ячейки, сохранении в отдельном поле идентификаторов редактируемых строк и ячеек ,а потом на сервере ещё надо будет придумать как это всё разгребсти

тут конечно возникает серьёзный вопрос, а ты знаешь что за таблица будет редактироваться? или это универсальный скрипт под любую таблицу, которому будет отдаваться только имя таблицы?
PM MAIL WWW   Вверх
zevgan
Дата 24.8.2009, 18:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 27
Регистрация: 25.3.2005

Репутация: нет
Всего: нет



Большое спасибо, очень дельная идея. Да, таблица мне доступна, в ней 45 столбцов, а количество строк будет варьироваться примерно от 1 до 100, а может и больше... Короче говоря, примерно 4500 ячеек. Кошерно ли будет у каждой ячейки указывать "onclick="? Или есть другой способ, что-то вроде глобального отслеживания щелчка и постфактум выяснения, над какой ячейкой сейчас находится курсор?

textarea наверное лучше всего было бы ещё и позиционировать на место редактируемой ячейки (сугубо с точки зрения юзабилити)... Как считаете?

Да и вот ещё, уместно ли у каждой ячейки указывать уникальный id? Их всё-таки будет много...



Это сообщение отредактировал(а) zevgan - 24.8.2009, 18:34
PM MAIL   Вверх
skyboy
Дата 24.8.2009, 21:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


неОпытный
****


Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 10
Всего: 260



готовые библиотеки вполне себе могут быть найдены через google. к примеру, по запросу "editable table javascript". я вот предпочитаю jquery, потому искал под jquery: ui table edit и tableeditor.
вот только замечу: задачу разбей таки на две части. редактирование таблицы - одна подзадача, ajax-сохранение - другая задача. тогда найдешь сразу.
Цитата(zevgan @  24.8.2009,  17:30 Найти цитируемый пост)
Или есть другой способ, что-то вроде глобального отслеживания щелчка и постфактум выяснения, над какой ячейкой сейчас находится курсор?

например, при помощи jquery можно привязать обраобтчик ко всем определенным элементам:
Код

jQuery('table#my_id td').bind('click', my_click_function);

PM MAIL   Вверх
comtat
Дата 24.8.2009, 22:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 4
Всего: 71



Продолжу список от skyboy и предложу EditorGridPanel для ExtJS


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
bars80080
Дата 24.8.2009, 23:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315



Цитата(zevgan @  24.8.2009,  18:30 Найти цитируемый пост)
Кошерно ли будет у каждой ячейки указывать "onclick="?

ну, если генерировать таблицу на сервере, то ничего особенного. если даже эти килобайты слать не хочется, то можно наградить событием onclick каждую ячейку средствами javascript уже после загрузки страницы. просто пробежавшись циклом по ячейкам и присвоив каждому элементу событие:
Код


    var t = document.getElementById('Table');
    if(!t) return false;
    var tr = t.getElementsByTagName('tr'); var trc = tr.length;
    var td = tr[0].getElementsByTagName('td'); var tdc = td.length;
    for(var i = 0; i < trc; i++) {
        td = tr[i].getElementsByTagName('td');
        for(var j = 0; j < tdc; j++) {
            td[j].aa = i; td[j].bb = j;
            td[j].onclick = function() { VRshow(this.aa, this.bb); };
        }
    }

как-то так


Цитата(zevgan @  24.8.2009,  18:30 Найти цитируемый пост)
Да и вот ещё, уместно ли у каждой ячейки указывать уникальный id?

собственно можно ориентироваться и по номеру в массиве
PM MAIL WWW   Вверх
zevgan
Дата 25.8.2009, 01:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 27
Регистрация: 25.3.2005

Репутация: нет
Всего: нет



Большое всем спасибо за ответы. Пришёл в восторг от EditorGridPanel. Только есть одно усложнение, про которое я забыл написать. Дело в том, что в зависимости от залогиненного пользователя меняются права записи в определённые столбцы. Тоесть скажем пользователь ХХХ может изменять только 3, 5 и 6 столбцы. Это возможно будет реализовать на данной штуке? 
PM MAIL   Вверх
comtat
Дата 25.8.2009, 08:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 4
Всего: 71



Цитата(zevgan @  25.8.2009,  01:59 Найти цитируемый пост)
Только есть одно усложнение, про которое я забыл написать.

Это усложнение можно решить написав небольшой плагин к EditorGridPanel


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
zevgan
Дата 4.9.2009, 04:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 27
Регистрация: 25.3.2005

Репутация: нет
Всего: нет



Долго не появлялся, писал табличку по чайной ложке в день...

Опытным путём выяснил, что  EditorGridPanel в моём случае не подходит, а оооочень жаль. Дело в большом объёме данных - изменилось количество строк со ста примерно до 400. С  EditorGridPanel такая табличка загружается минуты. В то время, как моя корявая самописка с одним лишь прикрученным JsHttpRequest в среднем 12-30 секунд. Если я не прав в своих выводах относительно  EditorGridPanel, пожалуйста, напишите, как заставить его работать быстрее.

Сейчас встал перед на первый взгляд тривиальной задачей - статичный хедер у таблицы по ширине во много раз большей, чем ширина окна. Сложность в том, чтобы горизонтальный скроллбар крутил всю таблицу включая хедер, а вертикальный только строки без хедера и притом, чтобы вертикальный скролл находился всегда в поле зрения. Поскольку это уже другой вопрос - сейчас создам новую тему. Буду благодарен за любой совет (за сегодня перерыл кучу вариантов).
PM MAIL   Вверх
comtat
Дата 4.9.2009, 08:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 4
Всего: 71



Цитата(zevgan @  4.9.2009,  04:40 Найти цитируемый пост)
С  EditorGridPanel такая табличка загружается минуты.

Очень на него не похоже ..


--------------------
Рожденный в СССР !!!
ExtJS - мой фреймворк 
PM   Вверх
zevgan
Дата 4.9.2009, 15:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 27
Регистрация: 25.3.2005

Репутация: нет
Всего: нет



Не знаю, я его первый раз ручками-то пощупал. Но ведь и ячеек-то в общей массе получается до 18000, а это уже как говорится не этим-самым груши околачивать...  smile 
PM MAIL   Вверх
Nigneeliz
Дата 13.11.2022, 20:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 3
Регистрация: 13.11.2022

Репутация: нет
Всего: нет




Модератор: Сообщение скрыто.

PM MAIL   Вверх
scalosale
Дата 8.2.2023, 23:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 19
Регистрация: 8.2.2023

Репутация: нет
Всего: нет




Модератор: Сообщение скрыто.

PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1502 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.