Lektion 5: Datenmanipulation und Navigation hinzufügen

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 Variable 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( Table.getRowCount() == 0 ) {
 GivenName = "";
 Surname = "";
 Street = "";
 City = "";
 Phone = "";
 ID = "";
 return;
    } 
    ID = Table.getString( Table.schema.getColumnID( "ID" ) );
    GivenName = Table.getString( Table.schema.getColumnID( "GivenName" ) );
    Surname = Table.getString( Table.schema.getColumnID( "Surname" ) );
    Street = Table.getString( Table.schema.getColumnID( "Street" ) );
    if( Table.isNull( Table.schema.getColumnID( "City" ) ) ) {
 City = "";
    } else {
 City = Table.getString( Table.schema.getColumnID( "City" ) );
    }
    if( Table.isNull( Table.schema.getColumnID( "Phone" ) ) ) {
 Phone = "";
    } else {
 Phone = Table.getString( Table.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 DisplayCurrentRow 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(); DisplayCurrentRow();">

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 {
 Table.insertBegin();
 Table.setString( Table.schema.getColumnID( "GivenName" ), GivenName );
 Table.setString( Table.schema.getColumnID( "Surname" ), Surname );
 Table.setString( Table.schema.getColumnID( "Street" ), Street );
 if( City.length > 0 ) {
     Table.setString( Table.schema.getColumnID( "City" ), City );
 }
 if( Phone.length > 0 ) {
     Table.setString( Table.schema.getColumnID( "Phone" ), Phone );
 }
 Table.insert();
 Table.moveLast();
    } catch( ex ) {
 alert( "Error: cannot insert row: " + ex.getMessage() );
    }
}

Fügen Sie main.htm die folgende Funktion hinzu:

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

Kommentieren Sie diese Seite in DocCommentXchange.
Senden Sie uns Feedback über diese Seite via E-Mail.