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

【问题标题】：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"
          }
        ]
      }
    }

【问题讨论】：

标签： php jquery datatables

【解决方案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);

【讨论】：