代码之家 › 专栏 › 技术社区 › tstenner

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

django-admin user-interface google-maps django python

tstenner · 技术社区 · 15 年前

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

当我呈现一个约会时,我只是在经度和纬度指定的位置放置一个标记,地址为文本,但是我需要经度和纬度来完成这个任务。

目前,纬度和经度必须在管理后端手动输入,但打开google maps/osm,搜索地址和输入纬度和经度是不应该手工完成的工作,所以我想通过google maps api(关键字geocoding)检索它。

理想情况下,我希望在地址旁边有一个“获取坐标”按钮,当按下该按钮时,将启动一个地理编码请求,并在地址不含糊时填充纬度和经度,并显示带有结果的地图,当用户单击右标记时填充坐标。

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

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

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

2 回复 | 直到 15 年前

Mark 15 年前

有几种方法可以做到这一点。你自己也提到过。

一个选项是在管理员中重写保存页面的模板,并将所需的代码添加到模板中。所需的媒体、javascript、css等可以使用modeladmin类中的内部媒体类添加。这个媒体类有两个不同的属性,一个包含css样式表的元组和一个包含javascript文件的元组

我认为对于我自己来说,在这种情况下最好的选择是一个定制的地址选择器小部件,正如您在不想这样做的方法列表中已经提到的那样。

T. Stone 15 年前

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

另外,您可以编写非侵入性的javascript,以便在页面加载后重新呈现页面的该区域。在这个方法中,您可以简单地将javascript媒体文件包含在 class Media: 在管理模型上。

这更像是伪代码,但它给出了以下想法:

行政管理部门

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-渲染.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
}