jQuery Grid Plugin - jqGrid

   // Grid
    $("#Abnahmen_Table").jqGrid
    ({
        // Options
        url:     "../includes/abnahme/IncAbnahmeAbnahmen.php?action=load",
        editurl: "../includes/abnahme/IncAbnahmeAbnahmen.php?action=save",
    mtype: "POST",
        datatype: "json",
        caption: "Abnahmen",
    idPrefix: "Abnahmen_",
        colNames:
        [
            '',
      'ID Act',
            'Datum',
      'Messung',
      'Raum T',
      'Raum F',
      'Wand T',
            'Handlungsbedarf',
            'Kunde',
            'Ecodry',
            'Bemerkung'
        ],
        colModel:
        [
            {name:'Action', width:'60px', fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}},
            {name:'User_Id', width:'60px', index:'User_Id', editable:false, edittype:'text', frozen:true, align:'right'},
            {name:'Abnahme_Timestamp', width:'80px', index:'Abnahme_Timestamp', editable:true, edittype:'text', sorttype:"date", editoptions:{size:10, maxlength:10, dataInit: function(element){$(element).datepicker({numberOfMonths: 3, dateFormat: 'dd.mm.yy'})}}},
            {name:'Abnahme_Typ', width:'120px', index:'Abnahme_Typ', editable:true, edittype:"select", formatter:"select", editoptions:{value:"1:Basismessung;2:Kontrollmessung;3:Schlussmessung;4:Sondermessung"}},
      {name:'Abnahme_Raumtemperatur', index: 'Abnahme_Raumtemperatur', width:'50px', editable:true, edittype:'text', formatter:numFormat, formatoptions:{defaultValue:''}, align:'right'},
      {name:'Abnahme_Raumfeuchte', index: 'Abnahme_Raumfeuchte', width:'50px', editable:true, edittype:'text', formatter:numFormat, formatoptions:{defaultValue:''}, align:'right'},
      {name:'Abnahme_Wandtemperatur', index: 'Abnahme_Wandtemperatur', width:'50px', editable:true, edittype:'text', formatter:numFormat, formatoptions:{defaultValue:''}, align:'right'},
            {name:'Abnahme_Aktion', width:'400px', index:'Abnahme_Aktion', editable:true, edittype:'text'},
            {name:'Abnahme_Aktion_Kunde', width:'60px', align:'center', index:'Abnahme_Aktion_Kunde', editable:true, edittype:'checkbox', formatter:'checkbox', editoptions:{value:"1:0"}},
            {name:'Abnahme_Aktion_Ecodry', width:'60px', align:'center', index:'Abnahme_Aktion_Ecodry', editable:true, edittype:'checkbox', formatter:'checkbox', editoptions:{value:"1:0"}},
            {name:'Abnahme_Bemerkung', width:'400px', index:'Abnahme_Bemerkung', editable:true, edittype:'text'}
        ],
        sortname: "Abnahme_Timestamp",
        rowNum: 20,
        scroll: true,
        pager: "#Abnahmen_Pager",
        viewrecords: true,
        autowidth: true,
    shrinkToFit: false,
        height: 260,
//    hiddengrid: true,

        // Events
    ondblClickRow: function(nId)
        {
            if(nId && nId!=nSelectedLast)
            {
                $(this).jqGrid('saveRow',nSelectedLast);
                nSelectedLast=nId;
            }
            
      // Datensatz ändern
      $(this).jqGrid('editRow', nId, true);
        },

        subGrid: true,
        subGridRowExpanded: function(subgrid_id, row_id)
        {
            // Variablen
      var subgrid_table_id1;
            subgrid_table_id1 = subgrid_id+"_Subgrid_1";
      var pager_id1 = "p_" + subgrid_table_id1;

      // Subgrids
      jQuery("#"+subgrid_id).html("<div style='margin:20px'><table id='" + subgrid_table_id1 + "' class='scroll'></table><div id='" + pager_id1 + "'></div></div>");

      // 1. Subgrid
      $("#"+subgrid_table_id1).jqGrid
      ({
        // Options
        url:     "../includes/abnahme/IncAbnahmeAbnahmenMesswerte.php?action=load&Abnahme_Id="+row_id.split("_").pop(),
        editurl: "../includes/abnahme/IncAbnahmeAbnahmenMesswerte.php?action=save&Abnahme_Id="+row_id.split("_").pop(),
        mtype: "POST",
        datatype: "json",
        caption: "Messwerte",
        idPrefix: "Messwerte_",
        colNames:
        [
          '',
              'ID Act',
          'Messstelle',
          'Baustoff',
          'Salzgehalt',
          'Naturfeuchte',
          'Oben',
          'Mitte',
          'Unten',
          'Bemerkung'
        ],
        colModel:
        [
          {name:'Action', width:'60px', fixed:true, sortable:false, resize:false, formatter:'actions', formatoptions:{keys:true}},
                    {name:'User_Id', width:'60px', index:'User_Id', editable:false, edittype:'text', frozen:true, align:'right'},
          {name:'Messwert_Messstelle', width:'80px', index:'Messwert_Messstelle', editable:true, edittype:"select", editoptions:{value:"<?php echo $strMessstellen ?>"}, align:'center'},
          {name:'Messwert_Baustoff', width:'160px', index:'Messwert_Baustoff', editable:true, edittype:"select", formatter:"select", editoptions:
              {
                value:"<?php echo $strBaustoffe ?>",
                            dataEvents:
              [
                {
                    type: 'change',
                  fn: function(e)
                  {
//                      alert("Baustoff geändert "+row_id);
                  }
                }
              ]          
          
              }},
          {name:'Messwert_Salzgehalt', width:'80px', index:'Messwert_Salzgehalt', editable:true, edittype:"select", formatter:"select", editoptions:
              {
                value:"0:;1:Ohne;2:Leicht;3:Stark;4:Extrem",
                            dataEvents:
              [
                {
                    type: 'change',
                  fn: function(e)
                  {
//                      alert("Baustoff geändert "+row_id);
                  }
                }
              ]          
          
              }},
          {name:'Messwert_Naturfeuchte', index: 'Messwert_Naturfeuchte', width:'70px', editable:true, edittype:'text', formatter:numFormat, align:'right'},
          {name:'Messwert_Messwert_Oben', index: 'Messwert_Messwert_Oben', width:'60px', editable:true, edittype:'text', formatter:numFormat, align:'right'},
          {name:'Messwert_Messwert_Mitte', index: 'Messwert_Messwert_Mitte', width:'60px', editable:true, edittype:'text', formatter:numFormat, align:'right'},
          {name:'Messwert_Messwert_Unten', index: 'Messwert_Messwert_Unten', width:'60px', editable:true, edittype:'text', formatter:numFormat, align:'right'},
          {name:'Messwert_Bemerkung', width:'400px', index:'Messwert_Bemerkung', editable:true, edittype:'text'}
        ],
        sortname: "Messwert_Messstelle",
        rowNum: 10,
        scroll: true,
        pager: pager_id1,
        viewrecords: true,
        autowidth: true,
        shrinkToFit: false,
        height: "70px",
//        hiddengrid: true,

        // Events
        onSelectRow: function(nId)
        {
                    // beim Zeilenwechsel Änderungen speichern
          if(nId && nId!=nSelectedLast)
          {
            $("#"+subgrid_table_id1).jqGrid('saveRow',nSelectedLast);
            nSelectedLast=nId;
          }

          // Datensatz ändern
          $("#"+subgrid_table_id1).jqGrid('editRow', nId, true);
        },
      })

      // 1. Subgrid Navigator
      $("#"+subgrid_table_id1).jqGrid
      (
        'navGrid',
        "#"+pager_id1,
        {add:true, edit:false, del:false, search:false},
        {
          // Edit
        },
        {
          // Add
          recreateForm: true,
          closeAfterAdd: false
        },
        {
          // Delete
        },
        {},
        {}
      );
        }
    });

    // Grid Navigator
    $("#Abnahmen_Table").jqGrid
  (
      'navGrid',
    "#Abnahmen_Pager",
    {add:true, edit:false, del:false, search:false},
    {
        // Edit
    },
    {
        // Add
        recreateForm: true,
      closeAfterAdd: true
    },
    {
        // Delete
    },
    {},
    {}
  );