Javascript 如何在jQuery表中添加下拉复选框？
我已经创建了一个网站，主要使用HTML，CSS，PHP和MYSQL。我已经成功地让tabledit在网站上运行，但我不知道如何添加下拉复选框的功能。我需要它显示为checked，如果用户拥有该角色，则在未选中时更新MySQL表。下拉复选框是否可以用这个插件实现 以下是HTML的设置方式： ModifyUser.phpJavascript 如何在jQuery表中添加下拉复选框？,javascript,php,html,jquery,ajax,Javascript,Php,Html,Jquery,Ajax,我已经创建了一个网站，主要使用HTML，CSS，PHP和MYSQL。我已经成功地让tabledit在网站上运行，但我不知道如何添加下拉复选框的功能。我需要它显示为checked，如果用户拥有该角色，则在未选中时更新MySQL表。下拉复选框是否可以用这个插件实现 以下是HTML的设置方式： ModifyUser.php <html> <head> <title>Modifying Users</title> <script sr
<html>
<head>
<title>Modifying Users</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
<style>
#sample_data tr > *:nth-child(1) {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h3 align="center">Modifying Users</h3>
<br />
<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> // COLUMN THAT SHOULD HAVE DROPDOWN CHECKBOX
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br />
<br />
</body>
</html>
<script type="text/javascript" language="javascript" >
$(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'] // THIS SHOULD BE AN EDITABLE DROPDOWN CHECKBOX
]
},
restoreButton:false,
onSuccess:function(data, textStatus, jqXHR)
{
if(data.action == 'delete')
{
$('#' + data.id).remove();
$('#sample_data').DataTable().ajax.reload();
}
}
});
});
});
</script>
修改用户
#示例\u数据tr>*：第n个子项（1）{
显示：无；
}
修改用户
身份证件
名字
姓
电子邮件
批准
角色//应具有下拉复选框的列
$（文档）.ready（函数（）{
var dataTable=$（“#样本_数据”）。dataTable({
“处理”：对，
“服务器端”：正确，
“订单”：[]，
“ajax”：{
url:“FetchUserTable.php”，
类型：“职位”
}
});
$（“#示例_数据”）。在（'draw.dt'，function（）上{
$（“#样本数据”）.Tabledit({
url:'ActionUserTable.php'，
数据类型：'json'，
栏目：{
标识符：[0，'用户id']，
可编辑：[
[1，‘名字’]，
[2，‘姓’]，
[3，‘电子邮件’]，
[4，‘admin_approved’，‘{“1”：“approved”，“2”：“Unapproved”}’]
[5，'role_id']//这应该是一个可编辑的下拉框
]
},
恢复按钮：false，
onSuccess:函数（数据、文本状态、jqXHR）
{
如果（data.action==“删除”）
{
$（'#'+data.id）.remove（）；
$（'#sample_data'）.DataTable（）.ajax.reload（）；
}
}
});
});
});