如何在每行數據表中添加下拉列表

我有一個包含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

如何在每行數據表中添加下拉列表

回答

相關問題