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

Adding custom JS to a django admin field

提问by tstenner

In a django application I have the following model:

在 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()

When I'm rendering an Appointment, I'm just putting a marker at the position specified by longitude and latitude with the address as text, however I need the latitude and longitude to do that.

当我渲染约会时，我只是在经度和纬度指定的位置放置一个标记，并将地址作为文本，但是我需要纬度和经度来做到这一点。

Currently, latitude and longitude have to be entered manually in the admin backend, but opening Google Maps/OSM, searching for the address and entering latitude and longitude is work that shouldn't have to be done by hand, so I want to retrieve it through the Google Maps API (keyword Geocoding).

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

Ideally, I want a button "Get coordinates" next to the address, which, when pressed, starts a Geocoding request and fills in latitude and longitude when the address is unambiguous and presents a map with the results and fills in the coordinates when the user clicks on the right marker.

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

I know how to do that, but I'm not sure how I should insert the markup and the code into the admin backend.

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

Some things I already considered but don't want to do as they don't seem natural or seem to be too much work for such a simple task:

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

• putting the code in the address field's description in field_optionsin a class derived from admin.ModelAdmin
• putting everything address related in a separate model and using a custom form(with a separate template
• create an address picker widget
• use GeoDjango

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

采纳答案by Mark

There are several ways of doing this. You already mentioned some yourself.

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

An option would be to override the template for the save page in your admin and add the needed code to the template. The needed media, Javascript, Css, etc, could be added using an inner Media class in your ModelAdmin class. This media class has two different attributes, a tuple with css stylesheets and a tuple with javascript files

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

I think for myself, that the best option in this case would be a custom address picker widget as you already mention in the your list of ways you don't want to do it.

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

回答by T. Stone

What is primarily being dealt with is client-side markup and client-side javascript. Being the case, it would seem that using a facility that's designed to handle those would be the proper choice. I'd also recommend making a custom admin widget. I've used this pattern myself. Depending on the size of the client-side markup, you can even make use of a Django template to render the widget.

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

As an alternative, you could write non-intrusive javascript to re-render that area of the page after the page has loaded. In this method, you could simply include that javascript media file with class Media:on the admin model.

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

This is more like pseudo-code than anything but it gives the idea:

这更像是伪代码而不是任何东西，但它提供了一个想法：

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

长纬度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
}