javascript - 如何将选择下拉列表附加到 HTML 数据表?
问题描述
我创建了一个主要使用 HTML、CSS、PHP 和 MYSQL 的网站,并添加了一个带有角色的选择下拉列表供用户选择。我需要它出现在表中的每一行用户上。我已成功让 tabledit 在该网站上工作,但我不确定如何将此下拉列表附加到 Roles 列。
这就是 HTML 的设置方式
<body>
<div class="panel panel-default">
<!-- <div class="panel-heading">Sample Data</div>-->
<div class="panel-body">
<div class="table-responsive">
<table id="sample_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Approval</th>
<th>Roles</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!--SELECT DROPDOWN LIST-->
<select id="test">
<?php
for ($a = 1; $a <= $count ; $a++){
?>
<option value="1"><?php echo($roles[($a-1)]);?></option>
<?php
}
?>
</select>
<!--//////////////-->
</body>
<script>
$(document).ready(function(){
var dataTable = $('#sample_data').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"FetchUserTable.php",
type:"POST"
}
});
$('#sample_data').on('draw.dt', function(){
$('#sample_data').Tabledit({
url:'ActionUserTable.php',
dataType:'json',
columns:{
identifier : [0, 'user_id'],
editable:[
[1, 'first_name'],
[2, 'last_name'],
[3, 'email'],
[4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}']
// [5, 'role_id']
]
},
restoreButton:false,
onSuccess:function(data, textStatus, jqXHR)
{
if(data.action == 'delete')
{
$('#' + data.id).remove();
$('#sample_data').DataTable().ajax.reload();
}
}
});
});
});
解决方案
您可以使用列定义上的渲染选项来渲染您想要的任何内容。在渲染函数中,您可以访问行和整个数据对象。
$(function() {
let $tbl = $('#sample_data'), $select = $('#select-box')
let data = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
"$5,300"
]
]
$tbl.DataTable({
data: data,
columns: [
null, null, null, null, {
render: function(data, type, row, meta) {
return $select.html() + `Use this to select "${data}"`
}
},
{
render: function(data, type, row, meta) {
return $select.html() + `Use this to select "${data}"`
}
},
]
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>
<body>
<div class="panel panel-default">
<!-- <div class="panel-heading">Sample Data</div>-->
<div class="panel-body">
<div class="table-responsive">
<table id="sample_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Approval</th>
<th>Roles</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div style="display:none;" id="select-box">
<select>
<option>Role 1</option>
</select>
</div>
</body>
推荐阅读
- python - Python 读取文件,文本用 ; 分隔
- sql - SQL 行到列但不转置
- spring - 请求的会话无效。如何在 SessionManager (Spring Security) 中排除端点
- ios - 虚线边框不适用于 UITableview 单元格的子视图(虚线边框宽度和高度与视图不同)
- javascript - 在 Chrome 浏览器中创建图像对象时询问约束问题
- c++ - 如何将 `basic_string` 隐式转换为推导的 `basic_string_view` 模板?
- jupyter-notebook - Jupyter 笔记本主题不适用于 #!jt -t Grade3 -T -N
- android - 接电话时屏幕不亮
- javascript - Vue声音组件重叠且互不干扰
- etl - Matillion S3 加载组件问题