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

时间:2015-01-09 21:03:28

标签: javascript datatables jquery-datatables jquery-datatables-editor

我尝试使用带内联编辑的选择。我已经使用弹出窗口进行正确显示以进行编辑,但我希望所有内容都可以内联并提交模糊。我的数据包括每个下拉项的ID和名称,我在一个看起来像{label:" blah",value:" blah"等等。

但是,在DataTable中,所有下拉列表都显示ID,而不是标签作为默认值。我不希望用户看到ID。我尝试将编辑器字段名称设置为标签,将DataTable列设置为值,这似乎适用于弹出窗口,但是对于内联编辑,我得到错误" Uncaught Unable自动从源中确定字段。请指定字段名称"。

我的初始化看起来像这样:

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。

我该怎么办?

1 个答案:

答案 0 :(得分:-1)

我是这样做的,它很乱,但有效:

每个可编辑对象都有自己的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) );
}
}
?>