AppML案例研究之HTML 模板

此案例研究演示了如何構建一個完整的 <AppML> 互聯網應用程序，具有針對資料庫中的若干表進行信息列舉、編輯和搜索的功能。

添加 HTML 模板

我們將演示如何向 HTML 頁面添加 HTML 模板。

列出客戶

HTML - View

<h1>Customers</h1>

<div id="List01"></div><br>

<table id="Template01" class="appmltable" stylex="display:none">

<tr>

<th>Customer</th>

<th>City</th>

<th>Country</th>

</tr>

<tr id="appml_row">

<td>#CustomerName#</td>

<td>#City#</td>

<td>#Country#</td>

</tr>

</table>

<script src="appml.js"></script>

<script>

var customers

customers=new AppML("appml.php","Models/Customers");

customers.run("List01","Template01");

</script>

嘗試一下 ?

列出客戶和客戶表單

通過巧妙地使用模板，可以很容易添加 <AppML> 列表對象和 <AppML> 表單之間的鏈接：

HTML - View

<h1>Customers</h1>

<div id="Form01"></div><br>

<div id="List01"></div><br>

<table id="Template01" class="appmltable" stylex="width:100%;display:none">

<tr>

<th></th>

<th>Customer</th>

<th>City</th>

<th>Country</th>

</tr>

<tr id="appml_row">

<td stylex="cursor:pointer" onclick="openForm("#CustomerID#")">

<img src="images/appmlFolder.png"></td>

<td>#CustomerName#</td>

<td>#City#</td>

<td>#Country#</td>

</tr>

</table>

<script src="appml.js"></script>

<script>

var customers,customerForm;

customers=new AppML("appml.php","Models/Customers");

customers.run("List01","Template01");

function openForm(id)

{

customerForm=new AppML("appml.php","Models/Customers");

customerForm.displayType="form";

customerForm.run("Form01","",id);

}

</script>

列出客戶和客戶訂單

通過巧妙地使用模板，可以很容易添加 <AppML> 列表對象和所鏈接的列表之間的鏈接：

HTML - View

<h1>Customers</h1>

<div id="List01"></div><br>

<div id="Orders01"></div><br>

<table id="Template01" class="appmltable" stylex="width:100%;display:none">

<tr>

<th>Customer</th>

<th>City</th>

<th>Country</th>

<th></th>

</tr>

<tr id="appml_row">

<td>#CustomerName#</td>

<td>#City#</td>

<td>#Country#</td>

<td><a href="" onclick="openOrders("#CustomerID#");return false;">Orders</a></td>

</tr>

</table>

<table id="Template02" class="appmltable" stylex="width:100%;display:none">

<tr>

<th>Customer</th>

<th>Date</th>

<th>Salesperson</th>

<th>Shipper</th>

</tr>

<tr id="appml_row">

<td>#CustomerName#</td>

<td>#OrderDate#</td>

<td>#Salesperson#</td>

<td>#ShipperName#</td>

</tr>

</table>

<script src="appml.js"></script>

<script>

var customers,orders;

customers=new AppML("appml.php","Models/Customers");

customers.run("List01","Template01");

function openOrders(id)

{

orders=new AppML("appml.php","Models/Orders");

orders.setQuery("orders.customerid",id);

orders.commands=false;

orders.run("Orders01","Template02");

}

</script>

嘗試一下 ?

現在把所有的合併在一起

最後，通過少量代碼複製，我們就可以完成項目。

客戶列表、表單和訂單

<h1>Customers</h1>

<div id="List01">

<table id="appml_list" class="appmllist">

<tr>

<th>Customer</th>

<th>City</th>

<th>Country</th>

<th></th>

</tr>

<tr id="appml_row">

<td>#CustomerName#</td>

<td>#City#</td>

<td>#Country#</td>

<td><a href="" onclick="openOrders("#CustomerID#");return false;">Orders</a></td>

</tr>

</table>

</div>

<div id="List02"></div>

<script src="appml.js"></script>

<script>

var Customers,Orders

Customers=new AppML("appml.php","Models/Customers");

Customers.run("List01");

function openOrders(id)

{

var Orders=new AppML("appml.php","Models/Orders");

Orders.setQuery("orders.customerid",id);

Orders.commands=false;

Orders.run("List02");

}

</script>

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！