如何根据列值对每一行显示复选框 - JQuery DataTable

Posted 2023-05-09

【中文标题】如何根据列值对每一行显示复选框 - JQuery DataTable

【英文标题】：How to show Checkbox against each Row based on Column value - JQuery DataTable

【发布时间】：2020-09-09 09:15:15

【问题描述】：

我使用下面的代码在 Jquery Datatable 中显示复选框。

var table = $('#example').DataTable(
  'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
  'columnDefs': [
     
        'targets': 0,
        'checkboxes': 
           'selectRow': true
        
     
  ],
  'select': 
     'style': 'multi',
     'selector': 'td:first-child'
  ,     
  'order': [[1, 'asc']]
  );

https://jsfiddle.net/09yLegu3/

我有一个新要求，我希望仅基于列值显示复选框。我有名为 Office 的列。仅当 Office 值为“东京”时才应显示复选框。我怎样才能实现这个 jquery 数据表。任何人都可以帮助提供示例代码。

【参考方案1】：

您可以通过在初始化DataTable 时调用drawCallback() 函数来实现这一点，并在其中检查每一行是否办公室的列包含“东京”；如果是这样，请从第一列中删除复选框：

$(document).ready(function() 
  var table = $('#example').DataTable(
    'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
    'columnDefs': [
      'targets': 0,
      'checkboxes': 
        'selectRow': true
      
    ],
    'select': 
      'style': 'multi',
      'selector': 'td:first-child'
    ,
    'order': [
      [1, 'asc']
    ],
    "drawCallback": function() 
      $("#example tr").each(function() 
        if ($(this).find("td:eq(3)").text() != "Tokyo") 
          $($(this)).find("td:eq(0)").find("input[type='checkbox']").remove();
        

      );
    
  );
);

工作Fiddle。

【参考方案2】：

在columns rendering 期间，您可以阻止复选框呈现。

此外，您可以在columns created Cell 上disable the checkbox。

您的 columnDefs 变为（为了删除 London 的复选框）：

'columnDefs': [
    
        'targets': 0,
        'checkboxes': 
            'selectRow': true
        ,
        'render': function(data, type, row, meta)
            data = '<input type="checkbox" class="dt-checkboxes">'
            if(row[3] === 'London')
                data = '';
            
            return data;
        ,
        'createdCell':  function (td, cellData, rowData, row, col)
            if(rowData[3] === 'London')
                this.api().cell(td).checkboxes.disable();
            
        
    
],

var table = $('#example').DataTable(
    'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
    'columnDefs': [
        
            'targets': 0,
            'checkboxes': 
                'selectRow': true,
                'selectAllCallback': function(nodes, selected, indeterminate) 
                    if (indeterminate == false) 
                        $(nodes).closest('tr').toggleClass('selected', selected );
                    
                ,
                'selectCallback': function(nodes, selected) 
                    if (selected == false) 
                        $(nodes).closest('table').find('thead tr').removeClass('selected');
                    
                
            ,
            'render': function(data, type, row, meta)
                data = '<input type="checkbox" class="dt-checkboxes">'
                if(row[3] === 'London')
                    data = '';
                
                return data;
            ,
            'createdCell':  function (td, cellData, rowData, row, col) 
                if(rowData[3] === 'London')
                    this.api().cell(td).checkboxes.disable();
                 else 
                    td.classList.add('dt-checkboxes-cell-visible');
                
            
        
    ],
    'select': 
        'style': 'multi',
        'selector': 'td:first-child'
    ,
    'order': [[1, 'asc']]
);

table.dataTable thead th.dt-checkboxes-select-all input[type="checkbox"],
table.dataTable tbody td.dt-checkboxes-cell-visible input[type="checkbox"] 
    visibility: hidden;

table.dataTable td.dt-checkboxes-cell-visible,
table.dataTable th.dt-checkboxes-select-all 
    position: relative;

table.dataTable td.dt-checkboxes-cell-visible:before,
table.dataTable td.dt-checkboxes-cell-visible:after,
table.dataTable th.dt-checkboxes-select-all:before,
table.dataTable th.dt-checkboxes-select-all:after 
    display: block;
    position: absolute;
    top: 1.2em;
    left: 50%;
    width: 12px;
    height: 12px;
    box-sizing: border-box;

table.dataTable td.dt-checkboxes-cell-visible:before,
table.dataTable th.dt-checkboxes-select-all:before 
    content: ' ';
    margin-top: -6px;
    margin-left: -6px;
    border: 1px solid black;
    border-radius: 3px;

table.dataTable tr.selected td.dt-checkboxes-cell-visible:after,
table.dataTable tr.selected th.dt-checkboxes-select-all:after 
    content: '\2714';
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    text-shadow: 1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css">
<link rel="stylesheet" href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/css/dataTables.checkboxes.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.10/js/dataTables.checkboxes.min.js"></script>

<h3><a href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/">jQuery DataTables Checkboxes</a>: <a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/select/">Select extension</a></h3>

<table id="example" class="display" cellspacing="0" >
    <thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn</th>
        <th>Start date</th>
        <th>Salary Value</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </tfoot>
</table>

<hr><a target="_blank" href="https://www.gyrocode.com/projects/jquery-datatables-checkboxes/examples/integration/select/">See full article on Gyrocode.com</a>

【讨论】：

@gaetanoM..真的很抱歉..这是我的错误......现在它正在工作..我会在测试后将其标记为答案..非常感谢你的朋友..像你这样的人做这个放置一个天堂

..还有一个疑问..我是否可以使用您的实现来实现类似于我们在下面的小提琴中看到的复选框样式..jsfiddle.net/annoyingmouse/yxLrLr8o..

@vmb 代码段已更新。现在复选框样式具有所需的方面。

@gaetanoM..非常感谢你的努力。我已经实现了你的新代码，需要帮助来解决一些问题。(1)。我想以编程方式禁用所有复选框。我正在使用$('#example tbody tr').removeClass('selected');它适用于除“SelectAll”复选框之外的所有元素。我如何以编程方式取消选中表“example”中的所有复选框，包括“SelectAll”复选框。我试过 $('#example').find('thead tr').removeClass ('selected'); 它不工作。

@gaetanoM ...我认为上面提到的问题是特定于我的实现的。我已经解决了这些问题...非常感谢您对实现此功能的支持

【参考方案3】：

我已经执行了这段代码，它工作正常，正如你所期望的那样，在你的代码中你只需要根据下面提到的“office”参数的特定行来设置条件，这将帮助你在数据绑定时间。

Here is the fiddle link : [https://jsfiddle.net/nzL39dye/3/][1]

Or

 $(document).ready(function() 
       var table = $('#example').DataTable(
          ajax: 'https://gyrocode.github.io/files/jquery-datatables/arrays_id.json',
          columnDefs : [
             
             targets : [0],
             render : function (data, type, row) 

              if (row[3] == "Tokyo") 
              
                return '<input type="checkbox"  selectRow="true" class="dt-checkboxes">'
              
                else 
                return '';

                
              
            
       ],
          select: 
             style: 'multi',
             selector: 'td:first-child'
          ,     
          order: [[1, 'asc']]
       );
    );

   

这个解决方案简单易懂。