Django--複用django自帶的多對多控制元件
阿新 • • 發佈:2019-02-05
Django自帶的多對多控制元件雖然樣式普通,卻很實用,能避免程式設計師重複造輪子。
現在就詳解如何在前端頁面複用此控制元件,滿足自身開發需求。
首先,Djaong的templates中一般會有個base.html,是一切其他網頁的父類。在base.html中一定要加入:
{% load static %}
這個是載入配置檔案中的:STATIC_URL。然後在setting.py中將STATIC_URL改為如下值:
STATIC_URL = '/static/'
然後,在setting.py所在的目錄中新建資料夾static,用於存放你的css以及js檔案。
下面就是最重要的部分了,在你要顯示控制元件的網頁中加入如下程式碼:
static之前已經說了,會用/static/將域名和檔案目錄拼起來,如第一個檔案的目錄就是:專案域名/static/admin/css/forms.css<link href="{% static "admin/css/forms.css" %}" rel="stylesheet"> <link href="{% static "admin/css/widgets.css" %}" rel="stylesheet"> <link href="{% static "admin/css/overrides.css" %}" rel="stylesheet"> <script src="{% static "admin/js/jquery.init.js" %}"></script> <script src="{% static "admin/js/admin/RelatedObjectLookups.js" %}"></script> <script src="{% static "admin/js/core.js" %}"></script> <script src="{% static "admin/js/SelectBox.js" %}"></script> <script src="{% static "admin/js/SelectFilter2.js" %}"></script> <script src="{% static "admin/js/inlines.js" %}"></script> <script src="/xxxx/admin/jsi18n"></script> <script> addEvent(window, "load", function(e) { SelectFilter.init("id_permissions", "許可權", 0, "{% static "admin/" %}"); }); </script>
多對多控制元件需要以上程式碼中所列的css以及js檔案,以上檔案在django中都有。
最後一個js檔案,src="/xxxx/admin/jsi18n",xxxx是指你自己配的專案路徑。
然後,你得複寫addEvent方法,呼叫SelectFilter的init方法,將引數依次傳進去,引數依次為:
id_permissions--多對多控制元件的id
許可權--多對多控制元件的名稱
0--暫時不記得啦,預設0就行
{% static "admin/" %}--在該目錄查詢圖片檔案
按照如上配置後,你就可以在網頁中複用django自帶的控制元件了。
網上還有其他的樣式檔案,可以修改控制元件的樣式,大家可以自己嘗試。