2

我正在尝试制作一种能够附加参与者的调度程序事件编辑器。

楷模

class Session(models.Model):
  start_time = models.DateTimeField()
  end_time = models.DateTimeField()

class Participation(models.Model):
  session = models.ForeignKey(Session)
  participant = models.ForeignKey(User)
  status = models.CharField(max_length=1, choices=STATUSES)

在编辑器中，我希望有一个自动完成搜索输入，我可以从中找到user要添加到会话中的 s

预习

会话编辑器

在这里，我输入了“laurent”，我将通过单击其中一个结果名称来添加一个人
参与者颜色取决于他们status

我有一个Session用开始和结束时间定义的对象的表单
现在我想我应该有一个s的内联表单集Participation

问题

  • 您是否建议我为参与者使用内联表单集？
  • 如何动态添加/删除参与者行？
4

2 回答 2

6

这个问题看起来很简单，但正确的回答将涉及几个答案。

我将使用 jQuery 逐点给出我的解决方案。

自动完成

这是简单的部分。您可以使用select2或jqueryui 自动完成之类的插件以及查找用户的视图

def search_users(request):
    search = request.GET.get('term')
    users = User.objects.filter(
      Q(first_name__icontains=search)
    | Q(last_name__icontains=search)
    )
    ulist = list({'id': u.id, 'value': u'%s %s' % (u.first_name, u.last_name)}
        for u in users)
    return JsonResponse(ulist)

此视图与默认的 jQuery UI 自动完成插件兼容

动态表单集

这是一个棘手的问题。关键是要利用management_form和form.DELETE。这是我的解决方案：

  • 为参与者使用内联表单集（带有一个额外的表单）
  • 打印management_form
  • 通过克隆一个隐藏的空表单（额外的一个）并增加自动完成选择后，使用 jQuery 添加表单行id_form-TOTAL_FORMS
  • 通过隐藏它们并选中隐藏的删除复选框，使用 jQuery 删除表单行

模板

<form method="post">{% csrf_token %}
{{ sessionform }}
<div>
{{ participant_formset.management_form }}
  <label for="part_search">Search: </label><input id="part_search" />
    <ul id="participation_set">
{% for tform in participant_formset %}
    {{ tform.id }}
      <li>
        <span class="participant">
          {{ tform.participant }}{{ tform.instance.participant.name }}
        </span>
        <span class="status">{{ tform.status }}</span>
        <span class="delete ui-icon ui-icon-circle-minus">
          {{ tform.DELETE }}
        </span>
      </li>
{% endfor %}
    </ul>
</div>
</form>

CSS

/* Delete button */
#participation_set .delete {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Hidden delete checkbox */
#participation_set .delete input {
  display: none;
}

/* Deleted form */
#participation_set li.deleted {
  display: none;
}

/* Last hidden form to clone */
#participation_set li:last-child {
  display: none;
}

jQuery

/*! This adds a form line
 * Call it on autocomplete select
 */
function add_aform(inst, item) {
  if ($(':input[name$="participant"][value=' + item.id + ']').length) {
    return false;
  }
  var total = $('#id_' + inst + '-TOTAL_FORMS').val();
  var sul = '#' + inst;
  var li = $(sul + ' li:last-child');
  var new_li = li.clone().appendTo(sul);
  li.find('span.participant').append(item.label);
  li.find(':input[name$="participant"]').val(item.id);
  new_li.find(':input').each(function () {
    var new_name = $(this).attr('name')
      .replace('-' + (total - 1) + '-', '-' + total + '-');
    $(this).attr('name', new_name);
  });
  new_li.find('label').each(function () {
    var tmp = $(this).attr('for')
      .replace('-' + (total - 1) + '-', '-' + total + '-');
    $(this).attr('for', new_for);
  });
  new_li.find('.delete').click(del_aform);
  $('#id_' + inst + '-TOTAL_FORMS').val(++total);
}

/*! This removes a form line
 * Call it on click from delete buttons (placed inside each li)
 */
function del_aform() {
  $(this).parents('li').addClass('deleted');
  $(this).find(':checkbox').attr('checked', true);
}

我知道我也可以使用一个empty_form实例并使用__prefix__来替换 ids，这简化了 javascript 以获得更好的可维护性，但我没有找到一种方法来分解真实形式和空形式之间的代码。

看法

该视图非常标准，使用inlineformset_factory设置extra为 1 （以获取唯一要克隆的隐藏表单）。也不要忘记HiddenInput为该字段使用小部件participant

于 2012-04-26T16:14:55.073 回答
1

这个插件将帮助您获得您正在寻找的自动完成功能：

https://github.com/millioner/django-ajax-select

于 2012-04-26T17:57:50.000 回答