Bygga CRUD i AG Grid med Angular och Redux

Författare Kredit:Marats Stelihs

I det här inlägget kommer vi att titta på hur man ställer in och utför CRUD-operationer i AG Grid samtidigt som vi behåller våra raddata i Redux-butiken. Redux möjliggör enkelriktat dataflöde, vilket ger mer kontroll över applikationstillstånd och verktyg för att lösa problem som är förknippade med datamutabilitet.

Vi har byggt ett exempel för att illustrera detta - se hur det fungerar nedan:

Livedemo

Livedemon nedan visar hur man uppdaterar raddata i Redux-butiken genom att utföra åtgärder i AG Grid. Högerklicka på en rad för att visa snabbmenyn och se de tillgängliga åtgärder du kan utföra i Redux-butiken.

Se livedemon med källkod nedan:

Innehåll

• Så fungerar det
• Lägga till rader
• Redigera cellvärden
• Uppdatera cellvärden programmatiskt
• Ta bort rader
• Sammanfattning

Så fungerar det

Så, hur interagerar AG Grid med Redux? Kort sagt, varje tillståndsändring i AG Grid kommuniceras till Redux, som returnerar ett uppdaterat tillstånd, vilket gör att nätet uppdaterar sig själv automatiskt för att visa detta nya tillstånd.

Se illustrationen nedan som visar hur AG Grid fungerar med Redux:

Det är därför allt vi behöver göra efter en tillståndsändring i AG Grid är att meddela Redux-butiken om det. AG Grid kommer då automatiskt att uppdatera sig själv med resultatet av den förändringen som kommer från butiken. Det är därför vi i CRUD-operationerna nedan endast visar koden för att vidarebefordra ändringarna till Redux-butiken. I exemplet visar vi hur man lägger till rader, uppdaterar rader via API, uppdaterar rader via cellredigering och tar bort rader.

Vi visar också hur du använder andra rutnätsfunktioner - klicka på namnet på funktionen nedan för att lära dig mer:

• Använda snabbmenyn för att utföra CRUD-åtgärder
• Använda Cell Editor för att uppdatera rutnätsdata
• Använda Value Formatter för att ändra utseendet på rutnätscelldata

Lägga till rader

Låt oss börja med att titta på hur man skapar nya rader. I vårt exempel när du högerklickar på en rad och klickar på knappen Lägg till i snabbmenyn, kopierar vi den klickade raddatan, tilldelar den ett nytt rad-id och skickar den till butiken med en ADD_ROW-operation. Att lägga till unika rad-id-värden är avgörande - utan dem kommer Redux-butiken inte att fungera korrekt eftersom vi arbetar med oföränderlig data som förklaras i vår dokumentation.

Se tilläggsoperationen implementerad i koden för snabbmenyalternativet nedan:

     {
        name: "<b>Add</b> " + data.model,
        action: () => {
          let newRow = { ...data, id: this.newIds };
          this.newIds++;
          this.ngRedux.dispatch({
            type: ADD_ROW,
            newRow: newRow
          });
        }
     },

Redigera cellvärden

Dubbelklicka på den översta cellen i kolumnen Modell för att börja redigera den och ange ett nytt värde. Den här uppdateringen sparas i butiken och rutnätet uppdateras sedan.

För att spara ändringar efter cellredigering i AG Grid till Redux måste vi använda en värdeinställare i AG Grids standardkolumndefinitioner. För mer information om dessa, se vår dokumentation om värdesättare och kolumndefinitioner.

I valueSetter-koden får vi kolumnnamnet (colDef), raddata (data) och uppdaterat cellvärde (newValue). Vi skapar sedan en uppdaterad version av raddata och skickar den till Redux-butiken med en UPDATE_ROW-åtgärd som visas nedan:

  defaultColDef = {
    valueSetter: ({ colDef, data, newValue }) => {
      let updatedRow = { ...data };
      updatedRow[colDef.field] = newValue;
      this.ngRedux.dispatch({
        type: UPDATE_ROW,
        payload: updatedRow
      });
      return false;
    }
  };

Uppdatera cellvärden programmatiskt

Nu när vi visade hur man uppdaterar radvärden via en cellredigering, vad sägs om att uppdatera en rad programmatiskt? Vi har byggt den här logiken i objektet "Öka pris" i snabbmenyn för rader.

I kodexemplet nedan ser du hur att klicka på detta snabbmenyalternativ ökar prisvärdet för raden. Vi skickar det specifika rad-id:t till Redux-butiken med en UPDATE_PRICE-åtgärd där priset inuti raddata för det specifika ID:t kommer att uppdateras. Se koden för detta nedan:

      {
        name: "Increase price for " + data.model,
        action: () => {
          this.ngRedux.dispatch({
            type: UPDATE_PRICE,
            payload: rowId
          });
        }
      }

Ta bort rader

För att avsluta det, låt oss se hur vi kan ta bort en rad från rutnätet. När vi högerklickar på en rad och sedan klickar på Ta bort-objektet i snabbmenyn får vi rad-id:t och skickar det i en REMOVE_ROW-åtgärd till Redux-butiken för att ta bort raden. Redux tar bort raden och AG Grid uppdaterar sig själv.

Se detta i koden nedan:

      {
        name: "<b>Delete</b> " + data.model,
        action: () => {
          this.ngRedux.dispatch({
            type: REMOVE_ROW,
            payload: rowId
          });
        }
      },

Sammanfattning

Vi hoppas att du tycker att den här artikeln är användbar när du använder AG Grid med Redux i Angular som ett alternativ till NgRxor NGXS. Dela gärna exemplet från den här bloggen och modifiera det efter dina behov.

Om du vill prova AG Grid, kolla in våra kom igång-guider (JS / React / Angular / Vue)

Lycka till med kodningen!