如何在每行数据表中添加下拉列表

我有一个包含3列的数据表：用户名，电子邮件和角色。在第3列（角色）的标题中，有一个“编辑”按钮。点击“编辑”后，我希望每行都有下拉菜单。应该隐藏“编辑”按钮，然后出现“保存”按钮。使用下面的代码，我可以添加下拉菜单，但我无法从下拉菜单中选择任何内容。如何在每行数据表中添加下拉列表

<script type="text/javascript"> 
$(document).ready(
    function() { 
    var oTable = $('#big_table').dataTable({ 
    "bProcessing": true, 
    "bServerSide": true, 
    "sAjaxSource": '<?php echo base_url(); ?>index.php/User/datatable', 
    "bJQueryUI": true, 
    "sPaginationType": "full_numbers", 
    "iDisplayStart ":20, 
    "oLanguage": { 
    "sProcessing": "<img src='<?php echo base_url(); ?>assets/images/ajax-loader_dark.gif'>" 
    }, 

    "aoColumnDefs": [ 
     { "bSortable": false, "aTargets": [ 2 ] } 
     ],  

    "fnInitComplete": function() { 
     $("#big_table tr").find("th:nth-child(3)").append('<button id = "editTool">Edit</button><button id = "save"> Save </button>');  
      $("#save").hide(); 
    }, 
    "fnDrawCallback": function() { 
       }, 
    "fnRowCallback": function(nRow, aData, iDisplayIndex) { 
      }, 
      'fnServerData': function(sSource, aoData, fnCallback) 
     { 
      $.ajax 
      ({ 
      'dataType': 'json', 
      'type' : 'POST', 
      'url'  : sSource, 
      'data' : aoData, 
      'success' : fnCallback 
      }); 
     } 
}); 
$("#big_table").on('click',$("#editTool"),function(){ 
     console.log("editTool click"); 
      console.log("Edit"); 
      $("#big_table tbody tr").each(function(index){ 
      var selected = "Admin1"; 
      var name = "role"+index; 
      var menu = '<?php 
      $options = array(
       'Student'  => 'Student', 
       'Contributer' => 'Contributer', 
       'Moderator'  => 'Moderator', 
       'Admin1'  => 'Admin 1', 
       'Admin2'  => 'Admin 2', 
      ); 
      $selected = "'+selected+'"; 
      $val = form_dropdown("'+name+'", $options,"'+selected+'"); 
      echo preg_replace("/\r|\n/","",$val)?>'; 
      $(this).find("td:nth-child(3)").html(menu); 
      $("#editTool").hide(); 
      $("#save").show(); 
     }); 
    }); 

}); 
</script>

来源

2014-01-14 hsusmita

你是什么意思“..不能从下拉菜单中选择任何东西？”你有选择框在你想要他们的选项吗？ – dcodesmith

是选择框有适当的选项。但我无法选择。 – hsusmita

我得到了问题。问题在于下面的代码：

$("#big_table").on('click',$("#editTool"),function(){ 
     //codes 
    });

这是我们点击#big_table每次触发。第一次，当我点击“编辑”按钮时，这个方法被调用，下拉框被添加。当我尝试从下拉列表中选择某些内容时，将再次调用此方法，因为点击仍在#bigTable上。我通过以下替换上述方法解决了此问题：

$("#big_table thead th:nth-child(3)").on('click',$("#editTool"),function(){ 
    //code 
    });

现在，只要单击第三个标头，就会调用此方法。所以现在我可以从下拉菜单中正确选择。但是我的目标还没有实现。当点击“编辑”按钮时，我不想在点击列标题时调用此方法。请提出了一些解决方案。

来源

2014-01-15 09:17:33 hsusmita

如何在每行数据表中添加下拉列表

回答

相关问题