最新的Web開發教程
 

AppML列表


在本章中,我們將列出從數據庫中記錄。


此頁面上的示例使用本地SQL數據庫。
本地SQL數據庫不能在IE或Firefox的工作。 使用Chrome或Safari。

創建新模型

在前面的章節中,你使用的模型來創建數據庫。

現在創建一個新的模型,包括篩選和排序定義:

model_customerslist.js

{
"rowsperpage" : 10,
"database" : {
    "connection" : "localmysql",
    "sql" : "SELECT * FROM Customers",
    "orderby" : "CustomerName"
},
"filteritems" : [
    {"item" : "CustomerName", "label" : "Customer"},
    {"item" : "City"},
    {"item" : "Country"}
],
"sortitems" : [
    {"item" : "CustomerName", "label" : "Customer"},
    {"item" : "City"},
    {"item" : "Country"}
]
}

使用應用程序的模型:

<div appml-data=" local?model=model_customerslist ">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>

<table class="table table-striped table-bordered">
  <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>
試一試»

創建一個HTML過濾器模板

為您的過濾器的HTML:

inc_filter.htm

<div id="appml_filtercontainer" class="jumbotron" style="display:none;">
  <button id="appmlbtn_queryClose" type="button" class="close"><span>&times;</span></button>
  <h2>Filter</h2>
  <div id="appml_filter">
    <div appml-repeat="filteritems">
      <div class="row">
        <div class="col-sm-3">
          <label>{{label||item}}:</label>
        </div>
        <div class="col-sm-2">
          <input id="appml_datatype_{{item}}" type='hidden'>
          <select id="appml_operator_{{item}}" class="form-control">
            <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="col-sm-7">
          <input id="appml_query_{{item}}" class="form-control">
        </div>
      </div>
    </div>
  </div>
  <div id="appml_orderby">
    <h2>Order By</h2>
    <div class="row">
      <div class="col-sm-5">
        <select id='appml_orderselect' class="form-control">
          <option value=''></option>
          <option appml-repeat="sortitems" value="{{item}}">{{label || item}}</option>
        </select>
      </div>
      <div class="col-sm-7">
        ASC <input type='radio' id="appml_orderdirection_asc"
        name='appml_orderdirection' value='asc'>
        DESC <input type='radio' id="appml_orderdirection_desc"
        name='appml_orderdirection' value='desc'>
      </div>
    </div>
  </div>
  <br>
  <button id="appmlbtn_queryOK" type="button" class="btn btn-primary">OK</button>
</div>

保存在一個文件過濾器HTML與像一個合適的名字"inc_filter.htm"

在您的原型appml,包括HTML的過濾器HTML:

<div appml-data="local?model=model_customerslist">

<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></div>
<div appml-include-html="inc_filter.htm" ></div>
<table class="table table-striped table-bordered">
  <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>
試一試»