如何在Php Ajax中使用Jquery Tabledit插件填充下拉列表
如何在Php Ajax中使用Jquery Tabledit插件填充下拉列表
提问于 2020-09-25 03:55:14
我发现了一个带有下拉列表的内联可编辑表格的插件，但是我想用数据库中的值填充这个下拉列表。代码我有一个下拉列表，只有‘性别’与2个值。我找到了下面的代码，我正在试着改编，但不幸的是不走运。我试图创建一个查询并使用php变量，但没有成功。这是我第一次使用Jquery插件，我惊讶地发现，很难找到带有下拉列表的表，而且可用的表通常都是固定值的。这是一个很小的问题，因为它们非常有用。我已经厌倦了试图弄清楚这件事，任何帮助我都会非常感激！
表格：Inline editable Table with dropdown
代码如下：
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
var dataTable = $('#sample_data').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"fetch.php",
type:"POST"
}
});
$('#sample_data').on('draw.dt', function(){
$('#sample_data').Tabledit({
url:'action.php',
dataType:'json',
columns:{
identifier : [0, 'id'],
editable:[[1, 'first_name'], [2, 'last_name'], [3, 'gender', '{"1":"Male","2":"Female"}']]
},
restoreButton:false,
onSuccess:function(data, textStatus, jqXHR)
{
if(data.action == 'delete')
{
$('#' + data.id).remove();
$('#sample_data').DataTable().ajax.reload();
}
}
});
});
});
</script>回答 1
Stack Overflow用户
发布于 2020-12-06 23:46:59
在我的例子中，我使用了一个PHP变量，其中包含我在脚本中已有的dropdown所需的值。
var shoes = <?php echo json_encode($data['shoes']);?>;
console.log(shoes);
0: {shoe_id: "3", brand_name: "Keen Koven WP"}
1: {shoe_id: "9", brand_name: "Keen Targhee Vent"}
2: {shoe_id: "5", brand_name: "Merrel MOAB Edge 2"}
3: {shoe_id: "1", brand_name: "New Balance 510v2"}
4: {shoe_id: "2", brand_name: "New Balance Trail Runners-All Terrain"}
5: {shoe_id: "6", brand_name: "Oboz Cirque Low"}
6: {shoe_id: "7", brand_name: "Oboz Sawtooth II Low"}
7: {shoe_id: "4", brand_name: "Oboz Sawtooth Low"}
8: {shoe_id: "8", brand_name: "Skechers Crossbar"}然后，我遍历shoes变量并构建下拉值所需的字符串：
var shoes_result = '';
$.each(shoes, function(key, element) {
shoes_result += '"'+element.shoe_id+'": "'+element.brand_name+'",';
});
shoes_result = shoes_result.substring(0,shoes_result.length-1); //strip trailing last comma.
console.log(shoes_result);
"3": "Keen Koven WP","9": "Keen Targhee Vent","5": "Merrel MOAB Edge 2","1": "New Balance 510v2","2": "New Balance Trail Runners-All Terrain","6": "Oboz Cirque Low","7": "Oboz Sawtooth II Low","4": "Oboz Sawtooth Low","8": "Skechers Crossbar"注意:确保从字符串中去掉尾随的逗号
然后用我需要的'{}'连接shoes_result字符串变量：
$('#walks-table').Tabledit({
url: '<?php echo URLROOT; ?>/walks/update',
columns: {
identifier: [0, 'day_walked'],
editable: [[1, 'cal_burned'], [2, 'miles_walked'], [3, 'duration'], [4, 'mph'], [5, 'shoes_worn', 'select', '{'+shoes_result+'}']]
},
editButton: <?php echo isset($_SESSION['user_id']) ? 'true' : 'false';?>,
deleteButton: false,
confirmButton: true,
});注意:直到我在本专栏中包含了 'select**‘类型，我才能让它工作**
注意事项:我只在浏览器端工作，在我的例子中没有执行任何服务器端(PHP)，所以我不知道在那里我可能会遇到什么样的粗糙边缘。此外，我充其量也是jQuery的新手，因此这个解决方案可能不是实现和/或优化的最佳选择。
希望这能帮上忙，祝你好运！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64053536
复制相关文章
相似问题
腾讯云开发者
