Django - 编辑 HTML 表格行并更新数据库

欧马10

我创建了一个 HTML 表,它包含一些信息。但是我想添加编辑表格行文本的可能性,并通过单击“保存”来更新数据库。

有人能帮我吗?

我需要使用 Ajax 吗?如果是这样,我可以得到一些指导吗?

<table style="width:100%">
  <tr>
    <th>Questions</th>
    <th>Answers</th>
    <th>Action</th>
  </tr>
  {% for q in questions%}
  <tr>
    <td contenteditable='true'>{{q.question}}</td>
    <td contenteditable='true'>{{q.answer}}</td>
    <td>
      <center><a href="{% url 'edit_question' q.id %}">Save Edit --- </a><a href="{% url 'delete_question' q.id %}">Delete</a></center>
    </td>
  </tr>
  {%endfor%}
</table>

这是我的视图,我知道它不应该是这样的,因为视图和 HTML 表之间没有传递参数,这需要修复:

def edit_question(request,id):
  question = Question.objects.get(id=id)
  if(question):
    question.update(question = quest, answer = ans)
    return redirect('list_questions')
    return render(request, 'generator/questions.html', {'question': question})

更新

我使用了@xxbinxx 提供的解决方案,但是在视图函数中,即使它在 ajax 函数中,条件 request.method == "POST" 似乎也没有得到验证?

继承人更新的代码:

<script type="text/javascript">
function saveQuestionAnswer(e, id) {
    e.preventDefault();
    console.log(id)
    editableQuestion = $('[data-id=question-' + id + ']')
    editableAnswer = $('[data-id=answer-' + id + ']') 
    console.log(editableQuestion.text(), editableAnswer.text())
    $.ajax({
        url: "list/update/"+id,
        type: "POST",
        dataType: "json",
        data: { "question": editableQuestion.html(), "answer": editableAnswer.html() },
        success: function(response) {
            // set updated value as old value 
            alert("Updated successfully")            
        },
        error: function() {
            console.log("errr");
            alert("An error occurred")
        }
    });
    return false;
}
</script>

HTML :

<table style="width:90%">
        <tr>
            <th ><font color="#db0011">Questions</th>
            <th><font color="#db0011">Answers</th>
            <th><font color="#db0011">Action</th>

        </tr>
        {% for q in questions%}
        <tr>
            <td width="40%" height="50px" contenteditable='true' data-id="question-{{q.id}}" data-old_value='{{q.question}}' onClick="highlightEdit(this);">{{q.question}}</td>
            <td width="45%" height="50px" contenteditable='true' data-id="answer-{{q.id}}" data-old_value='{{q.answer}}'>{{q.answer}}</td>
            <td width="15%" height="50px"><center>
        <a class="button" href="{% url 'edit_question' q.id %}" onclick="saveQuestionAnswer('{{q.id}}')">Edit</a>
        <a class="button" href="{% url 'delete_question' q.id %}">Delete</a>
      </center></td>
        </tr>
        {%endfor%}
    </table>

视图.py

def edit_question(request,id):
    quest = Question.objects.get(id=id)
    print(quest)
    if request.method=='POST': # It doesn't access this condition so the updates won't occur
        print("*"*100)
        quest.question = request.POST.get('question')
        quest.answer = request.POST.get('answer')
        print(quest)
        quest.save()
        return redirect('list_questions')
    return render(request, 'browse/questions.html', {'quest': quest})

有人可以帮我解决这个最后的问题吗?

xxbinxx

是的,您必须使用它AJAX来实现就地编辑。我正在发布快速代码,以便您了解

注意:下面的代码有错误;) 我不想详细写,因为它对你没有好处。您必须集思广益并亲自尝试。

  • contenteditable=”true” 是使列可编辑。
  • data-old_value在发出 Ajax 请求以更新数据库表中更改的值之前,保留旧值以进行检查的属性
  • 代码正在使用函数 saveQuestionAnswer()
  • 在模糊事件上更新更改的值和功能highlightEdit()以在编辑模式下突出显示列。
    <table style="width:100%">
      <tr>
        <th>Questions</th>
        <th>Answers</th>
        <th>Action</th>
      </tr>
      {% for q in questions%}
      <tr>
        <td contenteditable='true' data-id="question-{{q.id}}" data-old_value='{{q.question}}' onClick="highlightEdit(this);">{{q.question}}</td>
        <td contenteditable='true' data-id="answer-{{q.id}}" data-old_value='{{q.answer}}' onClick="highlightEdit(this);">{{q.answer}}</td>
        <td>
          <center><a onclick="saveQuestionAnswer('{{q.id}}')">Save your edit --- </a><a href="{% url 'delete_question' q.id %}">Delete</a></center>
        </td>
      </tr>
      {%endfor%}
    </table>

    <script>
    function saveQuestionAnswer(id) {

        editableQuestion = $('a[data-id=question-'+id+']') //this will get data-id=question-1 where 1 is the question ID
        editableAnswer = $('a[data-id=answer-'+id+']') //this will get data-id=answer-1 where 1 is the question ID

        // no change change made then return false
        if ($(editableQuestion).attr('data-old_value') === editableQuestion.innerHTML && $(editableAnswer).attr('data-old_value') === editableAnswer.innerHTML)
            return false;

        // send ajax to update value
        $(editableObj).css("background", "#FFF url(loader.gif) no-repeat right");
        $.ajax({
            url: "/my-save-url/",
            type: "POST",
            dataType: "json",
            data: {"question": editableQuestion.innerHTML, "answer": editableAnswer.innerHTML}
            success: function(response) {
                // set updated value as old value
                $(editableQuestion).attr('data-old_value', response.question);
                $(editableQuestion).css("background", "#FDFDFD");

                $(editableAnswer).attr('data-old_value', response.answer);
                $(editableAnswer).css("background", "#FDFDFD");
            },
            error: function() {
                console.log("errr");
                alert("An error occurred")
            }
        });
    }

    function highlightEdit(elem){
      $(elem).css("background", "#e3e3e3") //just add any css or anything, it's only to depict that this area is being edited...
    }
    </script>

