使用复选框插件时预先选择数据表的行

Posted 2023-05-09

【中文标题】使用复选框插件时预先选择数据表的行

【英文标题】：Pre-selection of rows for datatable when checkbox plugin used

【发布时间】：2019-07-25 04:30:44

【问题描述】：

还没有在任何地方看到这样的例子。我的多选数据表从数组加载并使用 Gyrocode 复选框插件构建复选框列。我可以将用户选择分配给数组 - 请参阅表格顶部的按钮，该按钮输出到控制台。但是，我需要在初始化时向数据表发送一个或多个预选，以便表格以已经突出显示和检查的那些选择开始。这些选择可能会改变，所以我想它们需要作为某种变量发送到表中。我很困惑如何使用我的数据结构来做到这一点，尽管理想情况下我想保持原样。有什么想法吗？ https://jsfiddle.net/sg0o3bwL/1/

<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>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css" rel="stylesheet" />

<button id="myselections" type="button" style="height: 20px; width: 150px;">See selections</button>

<form id="frm-example" action="/nosuchpage" method="POST">
  <table id="example" class="display select" cellspacing="0" >
    <thead>
      <tr>
        <th></th>
        <!-- invisible col. for enable/disable separation -->
        <th>Order</th>
        <th>Sort</th>
        <th>Sort</th>
        <th>Sort</th>
        <th>Province</th>
        <th>City</th>
        <th>Status</th>
        <th>Sort</th>
        <th>Type</th>
      </tr>
    </thead>
  </table>
</form>




  $(function() 

  var MYdataSet1 = [
    ["", "1", "Bahrain", "Foulath", "Bahrain Steel BSCC", "Cobham", "Venice", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
    ["", "2", "Bombay", "Foulath", "United Stainless Steel Company", "Ealing", "Rome", "x", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
    ["", "3", "Bahrain", "Foulath (51%) :: Yamato Kogyo (49%)", "United Steel Company (Sulb)", "Kingston", "Milan", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
    ["", "4", "Universal Rolling", "", "", "acton", "Arson", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
    ["", "5", "Abul Khair Steel Products (AKSP)", "Jackson", "", "Barnes", "", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM", ""],
    ["", "6", "Bangladesh", "Anwar Isphat", "", "Sheen", "", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
    ["", "7", "Baizid Steel", "Baizid Steel", "", "Mayfair", "", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
    ["", "8", "Bengalh Steel Rolling Mills (BSRM)", "", "", "Park lane", "", "", "Sinter Plant, Coke plant, BF, BOF,Slab Caster, HSM, CRM ", ""],
  ];


// 'Initialise' DataTable

  var TradeDatatable = $('#example').DataTable(
    data: MYdataSet1,
    orderCellsTop: true,
    fixedHeader: true,
    scrollCollapse: true,
    paging: false,
    processing: true,
    orderCellsTop: true,

    'columnDefs': [
        targets: 0,
        visible: false
      , // This refers to the invisible column only - used to sort enabled from disabled rows

      
        'targets': 1, // Refers to the Checkbox col. only
        'checkboxes': 
          'selectRow': true
        ,
      ,
      ],

    'select': 
      'style': 'multi'
    ,

    "order": [
      [2, "asc"]
    ], // Default sorted column no.

    orderFixed: [0, 'desc'],
  );

//------------------

// List all ticked row selections

  $('#myselections').click(function(e) 

    var form = this;

    // Assume chkbxes to be in column 1 (col 0 is purposely blank)
    var rows_selected = TradeDatatable.column(1).checkboxes.selected();

    // Iterate over all selected checkboxes
    $.each(rows_selected, function(index, rowId) 

      // Create a hidden element
      $(form).append(
        $('<input>')
        .attr('type', 'hidden')
        .attr('name', 'id[]')
        .val(rowId)
      );
    );

    // Raw list of selected rows
    var RawRowNumbers = rows_selected.join(",");
    var CurrentSelectedArray = RawRowNumbers.split(','); // split string on comma

    function sortNumber(a, b) 
      return a - b;
    
    CurrentSelectedArray.sort(sortNumber);
    console.log('Table selected_rows:', CurrentSelectedArray)

  );

);

【问题讨论】：

你想选择什么？参数是什么？

每一行都有一个唯一的数字（数组中的第二个条目），所以我想这需要是参数。所以我想我会告诉表格预先选择，比如第 2、3 和 6 行，或者其他什么。

在我的回答中添加了一些信息以显示更多信息。

【参考方案1】：

你可以在这里做几件事，但无论哪种方式，你都需要添加

select: true, 到您的餐桌设置...像这样：

data: MYdataSet1,
orderCellsTop: true,
fixedHeader: true,
scrollCollapse: true,
paging: false,
processing: true,
orderCellsTop: true,
select: true,

然后在表格加载完成后，你可以运行如下：

TradeDatatable.rows([1,2]).select();

这将选择第 2 行和第 3 行（第 1 行实际上是 0）。但是，它会在您应用的排序之前选择。如果您进行排序，您将看到完全按照上面数组中的顺序选择的行。除了行号之外，还有很多方法可以用来选择所需的内容。见这里：https://datatables.net/reference/api/rows().select()

您可以通过行上的类（可以添加）或行的特定列的内容进行选择，但是在不知道您希望搜索基于什么参数的情况下，很难说。

更新：

也可以根据栏目内容进行选择：

TradeDatatable.rows( function ( idx, data, node ) 
    return data[2] === 'Bahrain';
 )
.select();

这将选择第 3 列（索引中的第 2 列）包含单词“Bahrain”的任何行

【讨论】：

太棒了！不敢相信我没有为自己解决这个问题 - 认为它要复杂得多。非常清楚的解释，非常感谢。

很高兴它有帮助。