Machen Sie eine Spalte zu einem Kontrollkästchen

Question

Ich lade ein Raster mit einer Datenbankanforderung (in PHP mit CodeIgniter abd jqgrid Helfer). Ich habe kein Problem, ein schönes Raster mit meinen Daten anzuzeigen.

Ich möchte ein neues colomn mit Kontrollkästchen anzeigen, um eine oder mehrere Zeilen auszuwählen.

Es ist unmöglich, nach dem Laden eine neue Spalte hinzuzufügen. Also ich versuche, so zu tun: - Das colomn wird hinzugefügt, beim Erstellen des Gitters, - Beim Erstellen, ich füge eine "loadComplete" -Option mit einer Funktion, - Beim Anzeigen, wird die Funktion ausgeführt. Hier ist sie:

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', {}); 
    } 
} 

Wie Sie sehen können, ist die gris „#users_grid“ und die Spalte „Ziel“.

Mein Problem: nichts anhängt ...

Vielen Dank für Ihre Hilfe!

XB

EDIT: fand ich die folgende Lösung:

• Spalte der Kontrollkästchen in der colModel Anweisung hinzugefügt wird,
• den Wert zu initialisieren und die Kontrollkästchen (sie aktivieren Beim Erstellen deaktiviert!), verwende ich eine "loadComplete" Callback-Funktion.

Der Code ist sehr einfach, aber schwer für mich zu finden ...

Das Gitter Schöpfung:

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}}, ....] 

Die Callback-Funktion:

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'); 
    } 
} 

Es ist nicht scheinen optimiert zu sein, aber es funktioniert!

Answer 1

Es ist nicht unmöglich, nach dem Laden eine neue Spalte hinzuzufügen, aber es ist möglich, eine versteckte Spalte sichtbar zu machen. Sie müssen nur die Spalte mit Kontrollkästchen definieren (Sie können formatoptions: { disabled: false} verwenden, falls erforderlich) und innerhalb von loadComplete Callback verwenden, um die Spalte sichtbar zu machen, falls erforderlich, oder erzwingen, dass sie mit der Methode hideCol ausgeblendet wird.

AKTUALISIERT: Wenn ich das richtig verstehen, was Sie wollen (nach der Diskussion in den Kommentaren), dann sollte the demo die Lösung zeigen:

• die Demo-Spalte mit Kontrollkästchen erstellt auf den Eingangsdaten basieren (basierend auf Boolescher Wert, der für jede Zeile existiert). Die vollständigen Eingangsdaten werden von jqGrid automatisch in den internen Parametern data und _index gespeichert. Die erste Seite mit den Daten wird angezeigt.
• Die Demo verwendet beforeSelectRow, um das Klicken/Überprüfen/Deaktivieren der Kontrollkästchen zu behandeln. Weil datatype: "local" in jqGrid verwendet werden, habe ich getLocalRow verwendet, um auf internes Objekt zuzugreifen, das die Daten der Zeile darstellt.Beim Aktivieren/Deaktivieren der Kontrollkästchen änderte ich das entsprechende Feld der Daten. Als Ergebnis kann man den Status einiger Checkboxen ändern, die Seite wechseln und zur ersten Seite zurückkehren. Man wird sehen, dass der geänderte Status der Checkboxen gespeichert wurde.

Im Folgenden sind der wichtigste Teil des Codes:

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 
    }, 

    ... 
});