jquery - Datatables Gyrocode 复选框扩展，根据条件设置每行的检查状态

Question

早上好，我有一个应用程序，它有多个带有复选框的列，使用 datatables gyrocode 复选框扩展。如果单元格中的值为 1，我在表单加载时使用 rowCallback 函数设置每列的选中状态。在设置选中状态的同时，我将同一行上的 ID 值推送到一个数组，该数组稍后用于比较在每个复选框上未选中“全选”复选框时要重新检查的行柱子。我的问题是当数组中的 ID 值与行中的 ID 值匹配时，我似乎无法重新选中复选框。其他一切正常，但我正在使用的这行代码似乎没有设置复选框状态： $('td:nth-child(9) input', rowPAE).attr('checked','checked'); 但是，如果我使用 render: 函数来初始化复选框，则上面的行确实有效，并且如果 ID 匹配，则设置选中状态。完整代码：HTML：

<form>
<table border="1" bordercolor="#5B0001">
    <tr><th colspan="2"><center>APR Totals</center></th></tr>
    <tr><th>Element</th><th>Total Selected</th></tr>
    <tr><td><b>Pre-Algebra Enrolled:</b></td><td><input type="text" name="PreAlgEI" id="PreAlgEI" size="10" readonly="yes"></td></tr>
    </table>
</form>
<br />
<table id="studentAtt" class="display" cellspacing="0" style="width:100%;">
        <thead>
            <tr>
                <th>Texas Unique ID</th>
                <th>Local ID</th>
                <th>Last</th>
                <th>First</th>
                <th></th>
            </tr>
        </thead>
        <tbody>

</tbody>
</table>

jQuery代码：

$(document).ready(function() {
    
  data = [
    ['1234', '4321', 'Test1', 'User','1'],
    ['12345', '54321', 'Test2', 'User','0'],
     ['123456', '654321', 'Test3','User','1'],
     ['23456', '65432', 'Test4','User','1'],
     ['3456', '6543', 'Test5','User','0']
  ]
    
    /***** Pre-Algebra Arrays ***/
    var removeChecksPreAE = [];
    var saveChecksPreAE = [];
    var saveChecksPreAEOG = []; // Used to store the original loaded IDs from database on form load.
  
  var preAECount = 0;
  
// Setup Data Table
  var t = $('#studentAtt').DataTable(
        {
            
            "data":data,
            /*'columns': [
            {
            render: function ( data, type, row ) {
          
                var checkbox = $('<input/>',{
                        'type': 'checkbox',
                        'class':'editor-completed'
                     });
                return data;
            },
            className: "dt-body-center"
            }],*/
             rowCallback: function ( row, data ) {
                
            if (data[4] == 1){
                $('td:nth-child(5) input', row).attr('checked','checked');
                saveChecksPreAEOG.push(data[0]);
        preAECount += 1;
            }
                 
        },
            'columnDefs': [
                 {
                    'targets': 4,
                    'checkboxes': {
                       'selectRow': false
                    }
                 }
              ],
              'select': {
                 'style': 'multi'
              },
              'order': []

        });
    // Set total selected value on form load
     document.getElementById('PreAlgEI').value = preAECount;
    
    /******** Pre-Algebra Enrolled, select all checkbox on first row, header **************/
$('th:nth-child(5) input').on('click', function(){
        preAECount = 0;
        if ($(this).is(':checked')){
        
            $('td:nth-child(5) input').attr('checked','checked');
            
            // Store all checkboxes checked into array
            $('tr td:nth-child(5) input').each(function() {
      preAECount += 1;
                var currentRowPreEA=$(this).closest('tr');
                var col0PreEA=currentRowPreEA.find('td:eq(0)').html();
                        $('td:nth-child(5) input',currentRowPreEA).attr('checked','checked');
                        saveChecksPreAE.push(col0PreEA);
                        
            });
    
        }
        else
        {
            saveChecksPreAE = [];
            $('td:nth-child(5) input').attr('checked',false);
            $('tr td:nth-child(5) input').each(function(){
            

                var rowPAE = $(this).closest('tr');
                var preAlgETXID = rowPAE.find('td:eq(0)').html();
        
                $.each(saveChecksPreAEOG, function (indexPreAE, valuePreAE){
                    if(valuePreAE == preAlgETXID){
                            preAECount -= 1;
                        $('td:nth-child(5) input', rowPAE).attr('checked','checked');
                    }   
                });
                
            });     
        }
    
                preAECount = Math.abs(preAECount);
         document.getElementById('PreAlgEI').value = preAECount;

        });
      
/***. Handle individual checkboxes checked/un-checked, column 5 *****/
$('td:nth-child(5) input').on('click', function(){
            if($(this).is(':checked')){
                preAECount += 1;
        }
        else{
            preAECount -= 1;
        }

                preAECount = Math.abs(preAECount);
         document.getElementById('PreAlgEI').value = preAECount;
});
  
   });

JSFiddle：https ://jsfiddle.net/Daniel_S_EGT/y84tdac0/66/

我的想法是我需要使用不同的语法来使用 Gyrocode 复选框扩展来设置选中状态。任何指导将不胜感激。

谢谢，丹尼尔

标签： jquerycheckbox