第 5 课：添加数据操作和导航

本课介绍了如何用数据操作和导航逻辑填充应用程序。

♦ 初始化表

通过将以下代码添加到 tutorial.js 中的 Connect 函数的末尾来初始化数据库中表示 Customer 表的 CustomerTable：

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

添加变量以在数据库和 Web 窗体之间移动数据。

为客户数据将以下变量声明添加到 tutorial.js 的顶端：

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

创建函数以读取和显示客户数据。

将以下函数添加到 tutorial.js。此函数读取客户数据的当前行，还确保 NULL 列显示为空字符串：

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" ) );
    }
}

将以下内容添加到 main.htm 中紧靠 <script> 标记之后。DisplayRow 从数据库获取值，然后在 Web 窗体中显示这些值。FetchForm 获取 Web 窗体中的当前值，然后提供给数据库代码使用。

<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>

当应用程序已装载时，调用 DisplayCurrentRow 以显示当前行。按如下方法修改 main.htm 顶端的 body 标记：
<body onload="Connect(); DisplayCurrentRow();">

虽然直到此时教程数据库中都没有任何数据，但这是同步通道以确保应用程序可以正常运行的好时机。

♦ 将代码添加到插入行

创建函数以插入客户数据。

在以下过程中，调用 InsertBegin 可以将应用程序置于插入模式下，并将当前行中的所有值设为其缺省值。例如，ID 列收到下一个自动增量值。设置列值，然后插入新行。

将以下函数添加到 tutorial.js：

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() );
    }
}

将以下函数添加到 main.htm：

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