Динамическое добавление/удаление полей форм в Django

Задача стояла следующая:
есть список сущностей (к примеру, упражнений), каждая из которых в форме выводится в виде нескольких полей ввода (к примеру, сеты и название упражнения), хочется иметь возможность яваскриптом добавлять/удалять упражнения, менять их положение.
Для этого были использованы формсеты (django.forms.formsets) и jquery на клиенте.

В теории всё так: в шаблон передаём формы из формсета (подводный камень тут — для правильной валидации нужно в шаблоне внутри формы нужно не забыть вписать скрытые инпуты, отвечающие за количество форм формсета на странице, для этого пишем в шаблоне {{ exercisesFormset.management_form }}).
В шаблоне у каждого упражнения присутствуют контролы для удаления/добавления и перемещения упражнений, после загрузки страницы ненужные контролы у каждого упражнения скрываются, а после, к примеру, добавления нового упражнения контролы перерисовываются.
Для удаления все поля ввода упражнения очищаются, после чего скрываются.

Это была теория, теперь практика. Ниже гольный код с комментариями.

Во вьюхе нужно добавить следующее:

from django.forms.formsets import formset_factory
...
class NameForm( forms.ModelForm ):
	name = forms.CharField( max_length = 250 )
	description = forms.CharField( widget = forms.Textarea, required = False )

class ExerciseNameForm( forms.Form ):
	name = forms.ModelChoiceField( Exercise.objects.all() )
	sets = forms.IntegerField( min_value = 1, max_value = 200 )
...
@login_required
def add( request, id ):
	user = request.user
	other = Other()
	if request.method == "POST":
		nameForm = NameForm( request.POST, instance = other )
		exercisesFormsetClass = formset_factory( ExerciseNameForm )
		exercisesFormset = exercisesFormsetClass( request.POST, prefix = "exercises" )
		if nameForm.is_valid() and exercisesFormset.is_valid():
			nameData = nameForm.cleaned_data
			other.name = nameData["name"]
			other.description = nameData["description"]
			other.save()
			for position, exerciseForm in enumerate( exercisesFormset.forms, start = 1 ):
				exerciseData = exerciseForm.cleaned_data
				exercise = Exercise()
				exercise.exercise = exerciseData["name"]
				exercise.other = other
				exercise.sets = exerciseData["sets"]
				exercise.position = position
				exercise.save()
			return HttpResponseRedirect( "/other/%s/" % other.id )
		hide_exercises = request.POST["hide_exercises"]
	else:
		exercisesFormsetClass = formset_factory( ExerciseNameForm, extra = 1 )
		nameForm = NameForm( instance = other )
		exercisesFormset = exercisesFormsetClass( prefix = "exercises" )
		hide_exercises = ""
	return render_to_response( "add.html", { "nameForm": nameForm, "exercisesFormset": exercisesFormset, "hide_exercises": hide_exercises }, context_instance = RequestContext( request ) )

from django.forms.formsets import formset_factory

...

class NameForm( forms.ModelForm ):

name = forms.CharField( max_length = 250 )

description = forms.CharField( widget = forms.Textarea, required = False )

class ExerciseNameForm( forms.Form ):

name = forms.ModelChoiceField( Exercise.objects.all() )

sets = forms.IntegerField( min_value = 1, max_value = 200 )

...

@login_required

def add( request, id ):

user = request.user

other = Other()

if request.method == "POST":

nameForm = NameForm( request.POST, instance = other )

exercisesFormsetClass = formset_factory( ExerciseNameForm )

exercisesFormset = exercisesFormsetClass( request.POST, prefix = "exercises" )

if nameForm.is_valid() and exercisesFormset.is_valid():

nameData = nameForm.cleaned_data

other.name = nameData["name"]

other.description = nameData["description"]

other.save()

for position, exerciseForm in enumerate( exercisesFormset.forms, start = 1 ):

exerciseData = exerciseForm.cleaned_data

exercise = Exercise()

exercise.exercise = exerciseData["name"]

exercise.other = other

exercise.sets = exerciseData["sets"]

exercise.position = position

exercise.save()

return HttpResponseRedirect( "/other/%s/" % other.id )