您的视图现在将以 json 格式获取数据 {'question': <value>, 'answer': <value>}

如果需要,您可以'id'在其中添加另一个键json,或者您可以像这样保留您的网址/saveQuestionAnswer/<id>在这里你有你id的网址本身。

我希望你现在明白了。

谢谢

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从html表编辑数据库行值

来自分类Dev

在Django ORM外部编辑数据库

来自分类Dev

如何使用带有 Django 的 WYSIWYG HTML Javascript 编辑器将数据传递到数据库

来自分类Dev

编辑HTML表格行数据

来自分类Dev

Pharo Seaside-在html中编辑标签后如何更新数据库条目

来自分类Dev

Django-如何根据多个字段编辑数据库中的特定行?

来自分类Dev

通过html输入更新/编辑Google表格行值

来自分类Dev

在Heroku上编辑Django文件而无需编辑我的数据库文件

来自分类Dev

onClick HTML表格单元格保存到django数据库中

来自分类Dev

无法编辑此 HTML 表格

来自分类Dev

使用 PHP 在新页面中使用 HTML 表单编辑填充了 MySQL 数据库的 HTML 表行

来自分类Dev

使用Django表单编辑行

来自分类Dev

编辑不更新数据库

来自分类Dev

从PHP页面编辑数据库行

来自分类Dev

编辑刚插入数据库的行

来自分类Dev

HTML可编辑表格->获得编辑字段

来自分类Dev

制作可编辑的表格并保存到数据库

来自分类Dev

Django从HTML页面向数据库添加数据

来自分类Dev

django 使用 html 模板将数据插入数据库

来自分类Dev

如何在 jquery 和 HTML 中动态编辑和更新表格行

来自分类Dev

无法使用javascript编辑html表格

来自分类Dev

动态编辑html表格的单元格

来自分类Dev

使用php以可编辑的html文本形式从数据库返回结果

来自分类Dev

单击编辑按钮时,如何使用数据库值填充 HTML 表单?

来自分类Dev

Django编辑行而不是添加新行

来自分类Dev

django html编辑器以CharField形式添加图像

来自分类Dev

我可以编辑Django管理屏幕以显示html吗?

来自分类Dev

这是从数据库打开对象以相同形式进行编辑,然后使用django保存同一对象的更新值的正确方法吗?

来自分类Dev

数据库中HTML表格的样式

Related 相关文章

  1. 1

    如何从html表编辑数据库行值

  2. 2

    在Django ORM外部编辑数据库

  3. 3

    如何使用带有 Django 的 WYSIWYG HTML Javascript 编辑器将数据传递到数据库

  4. 4

    编辑HTML表格行数据

  5. 5

    Pharo Seaside-在html中编辑标签后如何更新数据库条目

  6. 6

    Django-如何根据多个字段编辑数据库中的特定行?

  7. 7

    通过html输入更新/编辑Google表格行值

  8. 8

    在Heroku上编辑Django文件而无需编辑我的数据库文件

  9. 9

    onClick HTML表格单元格保存到django数据库中

  10. 10

    无法编辑此 HTML 表格

  11. 11

    使用 PHP 在新页面中使用 HTML 表单编辑填充了 MySQL 数据库的 HTML 表行

  12. 12

    使用Django表单编辑行

  13. 13

    编辑不更新数据库

  14. 14

    从PHP页面编辑数据库行

  15. 15

    编辑刚插入数据库的行

  16. 16

    HTML可编辑表格->获得编辑字段

  17. 17

    制作可编辑的表格并保存到数据库

  18. 18

    Django从HTML页面向数据库添加数据

  19. 19

    django 使用 html 模板将数据插入数据库

  20. 20

    如何在 jquery 和 HTML 中动态编辑和更新表格行

  21. 21

    无法使用javascript编辑html表格

  22. 22

    动态编辑html表格的单元格

  23. 23

    使用php以可编辑的html文本形式从数据库返回结果

  24. 24

    单击编辑按钮时,如何使用数据库值填充 HTML 表单?

  25. 25

    Django编辑行而不是添加新行

  26. 26

    django html编辑器以CharField形式添加图像

  27. 27

    我可以编辑Django管理屏幕以显示html吗?

  28. 28

    这是从数据库打开对象以相同形式进行编辑,然后使用django保存同一对象的更新值的正确方法吗?

  29. 29

    数据库中HTML表格的样式

热门标签

归档