将自定义 JS 添加到 django 管理字段答案

【问题标题】：Adding custom JS to a django admin field将自定义 JS 添加到 django 管理字段
【发布时间】：2009-11-29 19:07:12
【问题描述】：

在 django 应用程序中，我有以下模型：

class Appointment(models.Model):
    #some other fields
    #address fields
    zipcode=models.CharField(max_length=5)
    address=models.CharField(max_length=120)
    latitude=models.FloatField()
    longitude=models.FloatField()

当我呈现约会时，我只是在经度和纬度指定的位置放置一个标记，地址为文本，但是我需要纬度和经度才能做到这一点。

目前，纬度和经度必须在管理后端手动输入，但打开谷歌地图/OSM，搜索地址并输入纬度和经度是不应该手动完成的工作，所以我想要通过 Google Maps API（关键字地理编码）检索它。

理想情况下，我希望在地址旁边有一个“获取坐标”按钮，按下该按钮时，会启动地理编码请求并在地址明确时填写纬度和经度，并显示带有结果的地图并填写坐标当用户点击正确的标记时。

我知道该怎么做，但我不确定应该如何将标记和代码插入到管理后端。

我已经考虑过但不想做的一些事情，因为它们看起来不自然，或者对于这样一个简单的任务来说似乎工作量太大：

将代码放在field_options 中的地址字段描述中的一个派生自admin.ModelAdmin 的类中
将与地址相关的所有内容放在单独的模型中，并使用自定义 form（带有单独的模板
创建地址选择器小部件
使用 GeoDjango

【问题讨论】：

标签： python django google-maps user-interface django-admin

【解决方案1】：

主要处理的是客户端标记和客户端javascript。在这种情况下，使用旨在处理这些问题的设施似乎是正确的选择。我还建议制作一个自定义管理小部件。我自己使用过这种模式。根据客户端标记的大小，您甚至可以使用 Django 模板来呈现小部件。

作为替代方案，您可以编写非侵入式 javascript 在页面加载后重新呈现页面的该区域。在这种方法中，您可以简单地将带有 class Media: 的 javascript 媒体文件包含在管理模型中。

这更像是伪代码，但它给出了想法：

admin.py

class AppointmentAdmin(admin.ModelAdmin):
    # ...

    class Media:
        from django.conf import settings
        media_url = getattr(settings, 'MEDIA_URL', '/media')
        js = [ media_url+'/admin/long-lat-render.js', ]

long-lat-render.js

// Written for jQuery
$(function(){
    // on page load...

    $('#_LongitudeTag').html('');

    var getCoordButton = $('<button id="get-coords"></button>');
    $('#_LongitudeTag').append(getCoordButton);

    addGMap($('#_LongitudeTag').get(0));
});

function addGMap(element) {
   // do whatevers
}

【讨论】：

媒体文件夹是一个有效的文件夹，但我认为像这样的 STATIC_URL 更好 static_url = getattr(settings, 'STATIC_URL', '/static/') js = [ static_url+'path/to/my/自定义/file.js', ]

【解决方案2】：

有几种方法可以做到这一点。你自己已经提到了一些。

一个选项是在您的管理员中覆盖保存页面的模板并将所需的代码添加到模板中。可以使用 ModelAdmin 类中的内部 Media 类添加所需的媒体、Javascript、Css 等。这个媒体类有两个不同的属性，一个带有 css 样式表的元组和一个带有 javascript 文件的元组

我自己认为，在这种情况下，最好的选择是自定义地址选择器小部件，正如您在不想这样做的方式列表中已经提到的那样。

【讨论】：