Django - встроенное редактирование таблиц Bootstrap

У меня есть таблица данных со всеми функциями, такими как сортировка и поиск. Я хочу добавить в таблицу столбец, который можно редактировать. Я хочу сохранить комментарии зрителя.

У меня есть колонка в моем model.py. но я не знаю, как сохранить ее и сохранить ее редактируемой.

 <tbody>
        
      <tr>
        {% for a in data %}
        
        <td><a id="idclicked" href="datadescription/{{a.id}}/" title="click to see Metadata"  style="color: rgb(30, 61, 199); font-weight:bold;"><u>{{ a.id }}</u></td></a>
            <td>{{ a.Date }}</td>
            <td>{{ a.Name }}</td>
            <td>{{ a.Affliations}} </td>
            <td>{{ a.Methods}}</td>
            <td>{{ a.Instruments}}</td>
            <td>{{ a.device}}</td>
           
            
         <td>{{ a.comments }}</td>
         <td contenteditable="true">{{ a.editablecomments }}</td>

enter image description here

Вы можете попробовать сделать кнопку "сохранить" и отправить данные в представление с помощью Ajax следующим образом:

Шаблон

<td contenteditable="true" class="edit" name="content" id="{{a.id}}">{{ a.editablecomments }}</td>
...
<button>Save</button>
...
<script>
    const itemsToBeSubmitted = []; // store edited items here 

    $(".edit").focusout(function(){
        let id = this.id;
        let value = $(this).text();

        itemsToBeSubmitted.push({
            value: value,
            id: id
        });
    });

    // Now you have an array all edited elements
    document.querySelector('button').addEventListener('click', function() {
        $.ajax({
            url: '/someURLfunction',
            type: 'post',
            data: itemsToBeSubmitted,  // edited items
            success: (response) => {
                console.log('Saved successfully');
            }
        });
    });
</script>

Виды

def someURLfunction(request, id):
    text = request.POST['itemsToBeSubmitted']
    something = SomeModel.objects.get(id=id)
    something.comment = text
    something.save()

    return redirect('index')

Url

Что-то вроде: 

path('someURLfunction/<int:id>', views.someURLfunction, name='someURLfunction')

Полезные ссылки:

Аякс вызов функции

Сохранить редактируемый текст таблицы (хотя это для laravel / php, принцип почти тот же)

Вернуться на верх