python - Django Select2：以与您在拖放中选择的项目相同的顺序保存项目
问题描述
如果您想通过拖放操作 django select2，那么您需要在代码中添加一些 JS
保存您在表单中选择的数据。
你需要先安装 django-select2 https://pypi.org/project/django-select2/
模型.py
from django_select2 import forms as s2forms
from django import forms
from .models import Achievement, Industries
class IndustriesWidget(s2forms.ModelSelect2MultipleWidget):
search_fields = [
"name__icontains",
]
class SkillsWidget(s2forms.ModelSelect2MultipleWidget):
search_fields = [
"name__icontains",
]
class AchievementForm(forms.ModelForm):
class Meta:
model =Achievement
fields = ["title", 'skills', 'industries']
widgets = {
"skills": SkillsWidget,
"industries": IndustriesWidget
}
def __init__(self, *args, **kwargs):
self.request = kwargs.pop('request', None)
super(AchievementForm, self).__init__(*args, **kwargs)
self.fields['skills'].widget.attrs.update({'class' : 'form-control custom-select select2-selection'})
self.fields['industries'].widget.attrs.update({'class' : 'form-control custom-select select2-selection'})
django 表单 我已经创建了三个 django 模型，并且我正在将模型用于 django 表单。
class IndustriesWidget(s2forms.ModelSelect2MultipleWidget):
search_fields = [
"name__icontains",
]
class SkillsWidget(s2forms.ModelSelect2MultipleWidget):
search_fields = [
"name__icontains",
]
class AchievementForm(forms.ModelForm):
class Meta:
model =Achievement
fields = ["title", 'skills', 'industries']
widgets = {
"skills": SkillsWidget,
"industries": IndustriesWidget
}
def __init__(self, *args, **kwargs):
self.request = kwargs.pop('request', None)
super(AchievementForm, self).__init__(*args, **kwargs)
self.fields['skills'].widget.attrs.update({'class' : 'form-control custom-select select2-selection'})
self.fields['industries'].widget.attrs.update({'class' : 'form-control custom-select select2-selection'})
jQuery
$(document).ready(function () {
function convertObjectToSelectOptions(obj) {
var htmlTags = '';
for (var tag in obj) {
for (const [key, value] of Object.entries(obj[tag])) {
console.log(key, value);
htmlTags += '<option value="' + key + '" selected="selected">' + value + '</option>';
}
}
return htmlTags;
}
$("ul.select2-selection__rendered").sortable({
containment: 'parent',
stop: function (event, ui) {
var arr = Array.from($(event.target).find('li:not(.select2-search)').map(function () {
var Dict = {};
var id = $(this).data('data').id;
Dict[id] = $(this).data('data').text;
return Dict;
}))
$('#id_skills').html(convertObjectToSelectOptions(arr)).trigger('change');
}
});
$("#id_industries").parent().find("ul.select2-selection__rendered").sortable({
containment: 'parent',
stop: function (event, ui) {
var arr = Array.from($(event.target).find('li:not(.select2-search)').map(function () {
var Dict = {};
var id = $(this).data('data').id;
Dict[id] = $(this).data('data').text;
return Dict;
}))
$('#id_industries').html(convertObjectToSelectOptions(arr)).trigger('change');
}
});
});