我正在尝试动态地向datatables.net表添加一行，其中第三列是下拉选择。
我一直在尝试各种不同的谷歌搜索，并且当我使用“时间”的局部变量时，它大部分工作，但我不知道如何访问行的数据源中的“new_location”数据数组并填充“new_location”
中的下拉选项new_location数组是一个包含location_id和location_name两个选项的对象数组。我希望下拉列表使用location_id作为选定值并显示location_name。
您可以使用以下任何序列号对其进行测试： 0111398-0212RV-001 0111398-0212RV-002 0111244-2030RV-001 0111244-2030RV-002 0111244-2030RV-003
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>DataTables - Child rows</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<style type="text/css">
.select-item {
padding: 0 0 0 100px;
font-weight: bold;
color: red;
}
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
/* Formatting function for row details - modify as you need */
function search(nameKey, myArray){
for (var i=0; i < myArray.length; i++) {
if (myArray[i].serial_num === nameKey) {
return myArray[i];
}
}
}
$(document).ready(function() {
var times = [
"12:00 am",
"1:00 am",
"2:00 am",
"3:00 am",
"4:00 am",
"5:00 am",
"6:00 am",
"7:00 am",
"8:00 am",
"9:00 am",
"10:00 am",
"11:00 am",
"12:00 pm",
"1:00 pm",
"2:00 pm",
"3:00 pm",
"4:00 pm",
"5:00 pm",
"6:00 pm",
"7:00 pm",
"8:00 pm",
"9:00 pm",
"10:00 pm",
"11:00 pm"
];
var table2 = $('#example2').DataTable( {
"columns": [
{ "data": "serial_num" },
{ "data": "location" },
{
"render": function(d,t,r){
var $select = $("<select></select>", {
"id": r[0]+"start",
"value": d
});
$.each(times, function(k,v){
var $option = $("<option></option>", {
"text": v,
"value": v
});
if(d === v){
$option.attr("selected", "selected")
}
$select.append($option);
});
return $select.prop("outerHTML");
}
}
],
"order": [[1, 'asc']]
} );
$( function() {
$( "#next1" ).click(function() {
var data_details = [{serial_num:"0111244-2030RV-001",location:"Shipped",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"},{"location_id":21,"location_name":"RGA"}]},{serial_num:"0111244-2030RV-002",location:"Finished Goods",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"},{"location_id":21,"location_name":"Retain Cage"}]},{serial_num:"0111244-2030RV-003",location:"Finished Goods",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"},{"location_id":21,"location_name":"Retain Cage"}]},{serial_num:"0111398-0212RV-001",location:"Post Sterilization Quarantine2",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"}]},{serial_num:"0111398-0212RV-002",location:"Post Sterilization Quarantine2",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"}]}];
var x = search($("#serial").val(),data_details);
table2.row.add(x).draw();
});
});
});
</script>
</head>
<body>
<table id="example2" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Serial/Lot Number</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Serial/Lot Number</th>
<th>Status</th>
</tr>
</tfoot>
</table>
<br/>
<br/>
<input type="text" value="0111398-0212RV-001" id="serial"><button id="next1">Search For Serial</button>
由于 Jlimited
答案 0 :(得分：1)
我能够弄明白。
以下更新的代码。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>DataTables - Child rows</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<style type="text/css">
.select-item {
padding: 0 0 0 100px;
font-weight: bold;
color: red;
}
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
/* Formatting function for row details - modify as you need */
function search(nameKey, myArray){
for (var i=0; i < myArray.length; i++) {
if (myArray[i].serial_num === nameKey) {
return myArray[i];
}
}
}
$(document).ready(function() {
var table2 = $('#example2').DataTable( {
"columns": [
{ "data": "serial_num" },
{ "data": "location" },
{ "data": "new_locations", "autoWidth":true,
"render": function(d,t,r){
var $select = $("<select></select>", {
"id": r[0]+"start",
"value": d
});
$.each(d, function(k,v){
var $option = $("<option></option>", {
"text": v.location_name,
"value": v.location_id
});
if(d === v){
$option.attr("selected", "selected")
}
$select.append($option);
});
return $select.prop("outerHTML");
}
}
],
"order": [[1, 'asc']]
} );
$( function() {
$( "#next1" ).click(function() {
var data_details = [{serial_num:"0111244-2030RV-001",location:"Shipped",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"},{"location_id":21,"location_name":"RGA"}]},{serial_num:"0111244-2030RV-002",location:"Finished Goods",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"},{"location_id":21,"location_name":"Retain Cage"}]},{serial_num:"0111244-2030RV-003",location:"Finished Goods",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"},{"location_id":21,"location_name":"Retain Cage"}]},{serial_num:"0111398-0212RV-001",location:"Post Sterilization Quarantine2",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"}]},{serial_num:"0111398-0212RV-002",location:"Post Sterilization Quarantine2",new_locations:[{"location_id":5,"location_name":"PSQ1"},{"location_id":6,"location_name":"PSQ2"}]}];
var x = search($("#serial").val(),data_details);
table2.row.add(x).draw();
});
});
});
</script>
</head>
<body>
<table id="example2" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Serial/Lot Number</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Serial/Lot Number</th>
<th>Status</th>
</tr>
</tfoot>
</table>
<br/>
<br/>
<input type="text" value="0111398-0212RV-001" id="serial"><button id="next1">Search For Serial</button>