PHP + X-editable + Bootstrap, пример редактирования данных в таблице на лету
Форум PHP
Редактируемая таблица
Сегодня я расскажу как сделать редактируемые зоны сайта, которые можно изменять не прибегая к помощи визуальных редакторов и редакторов кода. Задача - сделать максимально интуитивный интерфейс для редактирования. Я буду показывать на примере таблицы, но эту технику можно приспособить изменив пару строк для любых блочных элементов, вплоть до body хотя тут смысла уже мало. Есть таблица, программер и пользователь. Пользователь не знает и знать не хочет html. Программер очень ленится делать админку с визуальным редактором, а потом чистить код, полученный от этого редактора. И есть таблица, которую должен редактировать пользователь. Я хочу чтобы при клике на ячейке таблицы, появлялось текстовое поле с содержимым этой ячейки. А при уходе фокуса с этого поля, его текущее содержимое становилось содержимым ячейки. Конечно, эта задача решается на JavaScript. И конечно я буду использовать горячо любимый мной jQuery. Для того, чтобы они исчезали, нужно вешать на событие blur еще один обработчик. Причем делать это нужно каждый раз, как мы генерируем поле. Глюки начинаются когда мы тыкаем по самому полю. Событие click для ячейки тоже срабатывает. Поэтому мы получаем код поля редактирования и вставляем его в поле редактирования. Чтобы этого не происходило, нужно отлавливать элемент, по которому происходит клик. Теперь при кликах на разные поля таблицы, мы будем получать текстовые поля, заполнив которые, можно редактировать таблицу. Примерно такой интерфейс у всеми нами любимых табличных редакторов вроде Excel или Calc. Нативней не придумаешь, пожалуй. Единственное, что мне хотелось бы изменить - возможность сохранения изменений по Enter. Этот скрипт, конечно, можно развить для конкретных нужд. Например, можно править не только ячейки, но и блоки div. Можно приспособить к этой же идее переписывание src у картинок. На ум сразу приходит, что нужно бы привязываться не к имени блока, а к специальному классу. Например, редактировать разрешать только элементы с классом editable. Если смотреть дальше, то можно сделать дополнительные классы ed-text и ed-line и по ним определять рисовать ли input или textarea. Как сохранить результат - думаю понятно. Нужно при помощи того же JavaScript взять весь измененный контент и каким-либо образом отправить на сервер, где скрипт знает что с этим делать. Лично я при помощи такого нехитрого метода сделал интерфейс, при помощи которого специальный человек может редактировать большую таблицу. Это гораздо проще и эффективней, чем если бы он присылал мне аналог этой таблицы в Excel или говорил в какую по счету ячейку что вставить. Если вам понравилась идея и вы считаете что при помощи нее сможете решить свою задачу - используйте ее смело. А если использовать ее самостоятельно не получается - обращайтесь ко мне. Perl PHP JavaScript RegExp HTML CSS MODx. Бесплатный видеокурс о самооценке. Вот что у нас получилось. Возможно, вам будет интересно: Делаем классную ленту изображений с автопрокруткой Выбор пунктов из таблицы на JS Способ задания min-width для IE6 Простое кэширование в JavaScript Динамическая подгрузка JavaScript Загрузка втростепенного контента Ajax-ом 2 способа менять дизайн автоматически Основы html 3. Metrika ; yaCounter
Тема отсутствует Вернуться Тема отсутствует или закрыта для просмотра. Вернуться Тема отсутствует или закрыта для просмотра.
Лучшие истории о паровозике томасе
Внешний динамикдля телефонасвоими руками
Мужской кардиган с капюшоном спицами схемы
Понятие преступленияи наказания цели наказания
Как плести объемные колоски