Question

我成功创建了一个没有任何问题的待办事项列表。但是，我尝试进一步调整应用程序以显示所有待办事项的表格。

除删除部分外，一切都很好。

我现在有2个jQuery函数来监听delete keypress（一个用于列表，一个用于表）：

// ============= Remove todo from the list and Database ============
$('.list').on('click', 'span', function(e){
  e.stopPropagation();
  removeTodo($(this).parent());  // Remove todo from the list and 
  Database
})


// ============== Remove todo from the table and Database ==========
  $('tbody').on('click', '.btn-danger', function(e){
    e.stopPropagation();
    table                         // remove row from table - Start
    .row($(this).parents('tr'))   // ...
    .remove()                     // ... 
    .draw()                       // remove row from table - End

    removeOnt($(this).parent());  // Remove from database -  HOWEVER, NOT WORKING
  })

然后我有删除待办事项的功能：

function removeTodo(todo){
  var clickedId = todo.data('id');             // I know the problem with removing the data from the database when I call the function from the table jQuery call, doesn't work
  var deleteUrl = '/api/todos/' + clickedId; 
  $.ajax({
    method: 'DELETE',
    url: deleteUrl
  })
  .then(function(data){
    todo.remove();
  })
  .catch(function(err){
    console.log(err);
  })
}

通过Table调用从数据库中删除条目的功能的问题是因为“ var clickedId = todo.data（'id'）; ”是“ undefined ”。

来自 todo.data（'id'）的上述数据（'id'）被定义为“addTodo（todo）{}”函数为< / p>

var newTodo = $('<li class="task">'+todo.name +' <span>X</span></li>');
newTodo.data('id', todo._id);

这是创建表格行的函数的代码：

function addTodoRow(todo){
  table.row.add([
            todo.name,
            todo.created_date,
            "<button type='button' class='btn btn-danger'>DELETE</button>"
  ]).draw();
  if(todo.completed){
    $('td').addClass('done');
  } 
}

我的问题是：如何在“ addTodoRow（todo）中定义” newTodo.data（'id'，todo._id）; “的等价物“我们为” addTodo（todo）“做了什么？

感谢任何帮助。

提前致谢。

斯蒂芬

Answer 1

我检查了你的JS代码，将行添加到数据表中，

function addTodoRow(todo){
  // console.log(todo.name)
  table.row.add([
            todo.name,
            todo.created_date,
            'High',
            'MyName',
            "<button type='button' class='btn btn-danger'>DELETE</button>"
  ]).draw();
  if(todo.completed){
    $('td').addClass('done');
  } 
}

以下是我的建议，

- ＆GT;就像你传递 todo.name，todo.created_date 的值一样。

- ＆GT;传递您的记录的值是数据库。喜欢 todo.db_record_id

- ＆GT;并在按钮中更改以下内容，新的JS将为

function addTodoRow(todo){
  // console.log(todo.name)
  table.row.add([
            todo.name,
            todo.created_date,
            'High',
            'MyName',
            "<button onclick='removeTodo(+todo.db_record_id+)' type='button' class='btn btn-danger'>DELETE</button>"
  ]).draw();
  if(todo.completed){
    $('td').addClass('done');
  } 
}

- ＆GT;更新JS函数以删除记录，

function removeTodo(todo_id){
  console.log(todo.name);
  var deleteUrl = '/api/todos/' + todo_id; 
  $.ajax({
    method: 'DELETE',
    url: deleteUrl
  })
  .then(function(data){
    todo.remove();
  })
  .catch(function(err){
    console.log(err);
  })
}

尝试以上步骤。希望这会对你有所帮助。

Answer 2

我找到了一个找到值的工作，并调用delete函数来成功删除行和mongodb记录。

代码调整如下：

添加了另一项功能：

＆＃13;

function removeTodo2(todo_id){
  var deleteUrl = '/api/todos/' + todo_id; 
  $.ajax({
    method: 'DELETE',
    url: deleteUrl
  })
  .then(function(data){
    console.log(data)
  })
  .catch(function(err){
    console.log(err);
  })
}

＆＃13;

jQuery监听器已更新为在单击删除按钮时侦听并从行中提取所需的值，以便将其传递到删除功能（removeTodo2（todo_id））以删除mongodb记录。 P，多么满口。

＆＃13;

//Remove todo from the table and Database
  $('tbody').on('click', '.btn-danger', function(e){
    var test = $(this).parents('tr');
    var test2 = test.find('td:eq(2)')[0].innerHTML;  // Find the mongodb record ID.  Note, for the purpose of this exercise the ID as been added to the row, but would not be done in reality. 
    e.stopPropagation();
    table                         // remove row from table - Start
    .row($(this).parents('tr'))   // ...
    .remove()                     // ... 
    .draw()                       // remove row from table - End
    removeTodo2(test2);  // Remove from database -  HOWEVER, NOT WORKING
  })

＆＃13;

这符合我的目的，但我不认为这是正确的做法。

感谢所有帮助@Sunil Dora

无法获取删除按钮以处理数据表表

2 个答案: