我有一个来自数据库的DataTables表。当我从数据集中选择行时,我想启用下拉菜单。下拉列表将填充该列中的每个选项。

有人建议使用rowCallback来完成此操作,但是一旦启用此复选框,我就无法弄清楚如何为每一行创建可编辑字段。

选择该函数将导致该行的“类别”和“类别”单元格变为下拉菜单,其中包含“类别”和“类别”中的所有现有选项以供选择。

的HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" media="screen" />
<script charset="utf8" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script charset="utf8" src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
</head>
</html>
  <body>
    <div class="container">
      <table id="samples" class="display nowrap compact hover dt-left" width="100%"></table>
    </table>
    </form>
<script type="text/javascript" charset="utf8" src="JS/datatables.js"></script>
</body>


jQuery的

$(document).ready( function () {
  var table = $('#samples').DataTable( {
    "processing": true,
    "serverSide": false,
    "pageLength": -1,
    "lengthMenu": [[100, 250, 500, -1], [100, 250, 500, "All"]],
    ajax: "datatables.php",
    columns: [
      {data: '',
       defaultContent: '0',
       visible: false },
      {data: '',
       defaultContent: '',
       orderable: false,
       className: 'select-checkbox',
       targets:   1
      },
      {title : 'Sample Name', 'className': 'dt-left', data: 1},
      {title : 'Region/Program', 'className': 'dt-left', data: 2},
      {title : 'Class', 'className': 'dt-left', data: 3},
      {title : 'Category', 'className': 'dt-left', data: 4},
      {title : 'QC Concerns', 'className': 'dt-left', data: 5}
    ],
    select: {
        style:    'multi',
        },
    order: ([[ 4, 'asc' ], [ 5, 'asc' ], [ 3, 'asc' ]]),
    orderFixed: [0, 'desc'],
    dom: 'Bfrtip',
    buttons: [
     {
            extend: 'excel',
            text: '<span class="fa fa-file-excel-o"></span> Download (ALL) or (SELECTED)',
            exportOptions: {
                columns: [ 2, 5 ],
                modifier: {
                    search: 'applied',
                    order: 'applied'
                }
            }
        },
         {
            text: 'Use Selected Library',
            action: function ( e, dt, node, config) {
            alert( 'This buton needs to pass the Sample Name and Category columns to php.' );
            }

             },
         {
                text: 'Upload Predefined Library',
                action: function ( e, dt, node, conf ) {
                    alert( 'This button needs to allow a csv file to be uploaded and passed to php.' );
                }
         }

     ]
  } );

  table.on( 'select', function ( e, dt, type, indexes ) {
    if ( type === 'row' ) {
        var row = table.row( dt );
        table.cell({ row: row.index(), column: 0 } ).data( '1' );
        table.draw();
    }
  });

  table.on( 'deselect', function ( e, dt, type, indexes ) {
    if ( type === 'row' ) {
        var row = table.row( dt );
        table.cell({ row: row.index(), column: 0 } ).data( '0' );
        table.draw();
    }
  });

} );


数据样本

const srcData = [
    {Name: '752', Region: '7', Class : 'unknown', Category : 'unknown', QC_Concerns: 'yes'},
    {Name: 'North 5th', Region: 'NWA', Class : 'unknown', Category : 'square', QC_Concerns: 'yes'},
    {Name: 'Elmdale', Region: '6', Class : 'back', Category : 'circle', QC_Concerns: ''},
    {Name: 'Rosebud', Region: '7', Class : 'back', Category : 'triangle', QC_Concerns: ''},
    {Name: 'Letterkenny', Region: 'GO', Class : 'back', Category : 'square', QC_Concerns: ''},
    {Name: '632nd', Region: 'GO', Class : 'front', Category : 'ball', QC_Concerns: ''},
    {Name: 'Water', Region: '4', Class : 'front', Category : 'ball', QC_Concerns: ''},
    {Name: 'Dirt', Region: '1', Class : 'front', Category : 'mermaid', QC_Concerns: ''},
    ];

最佳答案

我无法理解您的样本数据结构,因此我使用自己的方法演示了如何完成此工作:



//table source data
const srcData = [{
    id: 1,
    item: 'apple',
    category: 'fruit'
  }, {
    id: 2,
    item: 'banana',
    category: 'fruit'
  }, {
    id: 3,
    item: 'carrot',
    category: 'vegie'
  }, {
    id: 4,
    item: 'raspberry',
    category: 'berry'
  }, {
    id: 5,
    item: 'potato',
    category: 'vegie'
  }
];
//DataTable initialization
const dataTable = $('#mytable').DataTable({
    dom: 't',
    data: srcData,
    select: 'multi',
    columns: Object.keys(srcData[0]).map(key => {
      return {
        title: key,
        data: key
      }
    })
  });
//grab all the unique sorted data entries from the necessary row
const category = dataTable.column(2).data().unique().sort();
//Row click handler
dataTable.on('deselect', (event, row, type, index) => writeCell($(row.node()).find('select')));
dataTable.on('select', (event, row, type, index) => $(row.node()).find('td:eq(2)').html('<select>' + category.reduce((options, item) =>	options += `<option value="${item}" ${item == row.data().category ? 'selected' : ''}>${item}</option>`, '') + '</select>'));
//Drop down menu stop event propagation
$('#mytable').on('click', 'tbody td select', event => event.stopPropagation());
//Write dropdown value into table
var writeCell = dropdown => {
  const currentRow = dataTable.row(dropdown.closest('tr'));
  const rowData = currentRow.data();
  rowData.category = dropdown.val();
  currentRow.remove();
  dataTable.row.add(rowData).draw();
};

tbody tr:hover {
  background: lightgray !important;
  cursor: pointer;
}

tbody tr.selected {
  background: gray !important;
}

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css">
</head>
<body>
  <table id="mytable"></table>
</body>
</html>

09-10 05:11
查看更多