javascript - 为什么选择显示显示的是值而不是标签？

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