数据表编辑器 - 如何在编辑器表单中动态填充选择列表？

Posted 2023-05-08

【中文标题】数据表编辑器 - 如何在编辑器表单中动态填充选择列表？

【英文标题】：Datatables Editor - How to dynamically populate select list in Editor form?

【发布时间】：2021-05-20 03:01:17

【问题描述】：

我正在尝试将动态选择列表添加到Datatables Editor 表单。这是我尝试过的：

var discipline_options = [];
  
 $.getJSON('program_data/get_disciplines.php', function (data) 
     $.each(data, function (index) 
         discipline_options.push(
             value: data[index].value,
             label: data[index].text
         );
     );
 editor.field( 'discipline_outcome.discipline_fk' ).update(discipline_options);
 );
 
            var editor = new $.fn.dataTable.Editor( 
                ajax: "program_data/discipline_outcome_data.php",
                table: "#discipline_outcome_table",
                template: '#discipline_outcome_form',
                fields: [  
                    label: "Discipline:",
                    name: "discipline_outcome.discipline_fk",
                    type: "select",
                    placeholder: 'Choose discipline...',
                    placeholderDisabled: false,
                    placeholderValue: 0,
                    options: []
                ,...

get_disciplines.php 脚本是：

$data = array();

$query = "SELECT * FROM discipline";
$result = $connection->query( $query );

while ($row = mysqli_fetch_array($result)) 
    $data[] = array("label"=>$row['discipline'], "value"=>$row['discipline_pk']);


$temp = array('disciplines[].discipline_pk'=>$data);
$json = array('options'=>$temp);
echo json_encode($json);

此脚本返回以下 JSON，但选择列表仍为空：

        
      "options": 
        "disciplines[].discipline_pk": [
          
            "label": "Emergency Medicine",
            "value": "1"
          ,
          
            "label": "General Practice",
            "value": "2"
          ,
          
            "label": "Internal Medicine",
            "value": "3"
          
        ]
      
    

【参考方案1】：

我让它工作了：

var discipline_options = [];
             
$.getJSON("program_data/get_disciplines.php", function(data) 
        var option = ;
        $.each(data, function(i,e) 
            option.label = e.text;
            option.value = e.id;
            discipline_options.push(option);
            option = ;
        );
    
).done(function() 
    editor.field('discipline.discipline_pk').update(discipline_options);
);

var editor = new $.fn.dataTable.Editor( 
                ajax: "program_data/discipline_outcome_data.php",
                table: "#discipline_outcome_table",
                template: '#discipline_outcome_form',
                fields: [  
                    label: "Discipline:",
                    name: "discipline.discipline_pk",
                    type: "select",
                    placeholder: 'Choose discipline...',
                    placeholderDisabled: false,
                    placeholderValue: 0,
                    options: []
                ,...

还有get_disciplines.php:

$data = array();
 
$query = "SELECT * FROM discipline";
$result = $connection->query( $query );
 
while ($row = mysqli_fetch_array($result)) 
    $data[] = array("text"=>$row['discipline'], "id"=>$row['discipline_pk']);

 
echo json_encode($data);