Question

尚未在任何地方看到此示例。我的多选数据表从数组加载，并使用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" width="100%">
    <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)

  });

});

Answer 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();

这将选择第三列（索引中的第二列）带有“巴林”字样的任何行

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

1 个答案: