- PVSM.RU - https://www.pvsm.ru -
Хочу поделиться с обществом собственным плагином, который упрощает работу с динамическими формами и называется jqDynaForm. Под динамическими формами я подразумеваю формы, в которые при заполнении пользователь может добавлять по необходимости дополнительные поля или блоки полей. Разумеется, в каждом месте разрешено добавлять только заранее разрешенные виды блоков. Вот примеры подобных простейших форм:
1. Контактная форма, в которой есть поле «телефон». Пользователь может добавить еще несколько дополнительных полей для телефонов, если возникнет желание.
2. Счет на оплату. Есть фиксированный набор полей, таких как «имя плательщика» и «номер счета». Кроме того, есть таблица с позициями. Каждая позиция состоит следующих полей: «наименование», «количество», «цена». Пользователь может добавлять произвольное количество дополнительных позиций.
Давайте рассмотрим работу с jqDynaForm на примере такого счета. Вот пример такой формы:
Давайте посмотрим на HTML код, который необходимо приготовить для плагина:
<!-- Base form -->
<h1>Simple form demo</h1>
<div id="smallForm">
<h2>Invoice</h2>
<p>Number: <input name="number" size="6"> Payer: <input name="payer"></p>
<h3>Products</h3>
<div data-holder-for="product"></div>
<p> </p>
<input type="button" value="Save" id="saveSmallForm">
</div>
<!-- Library of dynamic blocks. Here is only one block named "product" -->
<div style="display:none">
<div data-name="product" data-label="Product" class="product">
<input name="title" style="width:600px">
Price: <input name="price" style="width:100px; text-align:right">
X <input name="amount" class="short" value="1" style="width:50px">
</div>
</div>
Выкину все лишнее, чтобы стало нагляднее:
<!--Базовая форма -->
<div>
… Фиксированные поля формы…
<div data-holder-for="<ПУНКТ_СЧЕТА>"></div>
<input type="button" value="Save">
</div>
<!--Код для динамической вставки-->
<div data-name="ПУНКТ_СЧЕТА">
… Поля отдельного пункта счета …
</div>
Т.е. у нас есть некая базовая форма с фиксированным набором полей. Внутри этой формы мы размещаем холдер, DIV помеченный атрибутом «data-holder-for». Значение атрибута задает имя блока, который сюда можно вставлять. HTML код этого блока задается отдельно от формы и помечается атрибутом data-name.
Кнопки добавление, удаления пунктов, поведение drag-and-drop для сортировки и переноса полностью формируется плагином.
Чтобы получить значения полей формы надо сделать следующий вызов
var json = $(<ФОРМА>).jqDynaForm('get');
и он вернут JSON объект следующей структуры:
{
"number": "123",
"payer": "Fake Incorporated",
"productArray": [
{
"title": "HP Pavilion g7-2010nr 17.3-Inch",
"price": "499.99",
"amount": "3"
},
{
"title": "Samsung Galaxy Tab 2 (7-Inch, Wi-Fi)",
"price": "248.00",
"amount": "1"
},
{
"title": "HP Envy 4-1030us 14-Inch Ultrabook",
"price": "779.99",
"amount": "1"
}
]
}
Обратите внимание, что повторяющиеся вложенные блоки автоматически размещаются в массивах. Значения ключей в полях, это атрибут name в тегах INPUT и SELECT.
Если у вас есть уже такой готовый JSON объект (сформированный скриптом, или считанный из базы данных), то вы можете при помощи одного вызова воссоздать форму.
$(<ПУСТАЯ_БАЗОВАЯ_ФОРМА>).jqDynaForm('set', json);
После этого вызова мы получим исходную форму с заполненными полями и сформированными вложенными блоками. Разумеется, при наличии правильной исходной формы и подготовленных блоков полей.
На самом деле, структура формы может быть гораздо сложней, потому что вы можете размещаться холдеры не только в базовой форме, но и внутри динамических блоков. Холдер даже может ссылаться на самого себя, формирую древовидную рекурсивную структуру. Вот пример более сложной формы:
Перечислю наиболее важные фичи:
Также планирую добавить следующее возможности:
Как работать с полученной JSON структурой. Можно обрабатывать на JavaScript-е, можно отправить на сервер и превратить, например в php-array древовидную структуру.
Обычно значения полей хранят в базах данных. С классическими «плоскими» формами все понятно. Такая форма замечательно ложиться в одну запись таблицы реляционной базы данных. А тут форма древовидная, и структура данных соответственно тоже древовидная. Вариантов хранения много, вот некоторые:
Я много занимаюсь разработкой разного рода веб-приложений. Многие приложения содержат большое количество форм. Создание обработчиков форм часто отнимают много времени. Есть разного рода решения, которые упрощают создание обычных, плоских форм. Но когда требуются динамические формы, то тут стандартные решения, как правило, уже мало помогают.
Вот типичный ход работы над проекта в стиле «ночной кошмар». От Заказчика с некоторым периодом поступают следующие требования:
Дабы избежать кошмара постоянного программирования всех этих кнопочек – «добавить», «удалить», «перенести», не мучаться с формированием динамических структур, удобно обрабатывать значения полей, я и задумался на созданием этого плагина.
Заранее предупреждаю, что плагин еще сырой. Но если у общества будет интерес, то я планирую его дорабатывать и выкладывать следующие версии.
Страничка проекта находится на Google Code [1]
Скачать рабочий пример и исходники можно здесь [2]
А здесь, можно поиграть с живым примером [3]
Автор: tushev
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/14724
Ссылки в тексте:
[1] Google Code: http://code.google.com/p/jq-dyna-form
[2] рабочий пример и исходники можно здесь: http://code.google.com/p/jq-dyna-form/downloads/list
[3] поиграть с живым примером: http://probasis.ru/jq-dyna-form/example.html
Нажмите здесь для печати.