Hinzufügen von Daten zum jqgrid-Untergitter bei Verwendung des clientSide-Datentyps

Question

Ist es möglich, Daten zu einem Untergitter hinzuzufügen, wenn der Datentyp für das übergeordnete jqgrid vom Typ clientSide ist?

Ich bin in der Lage, eine Zeile zu dem übergeordneten jqGrid hinzufügen mit:

jQuery("#myId").addRowData(0, someRowData); 

aber ich bin nicht sicher, wie ich Daten an den subgrid hinzufügen würde. Irgendwelche Ideen?

Answer 1

Ich konnte nicht identifizieren, wie Daten tatsächlich zu einem Untergitter von jqGrid hinzugefügt werden, aber ich konnte Daten zu einem Gitter innerhalb eines anderen Gitters hinzufügen.

Mein Meister Gitter wie folgt aussieht:

$("#" + tblNm).jqGrid({ 
       datatype: "local", 
       colNames: ['id', 'Last Name', 'First Name', 'Address'], 
       colModel: [{ 
        name: 'id', 
        index: 'id', 
        width: 75, 
        sortable: false 
       }, { 
        name: 'lastNm', 
        index: 'lastNm', 
        width: 90, 
        sortable: false 
       }, { 
        name: 'firstNm', 
        index: 'firstNm', 
        width: 100, 
        sortable: false 
       }, { 
        name: 'address', 
        index: 'address', 
        width: 200, 
        align: "left", 
        sortable: false 
       }], 
       width: "100%", 
       height: "100%", 
       caption: "Clients", 
       jsonReader: { 
        root: "clients", 
        page: "currpage", 
        total: "totalpages", 
        records: "totalrecords", 
        repeatitems: false, 
        id: "id" 
       }, 
       subGrid: true, 
       subGridRowExpanded: function(subgrid_id, row_id){ 
        console.debug("SubGrid_ID: " + subgrid_id + 
        " /row_id: " + 
        row_id); 
        var subgrid_table_id, pager_id; 
        subgrid_table_id = "mySubGridName" + row_id; 
        pager_id = "p_" + subgrid_table_id; 
        $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "'></table>"); 
        jQuery("#" + subgrid_table_id).jqGrid({ 
         datatype: "local", 
         colNames: ['Order Id', 'Item Name', 'Cost'], 
         colModel: [{ 
          name: "ordId", 
          index: "ordId", 
          width: 20, 
          key: true 
         }, { 
          name: "itemName", 
          index: "itemName", 
          width: 130 
         }, { 
          name: "cost", 
          index: "cost", 
          width: 200, 
          align: "left" 
         }], 
         rowNum: 20, 
         caption: "Orders", 
         height: '100%', 
         width: '100%', 
         jsonReader: { 
          root: "orders", 
          page: "currpage", 
          total: "totalpages", 
          records: "totalrecords", 
          repeatitems: false, 
          id: "num" 
         } 
        }); 
       } 
      }); 

ich das Master-Gitter laden, indem Sie so etwas wie:

$("#" + tblNm)[0].addJSONData(wrapper); 

Dann, wenn ich die subgrid Daten bekomme ich so etwas wie:

// click on the subgrid so that the table is added to the DOM 
// I think there are better ways of doing this... you'll want to look @ the jqGrid documentation 
$("#" + masterTblId + " tr[id='1'] td[role='grid'] a span").click(); 
// add the data to the subgrid 
$("#" + subGridId)[0].addJSONData(wrapper); 

Die wichtigsten Teile definieren den Code in der subgridexpanded-Eigenschaft von jqGrid und dann bei kann das Untergitter zur Anzeige zwingen.

Das einzige Problem mit dieser Methode ist, dass, wenn der Benutzer auf das Subgitterbereich klickt, wird es umgeschaltet und wenn sie erneut darauf klicken, wird es nicht ordnungsgemäß angezeigt. Ich habe die Community gefragt, wie man das hier beheben kann:

Subgrid Caching or Stopping Subgrid data from being removed (jqGrid)