hide_exercises = request.POST["hide_exercises"]

else:

exercisesFormsetClass = formset_factory( ExerciseNameForm, extra = 1 )

nameForm = NameForm( instance = other )

exercisesFormset = exercisesFormsetClass( prefix = "exercises" )

hide_exercises = ""

return render_to_response( "add.html", { "nameForm": nameForm, "exercisesFormset": exercisesFormset, "hide_exercises": hide_exercises }, context_instance = RequestContext( request ) )

В шаблоне следующий код:

<script>
$(document).ready(function() {
	fixTotalFormsNumber();
	initiateControls();
	hideDeletedExercises(); 
});
</script>
{% block content %}
	<form action="" method="POST">
		<div class="parent">
			{% csrf_token %}
			<ul>
				{{ nameForm.as_ul }}
				{{ exercisesFormset.management_form }}
			</ul>
			{% for exerciseForm in exercisesFormset.forms %}
				<ul class="exercise-form-data">
					{{ exerciseForm.as_ul }}
					<li class="controls">
						<span class="up clickable">вверх</span>
						<span class="down clickable">вниз</span>
						<span class="delete clickable">удалить</span>
						<span class="add clickable">добавить</span>
					</li>
				</ul>
			{% endfor %}
		</div>
		<input type="hidden" name="hide_exercises" value="{{ hide_exercises }}" />
		<input type="submit" name="Добавить" />
	</form>
{% endblock %}

$(document).ready(function() {

fixTotalFormsNumber();

initiateControls();

hideDeletedExercises();

});

</script>

{% block content %}

{% csrf_token %}

<ul>

</ul>

{% for exerciseForm in exercisesFormset.forms %}

<span class="up clickable">вверх</span>

<span class="delete clickable">удалить</span>

<span class="add clickable">добавить</span>

</li>

</ul>

{% endfor %}

</div>

</form>

{% endblock %}

В шаблоне также грузится яваскрипт:

/**
* При обновлении страницы лишние элементы со страницы пропадут, а количество форм для обработки на стороне сервера останется (фф запомнит)
*/
function fixTotalFormsNumber()
{
	var inputNamePrefix = "exercises-",
		$parent = $( ".parent" );
	var count = $parent.find( "ul.exercise-form-data" ).length;
	$parent.find( "input[name=" + inputNamePrefix + "TOTAL_FORMS]" ).val( count );
}

/**
* Инициируем контролы
*/
function initiateControls()
{
	var $parent = $( ".parent" );
	$parent.find( ".controls .add" ).live( "click", function( Event ) { controlClicked( Event, "add" ) } );
	$parent.find( ".controls .delete" ).live( "click", function( Event ) { controlClicked( Event, "delete" ) } );
	$parent.find( ".controls .up" ).live( "click", function( Event ) { controlClicked( Event, "up" ) } );
	$parent.find( ".controls .down" ).live( "click", function( Event ) { controlClicked( Event, "down" ) } );
	updateControlsVisibility();
}

/**
* Скрывает "удалённые" упражнения при перезагрузке страницы
*/
function hideDeletedExercises()
{
	var $hideExercisesInput = $( "input[name=hide_exercises]" );
	var hideByIndexes = $hideExercisesInput.val().split( "," );
	if ( hideByIndexes.length )
	{
		var $rows = $( ".exercise-form-data" );
		for ( var rowNum = 0, count = $rows.length; rowNum < count; rowNum ++ )
		{
			var $row = $( $rows[rowNum] );
			if ( $.inArray( rowNum + "", hideByIndexes ) > -1 ) {
				$row.hide();
			}
		}
	}
}

function updateControlsVisibility()
{
	var $rows = $( ".exercise-form-data:visible" );
	for ( var rowNum = 0, count = $rows.length; rowNum < count; rowNum ++ )
	{
		var $row = $( $rows[rowNum] );
		if ( rowNum == 0 ) {
			$row.find( ".up" ).hide();
		}
		else {
			$row.find( ".up" ).show();
		}
		if ( rowNum == ( count - 1 ) )
		{
			$row.find( ".down" ).hide();
			$row.find( ".add" ).show();
		}
		else
		{
			$row.find( ".down" ).show();
			$row.find( ".add" ).hide();
		}
		if ( count == 1 ) {
			$row.find( ".delete" ).hide();
		}
		else {
			$row.find( ".delete" ).show();
		}
	}
}

