Utwórz kolumnę jako pole wyboru.

Question

Załaduję tabelę z żądaniem bazy danych (w PHP z programem CodeIgniter abd jqgrid helper). Nie mam problemu z wyświetlaniem ładnej siatki z moimi danymi.

Chcę wyświetlić nowy colomn z polami wyboru, aby wybrać jeden lub kilka wierszy.

Po załadowaniu nie można dodać nowej kolumny. Więc staram się tak postąpić: - Kolumna jest dodawana podczas tworzenia siatki, - Przy tworzeniu dodaje się opcję "loadComplete" z funkcją, - Przy odtwarzaniu funkcja jest wykonywana. Oto ona:

function ajoutCheckBox() { 
    var grille = $("#users_grid"); 

    // Construire les checkbox dans la colonne D 
    grille.setColProp('Dest', {editable: true}); 
    grille.setColProp('Dest', {edittype: 'checkbox'}); 
    grille.setColProp('Dest', {editoptions: { value: "True:False" }}); 
    grille.setColProp('Dest', {formatter: "checkbox"}); 
    grille.setColProp('Dest', {formatoptions: { disabled: true}}); 



    // Insérer la valeur false dans toutes les lignes de la colonne D 
    var index = grille.jqGrid('getGridParam', '_index'); 

    for(i in index) { 
     grille.jqGrid('setCell', i, 'Dest', 'False', {}); 
    } 
} 

Jak widać, gris jest nazywany „#users_grid” i kolumny „Miejsce docelowe”.

Mój problem: nic nie dołącza ...

Dziękuję za pomoc!

XB

EDIT: Znalazłem następujące rozwiązanie:

• Kolumna wyboru dodaje w rachunku colModel,
• Aby zainicjować wartości i do aktywacji pola wyboru (są one wyłączone przy tworzeniu!), używam funkcji wywołania zwrotnego "loadComplete".

Kod jest bardzo prosty, ale trudno mi znaleźć ...

Stworzenie siatki:

loadComplete: function() { ajoutCheckBox() }, 
colModel:[.... {"name":"Env","index":"Env","width":30,"hidden":false,"align":"left","edittype":"checkbox","formatter":"checkbox","formatoptions":"{ disabled: false}","editable":true,"editoptions":{"editoptions":"{ value: \"True:False\", defaultValue: \"False\" }}","size":10}}, ....] 

Funkcja zwrotna:

function ajoutCheckBox() { 
    var grille = $("#users_grid"); 
    var index = grille.jqGrid('getGridParam', '_index'); 

    for(i in index) { // Pour toutes les lignes du tableau 
     grille.jqGrid('setCell', i, 'Env', 'False'); 
     $('#'+i).find("input:checkbox").removeAttr('disabled'); 
    } 
} 

to nie wydają się być zoptymalizowane, ale działa!

Answer 1

Po wczytaniu nie jest możliwe dodanie nowej kolumny, ale możliwe jest utworzenie ukrytej kolumny. Musisz tylko zdefiniować kolumnę mającą pole wyboru (możesz użyć formatoptions: { disabled: false}, jeśli jest to wymagane) i możesz użyć showCol wewnątrz wywołania zwrotnego loadComplete, aby kolumna była widoczna, jeśli jest wymagana, lub wymusić jej ukrywanie za pomocą metody hideCol.

AKTUALIZACJA: Jeśli poprawnie rozumiem, co chcesz (po dyskusji w komentarzach), a następnie the demo powinien wykazać rozwiązanie:

• demo tworzy kolumnę z wyboru na podstawie danych wejściowych (na podstawie wartość boolowska dla każdego wiersza). Pełne dane wejściowe zostaną zapisane przez jqGrid automatycznie w wewnętrznych parametrach data i _index. Zostanie wyświetlona pierwsza strona z danymi.
• Demo używa beforeSelectRow do obsługi klikania/sprawdzania/odznaczania pól wyboru. Ponieważ w jqGrid używano datatype: "local", użyłem getLocalRow, aby uzyskać dostęp do wewnętrznego obiektu, który zawiera dane z wiersza.Po zaznaczeniu/odznaczeniu pól wyboru zmodyfikowałem odpowiednie pole danych. W rezultacie można zmienić stan niektórych pól wyboru, zmienić stronę i wrócić do pierwszej strony. Widać, że zmodyfikowany stan pól wyboru został zapisany.

Poniżej są najważniejszą częścią kodu:

var mydata = [ 
     ... 
     { id: "4", ..., closed: true, ... }, 
     .... 
    ]; 

$("#list").jqGrid({ 
    datatype: "local", 
    data: mydata, 
    colModel: [ 
     ... 
     {name: "closed", width: 70, align: "center", 
      formatter: "checkbox", formatoptions: { disabled: false}, 
      edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"}, 
      stype: "select", searchoptions: { sopt: ["eq", "ne"], 
       value: ":Any;true:Yes;false:No" } }, 
     ... 
    ], 
    beforeSelectRow: function (rowid, e) { 
     var $self = $(this), 
      iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]), 
      cm = $self.jqGrid("getGridParam", "colModel"), 
      localData = $self.jqGrid("getLocalRow", rowid); 
     if (cm[iCol].name === "closed") { 
      localData.closed = $(e.target).is(":checked"); 
     } 

     return true; // allow selection 
    }, 

    ... 
});