jqGrid z kolumną do edycji w polu wyboru

Question

Podczas korzystania z jqGrid w jaki sposób wymuszasz ładowanie komórki w jej edytowalnym widoku podczas ładowania strony, a także po kliknięciu?

Jeśli skonfigurujesz "edycję komórki" jak poniżej, to pole wyboru pojawi się tylko wtedy, gdy klikniesz komórkę.

{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" }, 

cellEdit:true, 

także na kliknięcie pola wyboru, czy istnieje sposób wysyłania AJAX post do serwera natychmiast zamiast polegać na naciśnięcie klawisza Enter użytkownik?

Answer 1

celu umożliwienia wyboru, aby zawsze być click-stanie używać pole wyboru formater za disabled właściwość:

{ name: 'MyCol', index: 'MyCol', 
    editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, 
    formatter: "checkbox", formatoptions: {disabled : false} , ... 

Aby odpowiedzieć na drugie pytanie, trzeba będzie skonfigurować procedurę obsługi zdarzenia dla pola wyboru, tak że kiedy po kliknięciu wywoływana jest funkcja, która na przykład wysyła serwer AJAX POST. Oto przykładowy kod, który pomoże Ci zacząć. Można dodać do tego wydarzenia loadComplete:

// Assuming check box is your only input field: 
    jQuery(".jqgrow td input").each(function(){ 
     jQuery(this).click(function(){ 
      // POST your data here... 
     }); 
    }); 

Answer 2

To jest stary, ale ma wiele widzenia, więc postanowiłem dodać moje rozwiązanie tutaj też.

Korzystam z funkcji .delegate w JQuery, aby utworzyć późno wiążącą implementację, która zwolni cię z obowiązku użycia zdarzenia loadComplete.

Wystarczy dodać następujące:

$(document).delegate('#myGrid .jqgrow td input', 'click', function() { alert('aaa'); }); 

To będzie wiązać że późno obsługi do każdego wyboru, który jest w wierszach siatki. Możesz mieć tutaj problem, jeśli masz więcej niż jedną kolumnę checkbox.

Answer 3

Udostępniłem pełny kod pod poniższym linkiem, możesz sprawdzić, czy go potrzebujesz.

http://www.trirand.com/blog/?page_id=393/bugs/celledit-checkbox-needs-an-enter-pressed-for-saving-state/#p23968

Answer 4

miałem ten sam problem i sądzę, że znalazłem dobre rozwiązanie do natychmiastowego obsługi checkbox kliknięcie. Główną ideą jest wyzwolenie metody editCell, gdy użytkownik kliknie na nie dające się edytować pole wyboru. Oto kod:

 jQuery(".jqgrow td").find("input:checkbox").live('click', function(){ 
      var iRow = $("#grid").getInd($(this).parent('td').parent('tr').attr('id')); 
      var iCol = $(this).parent('td').parent('tr').find('td').index($(this).parent('td')); 
      //I use edit-cell class to differ editable and non-editable checkbox 
      if(!$(this).parent('td').hasClass('edit-cell')){ 
            //remove "checked" from non-editable checkbox 
       $(this).attr('checked',!($(this).attr('checked'))); 
         jQuery("#grid").editCell(iRow,iCol,true); 
      } 
    }); 

Poza tym, należy zdefiniować zdarzenia dla sieci:

  afterEditCell: function(rowid, cellname, value, iRow, iCol){ 
      //I use cellname, but possibly you need to apply it for each checkbox  
       if(cellname == 'locked'){ 
       //add "checked" to editable checkbox 
        $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked',!($("#regions").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked'))); 
          //trigger request 
        jQuery("#grid").saveCell(iRow,iCol); 
       } 
      }, 

      afterSaveCell: function(rowid, cellname, value, iRow, iCol){ 
       if(cellname == 'locked'){ 
        $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+')').removeClass('edit-cell'); 
       } 
      }, 

Wtedy twoje pole edycji wyśle ​​żądania za każdym razem, gdy użytkownik kliknie na nim.

Answer 5

Mam jedną funkcję przesyłania, która wysyła wszystkie wiersze siatki do serwera WWW.

I rozwiązany ten problem przy użyciu tego kodu:

var checkboxFix = []; 
$("#jqTable td[aria-describedby='columnId'] input").each(function() { 
     checkboxFix.push($(this).attr('checked')); 
}); 

Potem zmieszanej z wartościami dostał z poniższym kodzie.

$("#jqTable").jqGrid('getGridParam', 'data'); 

Mam nadzieję, że pomaga komuś.

Answer 6

Lepsze rozwiązanie:

<script type="text/javascript"> 
    var boxUnformat = function (cellvalue, options, cell) { return '-1'; }, 
     checkboxTemplate = {width:40, editable:true, 
      edittype: "checkbox", align: "center", unformat: boxUnformat, 
      formatter: "checkbox", editoptions: {"value": "Yes:No"}, 
      formatoptions: { disabled: false }}; 
    jQuery(document).ready(function($) {   
     $(document).on('change', 'input[type="checkbox"]', function(e){ 
      var td = $(this).parent(), tr = $(td).parent(), 
       checked = $(this).attr('checked'), 
       ids = td.attr('aria-describedby').split('_'), 
       grid = $('#'+ids[0]), 
       iRow = grid.getInd(tr.attr('id')); 
       iCol = tr.find('td').index(td); 
      grid.editCell(iRow,iCol,true); 
      $('input[type="checkbox"]',td).attr('checked',!checked); 
      grid.saveCell(iRow,iCol); 
     }); 
    }); 
</script> 

W swojej colModel:

... 
{name:'allowAccess', template: checkboxTemplate}, 
...