Question

使用django-grappelli为管理UI在项目上实现django-import-export后，我发现两个库之间存在一些CSS不兼容性：https://github.com/sehmaschine/django-grappelli/issues/435

为了解决这个问题，我创建了自定义管理模板覆盖，因此import-export使用了grappelli的CSS：

/templates/admin/import_export/base.html

{% extends "admin/base_site.html" %}
{% load i18n admin_static admin_modify %}
{% load admin_urls %}

{% block bodyclass %}{{ opts.app_label }}-{{ opts.object_name.lower }} change-form{% endblock %}
{% if not is_popup %}
{% block breadcrumbs %}
<ul>
    <li><a href="{% url 'admin:index' %}">{% trans 'Home' %}</a></li>
    <li><a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_label|capfirst|escape }}</a></li>
    <li><a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a></li>
    <li> {% block breadcrumbs_last %}{% endblock %}</li>
</ul>

{% endblock %}
{% endif %}

/templates/admin/import_export/change_list.html

{% extends "admin/change_list.html" %}
{% load i18n grp_tags %}

{# Original template renders object-tools only when has_add_permission is True. #}
{# This hack allows sub templates to add to object-tools #}
{% block object-tools %}
  <ul class="grp-object-tools">
    {% block object-tools-items %}
      {% if has_add_permission %}
        {{ block.super }}
      {% endif %}
    {% endblock %}
  </ul>
{% endblock %}

/templates/admin/import_export/import.html

{% extends "admin/import_export/base.html" %}
{% load i18n grp_tags %}
{% load admin_urls %}
{% load import_export_tags %}

{% block breadcrumbs_last %}
{% trans "Import" %}
{% endblock %}

{% block content %}
{% if confirm_form %}
  <form action="{% url opts|admin_urlname:'process_import' %}" method="POST">
    {% csrf_token %}
    {{ confirm_form.as_p }}
    <p>
      {% trans "Below is a preview of data to be imported. If you are satisfied with the results, click 'Confirm import'" %}
    </p>
    <div class="grp-form-row grp-submit-row">
      <input type="submit" class="grp-button grp-default" name="confirm" value="{% trans 'Confirm import' %}">
    </div>
  </form>

{% else %}
  <form action="" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <div>
    <div class="grp-form-row"><p>
      {% trans "This importer will import the following fields: " %}
      <code>{{ fields|join:", " }}</code>
    </p></div>

    <fieldset class="module aligned">
      {% for field in form %}
        <div class="grp-form-row">
          {{ field.errors }}

          <div class="c-1">{{ field.label_tag }}</div>

          <div class="c-2">{{ field }}

          {% if field.field.help_text %}
          <p class="help grp-help">{{ field.field.help_text|safe }}</p>
          </div>
          {% endif %}
        </div>
      {% endfor %}
    </fieldset>

    <div class="grp-form-row grp-submit-row">
      <input type="submit" class="grp-button grp-default" value="{% trans 'Submit' %}">
    </div>
    </div>
</form>
{% endif %}

{% if result %}

  {% if result.has_errors %}
    <h2>{% trans "Errors" %}</h2>
    <ul>
      {% for error in result.base_errors  %}
      <li>
        {{ error.error }}
        <div class="traceback errornote">{{ error.traceback|linebreaks }}</div>
      </li>
      {% endfor %}
      {% for line, errors in result.row_errors %}
        {% for error in errors %}
          <li>
            {% trans "Line number" %}: {{ line }} - {{ error.error }}
            <div><code>{{ error.row.values|join:", " }}</code></div>
            <div class="traceback errornote">{{ error.traceback|linebreaks }}</div>
          </li>
        {% endfor %}
      {% endfor %}
    </ul>
  {% else %}

  <h2>
    {% trans "Preview" %}
  </h2>
  <table>
    <thead>
      <tr>
        <th></th>
        {% for field in result.diff_headers %}
          <th>{{ field }}</th>
        {% endfor %}
      </tr>
    </thead>
    {% for row in result.rows %}
    <tr>
      <td>
        {% if row.import_type == 'new' %}
          {% trans "New" %}
        {% elif row.import_type == 'skip' %}
          {% trans "Skipped" %}
        {% elif row.import_type == 'delete' %}
          {% trans "Delete" %}
        {% elif row.import_type == 'update' %}
          {% trans "Update" %}
        {% endif %}
      </td>
      {% for field in row.diff %}
      <td>
        {{ field }}
      </td>
      {% endfor %}
    </tr>
    {% endfor %}
  </table>
  {% endif %}

  {% endif %}
{% endblock %}

但是，如果我转到/ admin / foo / object / import /（ObjectAdmin将是import_export.admin中的ImportExportModelAdmin的实例），我的表单中的输入元素不会显示在管理视图中，即使我在grappelli的.grp-button .grp-default CSS类之后对它们进行了建模（并且可以看到grappelli在自己的文档中使用输入元素）

我无法弄清楚这部分表格存在一些问题：

<div class="grp-module grp-submit-row">
      <input type="submit" class="grp-button grp-default" value="{% trans 'Submit' %}">
    </div>

对于导入和导出视图都是如此。我可以看到其他的导入和导出表单，而不是表单提交输入。

项目是Django 1.9版 Django的格拉佩利== 2.10.1 Django的进出口== 1.0.0

Answer 1

我仍然有兴趣理解为什么表单输入不会显示，但我用按钮替换了输入以执行相同的操作，那些显示和管理表单现在可以正常工作。

ex，替换：

<input type="submit" value="{% trans 'Submit' %}" class="grp-button grp-default" />

使用：

<button type="submit" class="grp-button" title="{% trans 'Submit' %}" value="{% trans 'Submit' %}">{% trans 'Submit' %}</button>

django-import-export表单<input />无法在自定义管理模板中使用grappelli进行渲染

1 个答案: