数据表无法将 excel 中更新的复选框值导出为 0 或 1,始终仅显示最初选中的值

Datatable unable to export updated checkbox values in excel as 0 or 1, alway showing the initially checked values only

尝试下载数据表,最初能够为复选框(对于其中一个列字段 "Verified")获取 0 或 1 个值,但是当我切换复选框并导出为 excel 时,无法检索最新的复选框值。 最初我只 had the second checkbox as not ticked in the database so its correctly exporting its values as 0 in the excel sheet but when I change the values and export it again its not taking the 更新了最新值,您也可以在随附的快照中看到。

   var j=0;
    $(document).ready(function(){

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>    var table;
    function Xhr(id)
    {
    return $.ajax(
    {type:"GET",
    url:'http://localhost:8080/SSRSReports/v1/test',
    dataType:'json',
    cache:false,
    async:true,

    beforeSend:
    function(){$(id).append('<img src="images/spinner.gif" class="spin"/>');
    }})
    .always(function(){
    $(id).find('.spin').fadeOut(4000,function(){$(this).remove();
    });
    })
    .fail(function()
    {console.log("There was a problem while trying to get data at "+d);});
    }
    var radio=[];
    var j=0;
    $(document).ready(function(){
     Xhr('#report').done(function (json) {
      console.log(json);
      var x;
     
       jQuery_2_2_2.each(json, function (i, report) {
      
        radio.fill(0);
        if(report.testSampleOutOfStabilityIndt==1)
         {
          x += '<tr><td>' + report.studyId + '</td>';
             x += '<td>' + report.country + '</td>';
             x += '<td>' + report.investigatorName + '</td>';
             x += '<td>' + report.screenId + '</td>';
          x += '<td>' + report.subjectId + '</td>';
          x += '<td>' + report.subjectInitials + '</td>';
          x += '<td>' + report.requisitionNumber + '</td>';
          x += '<td>' + report.testName + '</td>';
          x += '<td>' + report.visitName + '</td>';
          x += '<td>' + report.collectionDate + '</td>';
          x += '<td>' + report.collectionTime + '</td>';
          x += '<td>' + report.resultDate + '</td>';
          x += '<td>' + report.resultTime + '</td>';
          x += '<td>' + report.minutesToResult + '</td>';
          x += '<td>' + report.minutesSampleStabilityLimit + '</td>';
          x += '<td>' + report.testResult + '</td>';
          x += '<td>' + report.daysSampleStabilityLimit + '</td>';
          x += '<td>' + report.daysToResult + '</td>';
          x += '<td>' + report.testSampleOutOfStabilityIndt + '</td>';
         //console.log(i);
          if(j==1)
           {
           x += '<td id="verified'+j+'"><input id="verified'+j+'" style="font-size:xx-small;" type="checkbox" onclick="handleChange(this)"></td></tr>';
           }
          else{
           x += '<td id="verified'+j+'"><input id="verified'+j+'" style="font-size:xx-small;" type="checkbox" checked onclick="handleChange(this)"></td></tr>';
          }
          j++;
         
         }
        
       });//.each
       jQuery_2_2_2('#reportbody').append(x);
       
       
       table=jQuery_2_2_2('#reporttable').DataTable({
        "stateSave": true,
        checkboxRefresh:true,
        dom: 'Bfrtip',
           buttons: [
            {
            extend: 'excel',
                  exportOptions: {
                      orthogonal: 'sort'
                  }
              }        
          ],
          columnDefs: [{
             targets:[19],
             render: function(data, type, row, meta){
                if(type === 'sort'){
                   var $input = $(data).find('input[type="checkbox"]').addBack();
                   data = ($input.prop('checked')) ? "1" : "0";
                }

                return data;    
             }
          }],
            
           
           scrollY:        true,
           scrollX:        true,
           scrollCollapse: true,
           fixedColumns:   {
               leftColumns: 1,
               rightColumns: 1
           }
       
           });//.datatable

      });//.done
      
     
      
    });//document.ready
    var k;

    function handleChange(e){
[enter image description here][1]
       $(e).attr('checked', !($(e).attr('checked')));  
     console.log(e.id);
     
     

     
    }
    th, td {
     white-space: nowrap;
    }

    div.dataTables_wrapper {
     width: 1600px;
     margin: 0 auto;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Reports</title>
    <script type="text/javascript"
     src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link
     href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"
     type="text/css" rel="stylesheet" />
    <link
     href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css"
     type="text/css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-2.2.2.min.js"
     integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI="
     crossorigin="anonymous"></script>
    <script

     src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"
     src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
    <script
     src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
     <link
     href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript"
     src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript"
     src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript">var jQuery_2_2_2=$.noConflict(true);</script>

    </head>
    <body>
     <form id="myform">
      <div id="report" style="padding: 1% 1%">
       <h2 class="section_header">
        <span style="color: #18d1f2">RE</span>PORT
       </h2>
       </br>

       <table id="reporttable" class="display" cellspacing="0" width="100%"
        border="1px solid black" ; border-collapse="collapse";>
        <thead>
         <tr>
          <th>StudyID</th>
          <th>Country</th>
          <th>Investigator_Name</th>
          <th>ScreenID</th>
          <th>SubjectID</th>
          <th>Subject_Initials</th>
          <th>Requisition_Number</th>
          <th>Test_Name</th>
          <th>Vist_Name</th>
          <th>Collection_Date</th>
          <th>Collection_Time</th>
          <th>Result_Date</th>
          <th>Result_Time</th>
          <th>MinutesToResult</th>
          <th>Minutes_Sample_Stability_Limit</th>
          <th>Test_Result</th>
          <th>Days_Sample_Stability_Limit</th>
          <th>DaysToResult</th>
          <th>Taste_Sample_Out_of_Stability_Ind</th>
          <th>Verified ?</th>


         </tr>
        </thead>
        <tbody id="reportbody">

        </tbody>
        <tfoot>
         <tr>
          <th>StudyID</th>
          <th>Country</th>
          <th>Investigator_Name</th>
          <th>ScreenID</th>
          <th>SubjectID</th>
          <th>Subject_Initials</th>
          <th>Requisition_Number</th>
          <th>Test_Name</th>
          <th>Vist_Name</th>
          <th>Collection_Date</th>
          <th>Collection_Time</th>
          <th>Result_Date</th>
          <th>Result_Time</th>
          <th>MinutesToResult</th>
          <th>Minutes_Sample_Stability_Limit</th>
          <th>Test_Result</th>
          <th>Days_Sample_Stability_Limit</th>
          <th>DaysToResult</th>
          <th>Taste_Sample_Out_of_Stability_Ind</th>
          <th>Verified?</th>


         </tr>
        </tfoot>
       </table>

      </div>
      <input
       style="color: white; font-weight: bold; font-size: larger; width: 80px; height: 30px; background-color: deepskyblue; border: 1px solid #223445; border-radius: 18px; -webkit-border-radius: 5px; -moz-border-radius: 5px"
       type="submit">
     </form>
    </body>
    <script>
Xhr('#report').done(function (json) { console.log(json); var x; jQuery_2_2_2.each(json, function (i, report) { radio.fill(0); if(report.testSampleOutOfStabilityIndt==1) { x += '<tr><td>' + report.studyId + '</td>'; x += '<td>' + report.country + '</td>'; x += '<td>' + report.investigatorName + '</td>'; x += '<td>' + report.screenId + '</td>'; x += '<td>' + report.subjectId + '</td>'; x += '<td>' + report.subjectInitials + '</td>'; x += '<td>' + report.requisitionNumber + '</td>'; x += '<td>' + report.testName + '</td>'; x += '<td>' + report.visitName + '</td>'; x += '<td>' + report.collectionDate + '</td>'; x += '<td>' + report.collectionTime + '</td>'; x += '<td>' + report.resultDate + '</td>'; x += '<td>' + report.resultTime + '</td>'; x += '<td>' + report.minutesToResult + '</td>'; x += '<td>' + report.minutesSampleStabilityLimit + '</td>'; x += '<td>' + report.testResult + '</td>'; x += '<td>' + report.daysSampleStabilityLimit + '</td>'; x += '<td>' + report.daysToResult + '</td>'; x += '<td>' + report.testSampleOutOfStabilityIndt + '</td>'; //console.log(i); if(j==1) { x += '<td id="verified'+j+'"><input id="verified'+j+'" style="font-size:xx-small;" type="checkbox" onclick="handleChange(this)"></td></tr>'; } else{ x += '<td id="verified'+j+'"><input id="verified'+j+'" style="font-size:xx-small;" type="checkbox" checked onclick="handleChange(this)"></td></tr>'; } j++; } });//.each jQuery_2_2_2('#reportbody').append(x); table=jQuery_2_2_2('#reporttable').DataTable({ "stateSave": true, checkboxRefresh:true, dom: 'Bfrtip', buttons: [ { extend: 'excel', exportOptions: { orthogonal: 'sort' } } ], columnDefs: [{ targets:[19], render: function(data, type, row, meta){ if(type === 'sort'){ var $input = $(data).find('input[type="checkbox"]').addBack(); data = ($input.prop('checked')) ? "1" : "0"; } return data; } }], scrollY: true, scrollX: true, scrollCollapse: true, fixedColumns: { leftColumns: 1, rightColumns: 1 } });//.datatable });//.done });/ function handleChange(e){ $(e).attr('checked', !($(e).attr('checked'))); }

又试了下,导出的时候基本上改了格式。还更改了复选框数据以手动更改。

$(document).ready(function() {

$('.checkbox').click(function() {
    debugger
    if ($(this).data("checked") === 0) {
        $(this).data("checked", "1")
    } else {
        $(this).data("checked", "0")
    }
});
$('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [{
            extend: 'copyHtml5',
            exportOptions: {
                orthogonal: 'export'
            }
        },
        {
            extend: 'excelHtml5',
            exportOptions: {
                orthogonal: 'export',
                format: {
                    body: function(data, row, column, node) {
                        // Strip $ from salary column to make it numeric
                        debugger;
                        if (column === 0) {
                            data = $(node).children().data("checked");
                        }
                        return data;
                    }
                }
            }
        },
        {
            extend: 'pdfHtml5',
            exportOptions: {
                orthogonal: 'export'
            }
        }
    ]

});

});

这是相同的 fiddle https://jsfiddle.net/raheelshah31/fm6a74yu/2/