爲什麼選擇顯示屏顯示值而不是標籤？

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)); 
} 
} 
?>