为什么选择显示显示值而不是标签

Why is the select display showing the value instead of the label?

本文关键字：显示 标签 选择 为什么      更新时间：2023-09-26

我正在尝试使用带有内联编辑的选择。我已经使用弹出窗口进行编辑使其正确显示，但我希望所有这些都是内联的并在模糊时提交。我的数据包括每个下拉项的 ID 和名称，我在一个看起来像 { label： "blah"， value： "blah" } 等的对象中拥有这些名称。

但是，在数据表中，下拉列表都以 ID 而不是标签作为默认值显示。我不希望用户看到 ID。我尝试将编辑器字段名称设置为标签，将 DataTable 列设置为值，这似乎适用于弹出窗口，但对于内联编辑，我收到错误"未捕获无法自动确定源中的字段。请指定字段名称"。

我的初始化如下所示：

editor = new $.fn.dataTable.Editor({
      ajax: 'url',
      table: '#table',
      idSrc: 'id',
      fields: [{
          label: "Location",
          name: "location_name", //this is where the problem is, I think
          type: "select",
          ipOpts: locationList
      }]})
 $('#table').dataTable({
      dom: "Tfrtip",
      "searching": false,
      "ajax": {
          "url": "url",
          "type": "GET"
      },
      "columnDefs": [
        { "visible": false, "targets": [8] }
      ],
      "columns": [
          { "data": "location_id" }
      ])}

如果我将 DataTable 更改为使用该名称，则显示正确，但我获得提交到数据库的名称而不是 ID，并且我需要 ID。

我该怎么办？

我是这样做的，它很乱，但有效：

每个可编辑对象都有自己的 span 类。与父对象相关的 ID。与正在更新的对象相关的键。当然还有数据。

<td><span class="dcmeta" data-value="'.$row['DATACENTER'].'" data-type="select" id="'.$row['CLUSTERNAME'].'" key="DATACENTER">'.$row['DATACENTER'].'</span></td>
<td><span class="tiermeta" data-value="'.$row['TIER'].'" data-type="select" id="'.$row['CLUSTERNAME'].'" key="TIER">'.$row['TIER'].'</span></td>

Javascript：

<script type="text/javascript">
    jQuery(document).ready(function() {  
    $.fn.editable.defaults.mode = 'popup';
    $('.xedit').editable(); 
    $('.tiermeta').editable({
    title: 'Test title',
    source: [
          {value: 'Tier 1', text: 'Tier 1'},
          {value: 'Tier 2', text: 'Tier 2'},          
       ]
    }); 
    $('.dcmeta').editable({
    title: 'Test title',
    source: [
          {value: 'DC1', text: 'DC1'},
          {value: 'DC2', text: 'DC2'},           
       ]
    });     
    $(document).on('click','.editable-submit',function(){
    var key = $(this).closest('.editable-container').prev().attr('key');
    var x = $(this).closest('.editable-container').prev().attr('id');
    var y = $('.input-metadata').val();
    var z = $(this).closest('.editable-container').prev().text(y);
        $.ajax({
            url: "process.php?id="+x+"&data="+y+"&key="+key,
            type: 'GET',
            success: function(s){
                if(s == 'status'){
                $(z).html(y);}
                if(s == 'error') {
                alert('Error Processing your Request! ');}
            },
            error: function(e){
                alert('Error Processing your Request!! ');
            }
        });
    });
});
</script>

.PHP：

<?php
$conn = sqlsrv_connect( $serverName, $connectionInfo );
if( $conn === false ) {
    die( print_r( sqlsrv_errors(), true));
}
if($_GET['id'] and $_GET['data'] and $_GET['key'])
{
$id = $_GET['id'];
$data = $_GET['data'];
$key = $_GET['key'];
$sql = "update CLUSTER set $key='$data' where CLUSTERNAME='$id'";
echo 'success';
$stmt = sqlsrv_query( $conn, $sql );
    if( $stmt === false) {
        die( print_r( sqlsrv_errors(), true) );
}
}
?>
相关文章：