👵🏽 👨🏽‍🎓 👩🏼‍🤝‍👨🏻 Djangoでのインライン編集 ☝🏾 🚡 🌄

最近、タスクはユーザーに便利なデータ編集ツールを提供することでした。ユーザーに結果をすぐに見てもらい、編集や表示のために複数のページ間を移動しないようにしました。少しグーグルで、ビジュアルデータ編集を実装できる優れたdjango-inplaceeditアプリケーションが見つかりました。

PyPIからのインストール：

pip install django-inplaceedit

アプリケーションをsettings.pyのプロジェクトに接続します。

 INSTALLED_APPS = ( .... 'inplaceeditform', )

 TEMPLATE_CONTEXT_PROCESSORS = ( #...# 'django.core.context_processors.request', #...# )

これらは私たちが使用した設定です。ドキュメントにはさらに多くの設定があります

 ADAPTOR_INPLACEEDIT_EDIT = 'my_app.perms.MyAdaptorEditInline' # "  perms.py,  - " INPLACEEDIT_DISABLE_CLICK = False # "    Enter" THUMBNAIL_DEBUG = True INPLACEEDIT_EVENT = "click" # "   "

アダプターの定義またはデフォルトのアダプターのオーバーライド。

なぜこれが必要なのでしょうか？ django-inplaceedit 、 django-inplaceedit-extra-fieldsの拡張機能があり、AutoCompleteManyToManyFieldとAutoCompleteForeingKeyFieldでの作業を追加します。両方のアプリケーションのアダプターの名前が一致し、それらを再定義できます。または、独自のアダプターを作成できます。

 ADAPTOR_INPLACEEDIT = {'auto_fk': 'inplaceeditform_extra_fields.fields.AdaptorAutoCompleteForeingKeyField', 'auto_m2m': 'inplaceeditform_extra_fields.fields.AdaptorAutoCompleteManyToManyField', 'image_thumb': 'inplaceeditform_extra_fields.fields.AdaptorImageThumbnailField', 'tiny': 'inplaceeditform_extra_fields.fields.AdaptorTinyMCEField',}

base.htmlでの接続

 {% load inplace_edit %} {% inplace_toolbar %} or {% inplace_static %}

urls.pyの接続

 urlpatterns = patterns('', #...# (r'^inplaceeditform/', include('inplaceeditform.urls')), #...# )

権利定義の編集

デフォルトでは、django-inplaceeditを使用して情報を編集できるのはスーパーユーザーのみです。これは、権限を上書きすることで簡単に修正できます。上記のことを覚えておいてください

  ADAPTOR_INPLACEEDIT_EDIT = 'my_app.perms.MyAdaptorEditInline'

今もっと。

my_app内にperms.pyファイルを作成します。これはドキュメントからのファイルです

 class MyAdaptorEditInline(object): @classmethod def can_edit(cls, adaptor_field): user = adaptor_field.request.user obj = adaptor_field.obj can_edit = False if user.is_anonymous(): pass elif user.is_superuser: can_edit = True else: can_edit = has_permission(obj, user, 'edit') return can_edit

inlineeditを使用してテンプレートをダウンロードする前にすべてのチェックを行ったため、ファイルがよりシンプルになりました

 class MyAdaptorEditInline(object): @classmethod def can_edit(cls, adaptor_field): can_edit = True return can_edit

編集テンプレートで使用

 {% extends "base.html" %} {% load i18n inplace_edit %} ... <fieldset> <legend><span class="has-tip tip-top" data-width="300" title="     ."><wave class="social foundicon-torso"><p> </p></wave></span></legend> <ul class="square"> <li><p class="definition">: </p><p>{% inplace_edit "seeker.user.first_name" adaptor="tiny", auto_height=1, auto_width=1, edit_empty_value="  " %}</p></li> <li><p class="definition"> : </p><p>{% inplace_edit "seeker.age" adaptor="text", auto_height=1, auto_width=1, edit_empty_value="  " %}</p></li> <li><p class="definition"> : </p><p class="city">{% inplace_edit "seeker.city" adaptor="text", auto_height=1, auto_width=1, edit_empty_value="" %}</p></li> </ul> </fieldset>

そして、編集前の外観：

編集中：

次に、ページ全体のスクリーンショット。テキストエリアに注意してください、WYSIWYGエディターが登場しました

表示：

編集モードの場合：

テンプレート内のエディターの例：

 {% inplace_edit "seeker.resume_workexp|safe" filters_to_show="safe", adaptor="tiny", tag_name_cover="div", auto_height=1, auto_width=1, edit_empty_value="  " %}

さらに、これはリブートなしのまったく同じページです。編集の可能性について十分なツールチップがあり、誰もが最初に理解できるように、ユーザーに確認しました。

考えられる問題

別のプロジェクトでは、image_thumbアダプターを使用して写真をアップロードおよび編集しました。画像の編集中にエラーが発生しました：

 TemplateSyntaxError at /adverts/cabinet/ Invalid block tag: 'endthumbnail', expected 'elif','else'  'endif'

解決策

このエラーは、django-inplaceedit-extra-fieldsをインストールするときに必要な「sorl.thumbnail」が原因です。ソースでdjango-inplaceedit-extra-fieldsを見つけたのは、最初にsorl.thumbnailが呼び出され、その呼び出しが置き換えられたときです。

django-inplaceedit-extra-fieldsパッケージのfields.pyを編集、96行目：

 from sorl import thumbnail #   from easy_thumbnails import thumbnail #    easy_thumbnails

Githubのリンク：

django-inplaceedit

django-inplaceedit-extra-fields

Djangoでのインライン編集