Question

我是JS，HTML，Django以及所有相关内容的新手，我无法通过阅读文档或使用Google自行解决我的问题。

我想在django环境中使用x-editable将内联更改保存到数据库中。下面的模板运行完美，但现在我想用新名称覆盖数据库条目。

我尝试将代码缩减到我问题的相关部分。

models.py：

class MyClass(models.Model):
      name = models.CharField(max_length=120)

views.py：

def list(request):
    return render(request, 'list.html', {'list':MyClass.objects.all()}

urls.py：

url(r'^list/$', 'myapp.views.list', name='list'),

list.html：

{% extends "base.html" %}
{% block content %}
<script>
    $(document).ready(function() {
        $.fn.editable.defaults.mode = 'inline';   
        $('.name').editable({

        });
    });
</script>

<h1>Names</h1>
   <div>
        <table border='1'>
            {% for l in list %}
            <tr><td><a class="name">{{ l.name }}</a></td></tr>
            {% endfor %}
        </table>
    </div>

{% endblock %}

----------------------------------------------- ---------

我最有希望的方法是创建更新视图。

def list_update(request, pk):
    l = get_object_or_404(MyClass, pk=pk)
    form = ListForm(request.POST or None, instance=l)
    if form.is_valid():
        form.save()
        return redirect('list')
    return render(request, '', {'form':form})

并将以下行添加到上面的代码中：

urls.py
    url(r'^update/(?P<pk>\d+)$', 'myapp.views.list_update', name='list_update'),


list.html
    $('.name').editable({
        pk: l.pk,
        url: '{% url 'list_update' l.pk%}',
    });

但是这次尝试会导致NoReverseMatch错误，而 l.pk 似乎是空的。我对如何以正确的方式做到这一点表示感谢。

Answer 1

urls.py：

    url(r'^xed_post$', views.xed_post, name='xed_post'),

views.py中的Django视图代码（基于函数）：

from django.http import JsonResponse

def xed_post(request):
    """
    X-Editable: handle post request to change the value of an attribute of an object

    request.POST['model']: name of Django model of which an object will be changed
    request.POST['pk']: pk of object to be changed
    request.POST['name']: name of the field to be set
    request.POST['value']: new value to be set
    """
    try:
        if not 'name' in request.POST or not 'pk' in request.POST or not 'value' in request.POST:
           _data = {'success': False, 'error_msg': 'Error, missing POST parameter'}
          return JsonResponse(_data)

        _model = apps.get_model('swingit', request.POST['model'])  # Grab the Django model
        _obj = _model.objects.filter(pk=request.POST['pk']).first()  # Get the object to be changed
        setattr(_obj, request.POST['name'], request.POST['value'])  # Actually change the attribute to the new value
        _obj.save()  # And save to DB

        _data = {'success': True}
        return JsonResponse(_data)

    # Catch issues like object does not exist (wrong pk) or other
    except Exception as e:
        _data = {'success': False,
                'error_msg': f'Exception: {e}'}
        return JsonResponse(_data)

然后，在list.html中：

{% extends "base.html" %}
{% block content %}
<script>
    $(document).ready(function() {
        $.fn.editable.defaults.mode = 'inline';   
        $('.name').editable({
            params: {
                csrfmiddlewaretoken:'{{csrf_token}}',
                model:'MyClass'
            },
            url: '/xed_post',
            error: function(response, newValue) {
                return response.responseText;
            },
            success: function(response, newValue) {
                if(!response.success) return response.error_msg;
            }
        });
    });
</script>

<h1>Names</h1>
   <div>
        <table border='1'>
            {% for l in list %}
            <tr><td><a class="name" data-name="name" data-type="text" data-pk="{{ l.pk }}">{{ l.name }}</a></td></tr>
            {% endfor %}
        </table>
    </div>

{% endblock %}

请注意，将css类和Django字段名称同时使用“名称”会造成混淆。 data-name =“ name”是Django字段名称，而class =“ name”是css类。

Answer 2

Davy 的代码无法正常工作（对我而言）。

但是如果您添加：

$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});

在一切发生之前，只要您在 html 模板中的某处有 {% csrf_token %}。我只是将它放在顶部，因为我使用的是 X-editable 并且模板中没有表单标签。

因此在某处添加 {% csrf_token %} 行并将 Davy 的 JS 代码更改为：

{% extends "base.html" %}
{% block content %}
<script>
    $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
    });             

    $(document).ready(function() {
        $.fn.editable.defaults.mode = 'inline';   
        $('.name').editable({
            params: {
                model:'MyClass'
            },
            url: '/xed_post',
            error: function(response, newValue) {
                return response.responseText;
            },
            success: function(response, newValue) {
                if(!response.success) return response.error_msg;
            }
        });
    });
</script>

它应该可以工作。请注意，我从 {{ csrf_token }} 字典中删除了 params 行，因为 AJAX 设置调用会处理它，因此没有必要（至少对于我的设置而言）。

使用Django和x-editable将更改保存到数据库

----------------------------------------------- ---------

2 个答案: