<table class="table table-hover">
    <tr>
        <td>序號</td>
        <td>欄目名稱</td>
        <td>操作</td>
    </tr>
    {% for column in columns %}
    <tr>
        <td>{{ forloop.counter }}</td>
        <td>{{ column.column }}</td>
        <td>
            <a name="edit" href="javascript:" rel="external nofollow"  rel="external nofollow"  onclick="edit_column(this, {{ column.id }})">
                <span class="fas fa-pencil-alt"></span>
            </a>
            <a name="delete" href="javascript:" rel="external nofollow"  rel="external nofollow"  onclick="del_column(this, {{ column.id }})">
                <span class="fas fa-trash-alt" style="margin-left: 20px;"></span>
            </a>
        </td>
    </tr>
    {% empty %}
    <p>還沒有設(shè)置欄目，太懶了。</p>
    {% endfor %}
    </table>

<script>
    function edit_column(element, columnId) {
        // 獲取當(dāng)前行的文檔名稱單元格
        const currentRow = element.closest('tr');
        const nameCell = currentRow.querySelector('td:nth-child(2)');
        // 獲取當(dāng)前文檔名稱
        const currentName = nameCell.textContent;
        // 彈出 Prompt 對話框，獲取新的文檔名稱
        const newName = prompt('請輸入新的欄目名稱：', currentName);
        // 如果用戶點擊了確定并輸入了新名稱，更新表格中的文檔名稱
        if (newName !== null && newName.trim() !== '') {
            const trimmedName = newName.trim();
            // 發(fā)送 AJAX 請求更新數(shù)據(jù)庫，在fetch后支出了提交的url，由該url確定由那個view函數(shù)處理提交
            fetch(`/article/update-column/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCookie('csrftoken')  // Django 的 CSRF token
                },
                body: JSON.stringify({
                                current_name: currentName,
                                new_name: trimmedName
                                }) //發(fā)送到后臺的是一個字典，鍵current_name值是column的舊名稱，鍵new_name值是column的新名稱
            }).then(response => {
                if (response.ok) {
                    // 更新成功，更新表格中的文檔名稱
                    nameCell.textContent = trimmedName;
                    alert('欄目名稱更新成功');
                } else {
                    // 更新失敗，處理錯誤
                    alert('更新失敗，請重試');
                }
            }).catch(error => {
                console.error('Error:', error);
                alert('更新失敗，請重試');
            });
        }
    }
    function del_column(element, columnId) {
        // 實現(xiàn)刪除功能的邏輯
        console.log('刪除欄目 ID:', columnId);
    }
    // 獲取 CSRF token 的函數(shù)（Django）
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
</script>

@csrf_exempt
@login_required
def update_column(request):
    if request.method == 'POST':
        try:
            data = json.loads(request.body)
            current_name = data.get('current_name') #提交數(shù)據(jù)字典中的current_name
            new_name = data.get('new_name') #提交數(shù)據(jù)字典中的new_name
            changed_column = ArticleColumn.objects.get(user = request.user, column=current_name)
            changed_column.column = new_name
            changed_column.save()
            return JsonResponse({'status': 'success'})
        except ArticleColumn.DoesNotExist:
            return JsonResponse({'status': 'error', 'message': 'ArticleColumn not found'}, status=404)
        except Exception as e:
            return JsonResponse({'status': 'error', 'message': str(e)}, status=500)
    return JsonResponse({'status': 'error', 'message': 'Invalid request method'}, status=400)

path('update-column/', views.update_column, name='update_column'),