时间戳

首页 > 解决方案 > 如何实现复选框选择功能以使用 ajax/json 发送电子邮件？如果可能的话

javascript - 如何实现复选框选择功能以使用 ajax/json 发送电子邮件？如果可能的话

问题描述

我有一个 MVC 应用程序，它使用 dataTables 并通过 c# 控制器调用列的数据和复选框，然后在 .cshtml 表索引中调用 json/ajax 脚本。这可能不是最有效的方法，但它是我到目前为止的工作方式。

如果可能在 json/ajax 或 jquery/javascript 中，我该如何选择一个复选框，然后单击一个按钮，该按钮调用一个模式来发送电子邮件，但正在从复选框调用数据表中电子邮件的 ID，所以我不必手动输入要发送电子邮件的电子邮件地址（只需主题和电子邮件正文）。如果不可能，我该怎么做？

用于列的 html

<div style="width:90%; margin:0 auto" class="tablecontainer">
<a class="popup btn btn-primary" href="/CRUD/save/0" style="margin- 
bottom:20px; margin-top:20px;">Add New Volunteer</a>
<table id="myDatatable">
<thead>
<tr>
<th><input type="checkbox" name="select_all" value="1" id="example-select-all"></th>
<th>Email</th>
<th>Password</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Number</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zip Code</th>
<th>Credentials</th>
<th>Availability</th>
<th>Edit</th>
<th>Delete</th>

</tr>
</thead>
</table>
</div>

ajax/json 示例

<script>
$(document).ready(function () {
var oTable = $('#myDatatable').DataTable({
"ajax": {
"url": '/CRUD/GetEmployees',
"type": "get",
"datatype": "json"
},

"columns":
[
{"data": "empty"},
{ "data": "EmailID", "autoWidth": true },
{ "data": "Password", "autoWidth": true },
{ "data": "FirstName", "autoWidth": true },
{ "data": "LastName", "autoWidth": true },
{ "data": "PhoneNumber", "autoWidth": true },
{ "data": "UserAddress", "autoWidth": true },
{ "data": "UserCity", "autoWidth": true },
{ "data": "UserState", "autoWidth": true },
{ "data": "UserZip", "autoWidth": true },
{ "data": "UserCredentials", "autoWidth": true },
{ "data": "UserDate", "autoWidth": true },
{"data": "UserID", "width": "50px", "render": function (data) {
return '<a class="popup" href="/CRUD/save/'+ data + '">Edit</a>';}
},
{
"data": "UserID", "width": "50px", "render": function (data) {
return '<a class="popup" href="/CRUD/delete/' + data + '">Delete</a>';
}}],
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'className': 'dt-body-center',
'render': function (data, type, full, meta) {
return '<input type="checkbox" name="id[]" value="' + 
$('<div/>').text(data).html() + '">';}}]})

// more code here for modal on clicks for edit and delete views //

</script>

这是它应该是什么样子的照片示例。我有数据表，我只需要点击功能和模式上的按钮。 像这样

标签： javascriptjqueryhtmljsonajax

解决方案

我认为您需要使用-

table.rows('.selected').data()

 var table = $('#example').DataTable();
  var emailbox=$("#emailBox");
  emailbox.val('');
  console.log(table.rows('.selected').data());
  var selectedData=table.rows('.selected').data();
  var emails = $.map(selectedData, function (item) { return item[2] });
  console.log(emails);
  for(var i=0;i<emails.length;i++){
         if(i==0){
             emailbox.val(v);
         }
         else{
           emailbox.val(emailbox.val()+";"+ v);
         }
  }
  $.each(emails,function(k,v){
        emailbox.val(emailbox.val()+v);
  })

你可以在这里看到一个工作示例。

推荐阅读