Django自帶的多對多控制元件雖然樣式普通，卻很實用，能避免程式設計師重複造輪子。

現在就詳解如何在前端頁面複用此控制元件，滿足自身開發需求。

首先，Djaong的templates中一般會有個base.html，是一切其他網頁的父類。在base.html中一定要加入：

{% load static %}

STATIC_URL = '/static/'

下面就是最重要的部分了，在你要顯示控制元件的網頁中加入如下程式碼：

<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自帶的控制元件了。

網上還有其他的樣式檔案，可以修改控制元件的樣式，大家可以自己嘗試。