Lektion 5: Hinzufügen von Datenmanipulation und Navigation

Diese Lektion beschreibt, wie Sie Ihrer Anwendung Datenmanipulations- und Navigationslogik hinzufügen.

Die Tabelle initialisieren

Initialisieren Sie CustomerTable, die die Customer-Tabelle in Ihrer Datenbank darstellt, indem Sie den folgenden Code am Ende der Connect-Funktion in tutorial.js hinzufügen:

try {
  CustomerTable = Connection.getTable( "customer", null );
  CustomerTable.open();
} catch( ex3 ) {
  alert("Error: " + ex3.getMessage() );
}

Fügen Sie Variablen hinzu, um Daten zwischen der Datenbank und dem Webformular auszutauschen.

Fügen Sie die folgenden Variablendeklarationen am Anfang von tutorial.js für die customer-Daten hinzu:

var GivenName = "";
var Surname = "";
var Street = "";
var City = "";
var Phone = "";
var ID = "";

Erstellen Sie Funktionen, um customer-Daten abzurufen und anzuzeigen.

Fügen Sie tutorial.js die folgende Funktion hinzu: Diese Funktion ruft die aktuelle Zeile der customer-Daten ab und gewährleistet, dass NULL-Spalten als leere Zeichenfolgen dargestellt werden:

function Fetch() 
{
    if( CustomerTable.getRowCount() == 0 || CustomerTable.isBOF() ) {
 GivenName = "";
 Surname = "";
 Street = "";
 City = "";
 Phone = "";
 ID = "";
 return;
    } 
    ID = CustomerTable.getString( CustomerTable.schema.getColumnID( "ID" ) );
    GivenName = CustomerTable.getString( CustomerTable.schema.getColumnID( "GivenName" ) );
    Surname = CustomerTable.getString( CustomerTable.schema.getColumnID( "Surname" ) );
    Street = CustomerTable.getString( CustomerTable.schema.getColumnID( "Street" ) );
    if( CustomerTable.isNull( CustomerTable.schema.getColumnID( "City" ) ) ) {
 City = "";
    } else {
 City = CustomerTable.getString( CustomerTable.schema.getColumnID( "City" ) );
    }
    if( CustomerTable.isNull( CustomerTable.schema.getColumnID( "Phone" ) ) ) {
 Phone = "";
    } else {
 Phone = CustomerTable.getString( CustomerTable.schema.getColumnID( "Phone" ) );
    }
}

Fügen Sie main.htm den folgenden Inhalt unmittelbar nach dem <script>-Tag hinzu: DisplayRow nimmt die Werte aus der Datenbank und zeigt sie im Webformular an. FetchForm nimmt die aktuellen Werte im Webformular und stellt sie dem Datenbankcode zur Verfügung.

<script>
function DisplayRow() {
    Fetch();
    document.form.ID.value = ID;
    document.form.GivenName.value = GivenName;
    document.form.Surname.value = Surname;
    document.form.Street.value = Street;
    document.form.City.value = City;
    document.form.Phone.value = Phone;
}

function FetchForm() {
    GivenName = document.form.GivenName.value;
    Surname = document.form.Surname.value;
    Street = document.form.Street.value;
    City = document.form.City.value;
    Phone = document.form.Phone.value;
}
</script>

Rufen Sie DisplayRow auf, um die aktuelle Zeile anzuzeigen, wenn die Anwendung geladen wird. Ändern Sie das <body>-Tag am Anfang von main.htm folgendermaßen:
<body onload="Connect(); DisplayRow();">

Auch wenn es noch keine Daten in der tutorial-Datenbank gibt, ist es ein guter Zeitpunkt, um den Kanal zu synchronisieren, damit sichergestellt wird, dass die Anwendung korrekt läuft.

So fügen Sie Code zum Einfügen von Zeilen hinzu

Erstellen Sie Funktionen, um customer-Daten einzufügen.

In der folgenden Prozedur versetzt der Aufruf von insertBegin die Anwendung in den Einfügemodus und setzt alle Werte in der aktuellen Zeile auf ihre Standardwerte. Die ID-Spalte erhält beispielsweise den nächsten Autoincrement-Wert. Die Spaltenwerte werden festgelegt, und die nächste Zeile wird eingefügt.

Fügen Sie tutorial.js die folgende Funktion hinzu:

function Insert()
{
    try {
 CustomerTable.insertBegin();
 CustomerTable.setString( CustomerTable.schema.getColumnID( "GivenName" ), GivenName );
 CustomerTable.setString( CustomerTable.schema.getColumnID( "Surname" ), Surname );
 CustomerTable.setString( CustomerTable.schema.getColumnID( "Street" ), Street );
 if( City.length > 0 ) {
     CustomerTable.setString( CustomerTable.schema.getColumnID( "City" ), City );
 }
 if( Phone.length > 0 ) {
     CustomerTable.setString( CustomerTable.schema.getColumnID( "Phone" ), Phone );
 }
 CustomerTable.insert();
 CustomerTable.moveLast();
    } catch( ex ) {
 alert( "Error: cannot insert row: " + ex.Message() );
    }
}

Fügen Sie main.htm die folgende Funktion nach der FetchForm-Funktion und vor dem </script>-Tag hinzu:

function ClickInsert()
{
    FetchForm();
    Insert();
    DisplayRow();
}

Kommentieren Sie diese Seite in DocCommentXchange.