AppML 列表

在本章中，我们将列出数据库中的记录。

本页上的示例使用本地 SQL 数据库。

本地 SQL 数据库在 IE 或 Firefox 中不起作用。请使用 Chrome 或 Safari。

创建一个新的模型

在上一章中，您使用了一个模型来创建数据库。

现在创建一个新模型，包括过滤器和排序定义:

model_customerslist.js

{
"database" : {
    "connection" : "localmysql",
    "maintable" : "Customers",
    "keyfield" : "CustomerID",
    "sql" : "SELECT * FROM Customers"},
"updateItems" : [
    {"item" : "CustomerName"},
    {"item" : "Address"},
    {"item" : "PostalCode"},
    {"item" : "City"},
    {"item" : "Country"}]
}

在应用程序中使用该模型:

实例

<!DOCTYPE html>
<html>
<title>Customers</title>
<link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css">
<script src="https://cankaoshouce.com/js/appml/appml.js"></script>
<script src="/js/appml/appml_sql.js"></script>
<body>
<div class="w3-container">
<div appml-data="local?model=/example/appml/model_customerslist">
<h2>Customers</h2>
<div appml-include-html="/example/appml/inc_listcommands.html"></div>
<table class="w3-table-all">
  <tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr appml-repeat="records">
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
  </tr>
</table>
</div>
</div>
</body>
</html>

运行一下

创建一个 HTML 过滤器模板

为过滤器创建 HTML:

inc_filter.html

<div id="appml_filtercontainer" class="w3-container w3-light-grey w3-section w3-padding-large" style="display:none;">
  <span id="appmlbtn_queryClose" onclick="this.parentNode.style.display='none';" class="w3-button w3-large w3-right">&times;</span>
  <h2>Filter</h2>
  <div id="appml_filter">
    <div appml-repeat="filteritems">
      <div class="w3-row">
        <div class="w3-col m4">
          <label>{{label||item}}:</label>
        </div>
        <div class="w3-col m2">
          <input id="appml_datatype_{{item}}" type='hidden'>
          <select id="appml_operator_{{item}}" class="w3-select w3-border">
            <option value="0">=</option>
            <option value="1">&lt;&gt;</option>
            <option value="2">&lt;</option>
            <option value="3">&gt;</option>
            <option value="4">&lt;=</option>
            <option value="5">&gt;=</option>
            <option value="6">%</option>
          </select>
        </div>
        <div class="w3-col m6">
          <input id="appml_query_{{item}}" class="w3-input w3-border">
        </div>
      </div>
    </div>
  </div>
  <div id="appml_orderby">
    <h2>Order By</h2>
    <div class="w3-row">
      <div class="w3-col m5">
        <select id='appml_orderselect' class="w3-select w3-border">
          <option value=''></option>
          <option appml-repeat="sortitems" value="{{item}}">{{label || item}}</option>
        </select>
      </div>
      <div class="w3-col m7">
        ASC <input type='radio' id="appml_orderdirection_asc" name='appml_orderdirection' value='asc' class="w3-radio">
        DESC <input type='radio' id="appml_orderdirection_desc" name='appml_orderdirection' value='desc' class="w3-radio">
      </div>
    </div>
  </div>
  <br>
  <button id="appmlbtn_queryOK" type="button" class="w3-btn w3-green">OK</button>
</div>

将过滤器 HTML 保存在一个文件中，使用合适的名称，如 "inc_filter.html"。

使用 appml-include-html 在原型中包含上面的过滤器 HTML:

实例

<!DOCTYPE html>
<html>
<title>Customers</title>
<link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css">
<script src="https://cankaoshouce.com/js/appml/appml.js"></script>
<script src="/js/appml/appml_sql.js"></script>
<body>
<div class="w3-container">
<div appml-data="local?model=/example/appml/model_customerslist">
<h2>Customers</h2>
<div appml-include-html="/example/appml/inc_listcommands.html"></div>
<div appml-include-html="/example/appml/inc_filter.html"></div>
<table class="w3-table-all">
  <tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr appml-repeat="records">
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
  </tr>
</table>
</div>
</div>
</body>
</html>