Работа с таблицей, которая позволяет выбирать строки, изменять один из столбцов и затем загружать данные ...
Проблема 1:
У меня есть выпадающий список, который появляется в одном столбце при выборе строки. В раскрывающемся списке отображаются все уникальные параметры этого столбца. Проблема в том, что при создании он по умолчанию выбирает первый вариант в алфавитном порядке. Я хочу, чтобы он по умолчанию равнялся оригинальному значению в этой ячейке.
Проблема 2:
Если вы выберите строку, а затем измените значение раскрывающегося списка на другое, оно нигде не будет зафиксировано. Мне нужно, чтобы выбранное значение было новым значением для этой ячейки.
Желаемая функциональность заключается в том, что пользователь может выбрать серию строк, изменить раскрывающийся список на то, что ему нужно для каждой строки, а затем загрузить его, используя кнопку загрузки выбранных.
Скрипка: https://jsfiddle.net/crashvector/f1q8w2d5/17/
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/datatables.css" media="screen" />
<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>
</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/datatables2.js"></script>
</body>
JS
$(document).ready( function () {
var srcData = [
{
"ID": "1",
"Name": "01_p11017",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "2",
"Name": "02_p21017",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "3",
"Name": "03_p31017",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "4",
"Name": "04_p41017",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "5",
"Name": "05_p11117",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "6",
"Name": "06_p21117",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "7",
"Name": "07_p31117",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "8",
"Name": "08_p41117",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "9",
"Name": "09_p11217",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "10",
"Name": "1-1m",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "11",
"Name": "1-1s",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "12",
"Name": "1-2m rep",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "13",
"Name": "1-2s",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "14",
"Name": "1.epa_r5_s16",
"Region": "R5",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "15",
"Name": "10_p21217",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "16",
"Name": "11_p31217",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "49",
"Name": "3.s18",
"Region": "R5",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "50",
"Name": "30_ms-horse-combo",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "51",
"Name": "31_ms-cow-b-combo",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "52",
"Name": "32_11vt-170829-r01",
"Region": "R1",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "53",
"Name": "33_12vt-170829-r01",
"Region": "R1",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "54",
"Name": "34_13vt-170829-r01",
"Region": "R1",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "55",
"Name": "4.epa_r5_s19",
"Region": "R5",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "56",
"Name": "5.epa_r5_s20",
"Region": "R5",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "57",
"Name": "6.epa_r5_s21",
"Region": "R5",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "58",
"Name": "7-d",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "59",
"Name": "7391-1",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "60",
"Name": "7391-2",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "61",
"Name": "7391-3",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "62",
"Name": "7391-4",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "63",
"Name": "7396-1",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "64",
"Name": "7396-2",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "65",
"Name": "7396-3",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "66",
"Name": "7396-4",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "67",
"Name": "7401-1",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "68",
"Name": "7401-2",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "69",
"Name": "7401-3",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "70",
"Name": "7401-4",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "71",
"Name": "7406-1",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "72",
"Name": "7406-2",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "73",
"Name": "7406-3",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "74",
"Name": "7406-4",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "75",
"Name": "7411-1",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "76",
"Name": "7411-2",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "77",
"Name": "7411-3",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "78",
"Name": "7411-4",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "79",
"Name": "7416-2",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "80",
"Name": "7416-3",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "81",
"Name": "7416-4",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "82",
"Name": "8-sf",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "83",
"Name": "9-sb",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "84",
"Name": "ac_8-14-17",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "85",
"Name": "ac_8-21-17",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "86",
"Name": "ac_8-28-17",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "87",
"Name": "ac_9-5-17",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "88",
"Name": "ad_8-14-17",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "89",
"Name": "ad_8-21-17",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "90",
"Name": "ad_8-28-17",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "91",
"Name": "ad_9-5-17",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "92",
"Name": "b01",
"Region": "R5",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "93",
"Name": "b0517",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "94",
"Name": "bg",
"Region": "R4",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "95",
"Name": "blank",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "96",
"Name": "buffalo_sac_fox",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "97",
"Name": "buffalo_santee",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "98",
"Name": "calves_bottlefed_santee",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "99",
"Name": "calve_scours_disease_santee",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "100",
"Name": "canadian_goose_pierson",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "101",
"Name": "canadian_goose_quivera",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "102",
"Name": "canadian_goose_wyco",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "103",
"Name": "cdh_bouy",
"Region": "LBL",
"Class": "background",
"Category": "marine",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "104",
"Name": "copy of b01",
"Region": "LBL",
"Class": "background",
"Category": "blank",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "105",
"Name": "copy of b0517",
"Region": "LBL",
"Class": "background",
"Category": "blank",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "106",
"Name": "copy of ws-1a",
"Region": "LBL",
"Class": "background",
"Category": "blank",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "107",
"Name": "cover_bc.10_8-24-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "108",
"Name": "cover_bl.14_8-24-12",
"Region": "LBL",
"Class": "background",
"Category": "blank",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "109",
"Name": "cover_coc.10_8-16-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "110",
"Name": "cover_crc.14_8-24-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "111",
"Name": "cover_fc.10_8-24-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "112",
"Name": "cover_fc.11_8-16-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "113",
"Name": "cover_gc.10_8-16-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "114",
"Name": "cover_ic.14_8-16-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "115",
"Name": "cover_lac.12_8-16-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "116",
"Name": "cover_lac.14_8-24-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "117",
"Name": "cover_mc.14_8-24-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "118",
"Name": "cover_pac.11_8-17-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "119",
"Name": "cover_pic.10_8-24-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "120",
"Name": "cover_vbc.10_8-24-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "121",
"Name": "cover_vbc.12_8-17-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "122",
"Name": "cover_wc.14_8-17-12",
"Region": "LBL",
"Class": "background",
"Category": "fresh",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "123",
"Name": "cow1_santee",
"Region": "R7",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
}
];
var dataTable = $('#samples').DataTable({
'processing': true,
'serverSide': false,
'pageLength': -1,
'lengthMenu': [
[100, 250, 500, -1],
[100, 250, 500, 'All']
],
data: srcData,
//ajax: {
//url: 'http://groot.r07.epa.gov/json2.php',
// url: './datatables.php',
//dataSrc: ''
//},
columns: [
{
data: '',
defaultContent: '0',
visible: false
},
{
data: '',
defaultContent: '',
orderable: false,
className: 'select-checkbox',
targets: 1,
orderData: [0]
},
{
title: 'ID',
'className': 'dt-left',
'visible': false,
data: 'ID'
},
{
title: 'Name',
'className': 'dt-left',
data: 'Name'
},
{
title: 'Region/Program',
'className': 'dt-left',
data: 'Region'
},
{
title: 'Class',
'className': 'dt-left',
data: 'Class'
},
{
title: 'Category',
'className': 'dt-left',
data: 'Category'
},
{
title: 'QC Concerns',
'className': 'dt-left',
data: 'QC_comment'
}
],
select: {
style: 'multi',
},
order: ([
[4, 'asc'],
[5, 'asc'],
[3, 'asc']
]),
orderFixed: [0, 'desc'],
dom: 'Bfrtip',
buttons: [{
extend: 'csv',
fieldBoundary: '',
text: '<span class="fa fa-file-excel-o"></span> Download (ALL) or (SELECTED)',
exportOptions: {
columns: [6, 3],
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.');
}
},
{
text: 'Select Default Library 1',
action: function (e, dt, node, conf) {
alert('This button will automatically check all rows that match predefined list 1 using the hidden ID column.');
}
},
{
text: 'Select Default Library 2',
action: function (e, dt, node, conf) {
alert('This button will automatically check all rows that match predefined list 2 using the hidden ID column.');
}
}
]
});
//grab all the unique sorted data entries from the necessary row
var category = dataTable.column(6).data().unique().sort();
//Drop down menu stop event propagation
$('#samples').on('click', 'tbody td select',
event => event.stopPropagation());
//Write dropdown value into table
var writeCell = dropdown => {
var currentRow = dataTable.row(dropdown.closest('tr'));
var rowData = currentRow.data();
rowData.category = dropdown.val();
currentRow.remove();
dataTable.row.add(rowData).draw();
};
dataTable.on('select', function (e, dt, type) {
if (type === 'row') {
var row = dataTable.row(dt);
$(row.node()).find('td:eq(4)').html(
'<select>' + category.reduce((options, item) =>
options += `<option value="${item}" ${
item == row.data().category ? 'selected' : ''}>${
item}</option>`, '') + '</select>'
);
toggleDataAndDraw(row, type, '1');
}
});
dataTable.on('deselect', function (e, dt, type) {
if (type === 'row') {
var row = dataTable.row(dt);
writeCell($(row.node()).find('select'));
toggleDataAndDraw(row, type, '0');
}
});
var toggleDataAndDraw = (row, type, dataVal) => {
if (type === 'row') {
dataTable.cell({
row: row.index(),
column: 0
}).data(dataVal);
dataTable.draw();
}
};
});