/**
* При клике на контрол
* @param Event
* @param string ControlType
*/
function controlClicked( Event, ControlType )
{
	if ( ControlType == "add" )
	{
		addNewExerciseInputs();
		updateControlsVisibility();
	}
	else
	{
		var $el = $( Event.target ),
			inputSelectors = [ "select[name$=name]", "input[name$=sets]" ],
			rowSelector = ".exercise-form-data";
		var $currentRow = $el.parents( rowSelector );
		if ( ControlType == "delete" )
		{
			deleteExercise( $currentRow, inputSelectors );
			updateControlsVisibility();
		}
		else
		{
			rowSelector += ":visible"
			var $changeToRow;
			if ( ControlType == "up" ) {
				$changeToRow = $currentRow.prevAll( rowSelector );
			}
			else {
				$changeToRow = $currentRow.nextAll( rowSelector )
			}
			if ( $changeToRow.length ) {
				$changeToRow = $changeToRow.eq( 0 );
			}
			changeExerciseInputValues( $currentRow, $changeToRow, inputSelectors );
		}
	}

/**
 * Добавляем поля ввода для ещё одного упражнения
 */
	function addNewExerciseInputs()
	{
		var inputNamePrefix = "exercises-",
			$parent = $( ".parent" ),
		// в качестве шаболна используем последний ul для ввода упражнения
			$sourceExercise = $parent.find( "ul.exercise-form-data:last" );
	// если нашли ul и он правильный
		if ( $sourceExercise.length && $sourceExercise.find( "input[name^=" + inputNamePrefix + "]" ).length )
		{
		// для вычисления номера в шаблоне
			var re1 = new RegExp( inputNamePrefix + "(\\d*)-" );
		// для замены номеров
			var re2 = new RegExp( inputNamePrefix + "\\d*(-[^'\"]*)", "g" );
		// копируем html шаблона
			var newExerciseHtml = $sourceExercise.html();
		// получаем номер
			var sourceRowNum = parseInt( re1.exec( newExerciseHtml )[1] );
			var newRowNum = sourceRowNum + 1;
		// в html нового ul вписываем правильный номер
			newExerciseHtml = newExerciseHtml.replace( re2, inputNamePrefix + newRowNum + "$1" );
			$parent.append( "<ul class='exercise-form-data'>" + newExerciseHtml + "</ul>" );

		// увеличиваем количество форм для обработки на стороне сервера
			var $managerNums = $parent.find( "input[name=" + inputNamePrefix + "TOTAL_FORMS]" );
			$managerNums.val( parseInt( $managerNums.val() ) + 1 );
		}
	}

/**
 * "Удаляем" упражнение
 */
	function deleteExercise( $Row, InputSelectors )
	{
		if ( $Row.length )
		{
		// с пустым параметром просто сбросит все значения
			exerciseData( $Row, InputSelectors, "set" );
			$Row.hide();
			// для скрывания этого упражнения при перезагрузке страницы
				var $hideExercisesInput = $( "input[name=hide_exercises]" );
				$hideExercisesInput.val( $hideExercisesInput.val() + $Row.index( "ul.exercise-form-data" ) + "," );

		}
	}

	/**
	 * Меняем два упражнения местами
	 * @param jquery $Row1
	 * @param jquery $Row2
	 * @param Array InputSelectors
	 */
	function changeExerciseInputValues( $Row1, $Row2, InputSelectors )
	{
		if ( $Row1.length && $Row2.length )
		{
			var row1Values = exerciseData( $Row1, InputSelectors, "get" ),
				row2Values = exerciseData( $Row2, InputSelectors, "get" );
			 exerciseData( $Row1, InputSelectors, "set", row2Values );
			 exerciseData( $Row2, InputSelectors, "set", row1Values );
		}
	}

/**
 * Геттер/сеттер всех инпутов упражнения (так сложно - чтобы сеттер всегда понимал формат геттера)
 * @param jquery $Row
 * @param Array InputSelectors
 * @param string Type - get/set
 * @param Array Values - для сеттера массив значений
 */
	function exerciseData( $Row, InputSelectors, Type, Values )
	{
		Type = Type == "set" ? "set" : "get";
		Values = Values ? Values : [];
	// Пробегаемся по всем нужным элементам ввода
	// если элемент элемент типа select, то получаем/заполняем выбранный option, для инпутов - то же самое с value
		for ( var i = 0, count = InputSelectors.length; i < count; i ++ )
		{
			var inputSelector = InputSelectors[i];
			var $input = $Row.find( inputSelector );
			if ( $input.is( "select" ) )
			{
				if ( Type == "get" ) {
					Values[i] = $input[0].selectedIndex;
				}
				else {
					$input[0].selectedIndex = i in Values ? Values[i] : 0;
				}
			}
			else
			{
				if ( Type == "get" ) {
					Values[i] = $input.val();
				}
				else {
					$input.val( i in Values ? Values[i] : "" );
				}
			}
		}
		return Values;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

/**

* При обновлении страницы лишние элементы со страницы пропадут, а количество форм для обработки на стороне сервера останется (фф запомнит)

function fixTotalFormsNumber()

{

var inputNamePrefix = "exercises-",

$parent = $( ".parent" );

var count = $parent.find( "ul.exercise-form-data" ).length;

$parent.find( "input[name=" + inputNamePrefix + "TOTAL_FORMS]" ).val( count );

}

/**

* Инициируем контролы

function initiateControls()

{

var $parent = $( ".parent" );

$parent.find( ".controls .add" ).live( "click", function( Event ) { controlClicked( Event, "add" ) } );

$parent.find( ".controls .delete" ).live( "click", function( Event ) { controlClicked( Event, "delete" ) } );

$parent.find( ".controls .up" ).live( "click", function( Event ) { controlClicked( Event, "up" ) } );

$parent.find( ".controls .down" ).live( "click", function( Event ) { controlClicked( Event, "down" ) } );

updateControlsVisibility();

}

/**

* Скрывает "удалённые" упражнения при перезагрузке страницы

function hideDeletedExercises()

{

var $hideExercisesInput = $( "input[name=hide_exercises]" );

var hideByIndexes = $hideExercisesInput.val().split( "," );

if ( hideByIndexes.length )

{

var $rows = $( ".exercise-form-data" );

for ( var rowNum = 0, count = $rows.length; rowNum < count; rowNum ++ )

{

var $row = $( $rows[rowNum] );

if ( $.inArray( rowNum + "", hideByIndexes ) > -1 ) {

$row.hide();

}

function updateControlsVisibility()

{

var $rows = $( ".exercise-form-data:visible" );

for ( var rowNum = 0, count = $rows.length; rowNum < count; rowNum ++ )

{

var $row = $( $rows[rowNum] );

if ( rowNum == 0 ) {

$row.find( ".up" ).hide();

}

else {

$row.find( ".up" ).show();

}

if ( rowNum == ( count - 1 ) )

{

$row.find( ".down" ).hide();

$row.find( ".add" ).show();

}

else

{

$row.find( ".down" ).show();

$row.find( ".add" ).hide();

}

if ( count == 1 ) {

$row.find( ".delete" ).hide();

}

else {

$row.find( ".delete" ).show();

}

/**

* При клике на контрол

* @param Event

* @param string ControlType

function controlClicked( Event, ControlType )

{

if ( ControlType == "add" )

{

addNewExerciseInputs();

updateControlsVisibility();

}

else

{

var $el = $( Event.target ),

inputSelectors = [ "select[name$=name]", "input[name$=sets]" ],

rowSelector = ".exercise-form-data";

var $currentRow = $el.parents( rowSelector );

if ( ControlType == "delete" )

{

deleteExercise( $currentRow, inputSelectors );

updateControlsVisibility();

}

else

{

rowSelector += ":visible"

var $changeToRow;

if ( ControlType == "up" ) {

$changeToRow = $currentRow.prevAll( rowSelector );

}

else {

$changeToRow = $currentRow.nextAll( rowSelector )

}

if ( $changeToRow.length ) {

$changeToRow = $changeToRow.eq( 0 );

}

changeExerciseInputValues( $currentRow, $changeToRow, inputSelectors );

}

/**

* Добавляем поля ввода для ещё одного упражнения

function addNewExerciseInputs()

{

var inputNamePrefix = "exercises-",

$parent = $( ".parent" ),

// в качестве шаболна используем последний ul для ввода упражнения

$sourceExercise = $parent.find( "ul.exercise-form-data:last" );

// если нашли ul и он правильный

if ( $sourceExercise.length && $sourceExercise.find( "input[name^=" + inputNamePrefix + "]" ).length )

{

// для вычисления номера в шаблоне

var re1 = new RegExp( inputNamePrefix + "(\\d*)-" );

// для замены номеров

var re2 = new RegExp( inputNamePrefix + "\\d*(-[^'\"]*)", "g" );

// копируем html шаблона

var newExerciseHtml = $sourceExercise.html();

// получаем номер

var sourceRowNum = parseInt( re1.exec( newExerciseHtml )[1] );

var newRowNum = sourceRowNum + 1;

// в html нового ul вписываем правильный номер

newExerciseHtml = newExerciseHtml.replace( re2, inputNamePrefix + newRowNum + "$1" );

$parent.append( "<ul class='exercise-form-data'>" + newExerciseHtml + "</ul>" );

// увеличиваем количество форм для обработки на стороне сервера

var $managerNums = $parent.find( "input[name=" + inputNamePrefix + "TOTAL_FORMS]" );

$managerNums.val( parseInt( $managerNums.val() ) + 1 );

}

/**

* "Удаляем" упражнение

function deleteExercise( $Row, InputSelectors )

{

if ( $Row.length )

{

// с пустым параметром просто сбросит все значения

exerciseData( $Row, InputSelectors, "set" );

$Row.hide();

// для скрывания этого упражнения при перезагрузке страницы

var $hideExercisesInput = $( "input[name=hide_exercises]" );

$hideExercisesInput.val( $hideExercisesInput.val() + $Row.index( "ul.exercise-form-data" ) + "," );

}

/**

* Меняем два упражнения местами

* @param jquery $Row1

* @param jquery $Row2

* @param Array InputSelectors

function changeExerciseInputValues( $Row1, $Row2, InputSelectors )

{

if ( $Row1.length && $Row2.length )

{

var row1Values = exerciseData( $Row1, InputSelectors, "get" ),

row2Values = exerciseData( $Row2, InputSelectors, "get" );

exerciseData( $Row1, InputSelectors, "set", row2Values );

exerciseData( $Row2, InputSelectors, "set", row1Values );

}

/**

* Геттер/сеттер всех инпутов упражнения (так сложно - чтобы сеттер всегда понимал формат геттера)

* @param jquery $Row

* @param Array InputSelectors

* @param string Type - get/set

* @param Array Values - для сеттера массив значений

function exerciseData( $Row, InputSelectors, Type, Values )

{

Type = Type == "set" ? "set" : "get";

Values = Values ? Values : [];

// Пробегаемся по всем нужным элементам ввода

// если элемент элемент типа select, то получаем/заполняем выбранный option, для инпутов - то же самое с value

for ( var i = 0, count = InputSelectors.length; i < count; i ++ )

{

var inputSelector = InputSelectors[i];

var $input = $Row.find( inputSelector );

if ( $input.is( "select" ) )

{

if ( Type == "get" ) {

Values[i] = $input[0].selectedIndex;

}

else {

$input[0].selectedIndex = i in Values ? Values[i] : 0;

}

else

{

if ( Type == "get" ) {

Values[i] = $input.val();

}

else {

$input.val( i in Values ? Values[i] : "" );

}

return Values;

}

Альтернативы:
http://stackoverflow.com/questions/801354/django-equivalent-of-phps-form-value-array-associative-array.
http://eikke.com/django-generic-ajax-form-validation/ — для валидации формы ajax’ом.

Динамическое добавление/удаление полей форм в Django

Similar Posts

LEAVE A COMMENT Отменить ответ