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

Question

我正在尝试使用内联编辑进行选择。我已经得到这个显示正确使用弹出窗口进行编辑，但我希望它全部内联并提交模糊。我的数据包含每个下拉项的ID和名称，这些对象看起来像{label：“blah”，value：“blah”}等。

但是，在DataTable中，下拉列表是全部以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。

我该怎么办？

Answer 1

我做了这个样子，它的混乱，但工作原理：

每个编辑的对象都有它自己的跨度类。与父对象相关的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)); 
} 
} 
?>