jQuery DataTables在下拉菜单中选择位置编辑单元格 [英] jQuery DataTables edit cell in place with drop down select
本文介绍了jQuery DataTables在下拉菜单中选择位置编辑单元格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个来自数据库的DataTables表.当我从数据集中选择行时，我想启用下拉菜单.下拉菜单将填充该列中的每个选项.
I have a DataTables table coming from a database. I want to have a dropdown enabled when I select rows from the dataset. The dropdown will be populated with every option from that column.
已建议使用rowCallback来完成此操作，但是一旦启用此复选框，我就无法弄清楚如何为每一列创建可编辑字段.
It has been suggested that this be done using rowCallback, but I haven't been able to figure out how to create the editable fields for the columns by row once the checkbox is enabled.
选中该函数将导致该行的类别"和类别"单元格成为下拉菜单，其中包含类别"和类别"中的所有现有选项以供选择.
The function, on select would cause that row's Class and Category cells to become dropdown menus populated with all of the existing options in Class and Category to choose from.
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: ''},
];
推荐答案
我无法理解您的示例数据结构，因此我演示了如何使用自己的示例数据结构:
I failed to comprehend your sample data structure, so I demonstrated the way of how it can be done, using my own:
//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>
这篇关于jQuery DataTables在下拉菜单中选择位置编辑单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
