时间戳

首页 > 解决方案 > 如何使用带有 Php Ajax 的 Jquery Tabledit 插件使用数据库填充下拉列表

php - 如何使用带有 Php Ajax 的 Jquery Tabledit 插件使用数据库填充下拉列表

问题描述

我找到了一个带有下拉列表的内联可编辑表的插件，但是我想用数据库中的值填充下拉列表。我的代码只有一个带有 2 个值的“性别”的下拉列表。我找到了以下我正在尝试调整的代码，但不幸的是并不幸运。我试图创建一个查询并使用一个 php 变量但没有工作。这是我第一次使用 Jquery 插件，我惊讶地发现要找到带有下拉列表的表并不容易，而且可用的表通常具有固定值。这很可惜，因为它们非常有用。我厌倦了试图解决这个问题，任何帮助我都会非常感激！

表格： 带有下拉菜单的内联可编辑表格

代码如下：

<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>

标签： phpjqueryjsonajaxdatabase

解决方案

我在我的情况下使用了一个 PHP 变量，该变量具有我在脚本中已经可用的下拉列表所需的值。

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 的新手，所以这个解决方案可能不是实现和/或优化的最佳选择。

希望这会有所帮助，祝你好运！

推荐阅读