jQuery DataTables 使用下拉选择编辑单元格答案

【问题标题】：jQuery DataTables edit cell in place with drop down selectjQuery DataTables 使用下拉选择编辑单元格
【发布时间】：2019-08-09 06:13:16
【问题描述】：

我有一个来自数据库的 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: ''},
    ];

【问题讨论】：

标签： javascript jquery datatables dropdown

【解决方案1】：

我没能理解你的示例数据结构，所以我用我自己的方式演示了如何完成它：

//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>

【讨论】：

感谢您的回复。这真的很接近我所追求的。我需要能够选择多行。（我更新了我的数据块以匹配您正在使用的格式。）我的代码中发生的是两列被添加到表的前面，以便允许复选框和复选框跟踪。这允许任何选定的项目移动到表格的顶部。选择它们后，下拉菜单将变为活动状态。 @yevgengorbunkov
我已修复代码以允许多选。关于复选框排序和其余部分 - 这是完全不同的主题，我鼓励您不要尝试一次解决多个问题。因此，如果它解决了该特定问题，请接受答案，打开具有适当描述的下一个问题，让我研究一下。
对不起，我没有问其他问题。我以为您是在说您不了解数据结构，因为我在前面添加了两列。所以我在解释这些列的作用。
那是我的错，我误解了你的解释。那么，由于多项选择有效，您的问题现在得到解答了吗？
我仍在试图弄清楚如何用我现有的代码来实现它。即使我删除了将选定项目移动到顶部的选择代码，我也会不断收到错误消息。是否需要数据初始化块才能使其运行，或者我可以在我现有的数据部分中子吗？

【解决方案2】：

这将在第三列中为该列中的所有值添加 ddl。

 initComplete: function () { // After DataTable initialized
            this.api().columns([2]).every(function () {
                /* use of [2] for third column.  Leave blank - columns() - for all.
                Multiples? Use columns[0,1]) for first and second, e.g. */
                var column = this;
                var select = $('<select><option value=""/></select>')
                    .appendTo($('.datatable .dropdown .third').empty()) /* for multiples use .appendTo( $(column.header()).empty() ) or .appendTo( $(column.footer()).empty() ) */
                    .on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                    });
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            }); // this.api function
        } //initComplete function

    });
});
$(window).resize(function () {
    $('.datatable').removeAttr('style');
});

【讨论】：