添加 HTML 模板
我们将演示如何向 HTML 页面添加 HTML 模板。
列出客户

HTML - View
<h1>Customers</h1>
<div id=\"List01\"></div><br>
<table id=\"Template01\" class=\"appmltable\" style=\"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\" style=\"width:100%;display:none\">
<tr>
<th></th>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr id=\"appml_row\">
<td style=\"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\" style=\"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\" style=\"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>