jqgrid subgrids aus einem einzigen verschachtelten json

Will ich mit jqgrid mit verschachtelten subgrids. Jedoch nur Beispiele, die ich gefunden haben, füllen Sie die main-Netz mit einer url laden-Datenanruf und eigene Aufrufe zum füllen der subgrids.

Meine subgrid Daten existieren, werden als verschachtelte Dokumente in einer JSON-Struktur, wie in dem snippet unten (ich möchte das Kapitel zu erscheinen, als subgrids des Buches, und die Dateien werden subgrids innerhalb von Kapiteln).

Kann ich subgrids aus verschachtelten JSON-Dokumente mit jqgrid?

{
  _id: {"509403957ae7d3929edcb812"},
  name: {"MYBOOK"},
  layout: {
        chapters [
           {
              name: "myfirstchapter",
              sequence: 1,
              title: "My First Chapter",
              files: [
                 {
                 filetype: "tex",
                 name: "myfirstfile"
                 },
                 {
                 filetype: "tmpl",
                 name: "myfileb",
                 }
              ],

           },
           {
              name: "mysecondchapter",
              sequence: 2,
              title: "My Second Chapter",
              files: [
                 {
                 filetype: "tex",
                 name: "myintro"
                 },
                 {
                 filetype: "tex",
                 name: "myfilec",
                 }
              ],

           ],
        }
}
InformationsquelleAutor Tim | 2012-11-05
  1. 7

    Machte ich die demo, die zeigen, wie dies zu tun:

    jqgrid subgrids aus einem einzigen verschachtelten json

    Die demo basiert auf der Idee beschrieben hier und auf die Tatsache, dass interne data option speichert die eingegebenen Daten in unverändert form. So brauchen Sie nicht, um einige versteckte Spalten zu speichern zusätzliche Informationen, die mit der Zeile. Sehen die Antwort und diese eine für mehr details. Ich streng empfehlen Ihnen zusätzlich die Verwendung idPrefix option in subgrids. Sehen die Antwort für details.

    Unten im code, die ich verwendet habe in die demo:

    var myData = {
        _id: "509403957ae7d3929edcb812",
        name: "MYBOOK",
        layout: {
            chapters: [
                {
                    name: "myfirstchapter",
                    sequence: 1,
                    title: "My First Chapter",
                    files: [
                        { filetype: "tex", name: "myfirstfile" },
                        { filetype: "tmpl", name: "myfileb" }
                    ]
                },
                {
                    name: "mysecondchapter",
                    sequence: 2,
                    title: "My Second Chapter",
                    files: [
                        { filetype: "tex", name: "myintro" },
                        { filetype: "tex", name: "myfilec" }
                    ]
                }
            ]
        }
    },
    $grid = $("#list");

$grid.jqGrid({
    datatype: "local",
    data: myData.layout.chapters,
    colNames: ["Sequence", "Name", "Title"],
    colModel: [
        {name: "sequence", width: 65, key: true },
        {name: "name", width: 150 },
        {name: "title", width: 150}
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
    pager: "#pager",
    gridview: true,
    ignoreCase: true,
    rownumbers: true,
    sortname: "sequence",
    viewrecords: true,
    height: "100%",
    subGrid: true,
    subGridRowExpanded: function (subgridId, rowid) {
        var subgridTableId = subgridId + "_t";
        $("#" + subgridId).html("<table id='" + subgridTableId + "'></table>");
        $("#" + subgridTableId).jqGrid({
            datatype: "local",
            data: $(this).jqGrid("getLocalRow", rowid).files,
            colNames: ["Name", "Filetype"],
            colModel: [
              {name: "name", width: 130, key: true},
              {name: "filetype", width: 130}
            ],
            height: "100%",
            rowNum: 10,
            sortname: "name",
            idPrefix: "s_" + rowid + "_"
        });
    }
});
$grid.jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});

    In dem obigen code, den ich ein paar syntax-Fehler von den Daten, die du gepostet hast.

    • vielen Dank Oleg, ich bin mit Ihrem Beispiel zu lernen jetzt. Aber um sicherzustellen, dass ich verstehe, ich lade die Daten zunächst mit einer url von meinem db-server, und die subgrid dann hat datatype 'local', richtig?
    • Sie sind herzlich willkommen! Es gibt viele verschiedene Szenarien zu füllen, jqGrid. Es ist besser, wenn Sie beschreiben Ihre Anforderungen separat in details. Wollen Sie eine bessere Nutzung datatype: "json"? Wollen Sie zum implementieren von paging von Daten auf der server-Seite oder benutzen wollen loadonce: true?
    • danke. Ich werde versuchen mehr mit dem Beispiel hast du schon gegeben und wenn ich kann ' T es herausfinden ich werde Sie bitten, eine andere Frage. Danke!!!
    • Sie sind herzlich willkommen! Ein problem mit jqGrid - es gibt zu viele alternative Möglichkeiten der Umsetzung. Zum Beispiel gibt es existieren data parameter in verschiedenen Situationen. Wenn Sie datatype: "json" ohne loadonce: true dann keine data gefüllt werden. Im Fall einer Implementierung einer Lösung Weg. Wenn Sie datatype: "json" mit loadonce: true dann data gefüllt werden, aber mit einigen Einschränkungen. Wenn Sie datatype: "local" können Sie freie Struktur der data. Kann man erstellen-Lösung für alle Fälle, aber die Umsetzung wird unterschiedlich sein.
    InformationsquelleAutor Oleg
Schreibe einen Kommentar