AppML-Listen
In diesem Kapitel listen wir Datensätze aus einer Datenbank auf.
Die Beispiele auf dieser Seite verwenden eine lokale SQL-Datenbank.
Lokale SQL-Datenbanken funktionieren nicht in IE oder Firefox. Verwenden Sie Chrome oder Safari.
Erstellen Sie ein neues Modell
Im vorherigen Kapitel haben Sie ein Modell verwendet, um eine Datenbank zu erstellen.
Erstellen Sie nun ein neues Modell, einschließlich Filter- und Sortierdefinitionen:
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"}
]
}
Verwenden Sie das Modell in Ihrer Anwendung:
Beispiel
<div appml-data="local?model=model_customerslist">
<h1>Customers</h1>
<div appml-include-html="inc_listcommands.htm"></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>
Erstellen Sie eine HTML-Filtervorlage
Erstellen Sie den HTML-Code für Ihre Filter:
inc_filter.htm
<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">×</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"><></option>
<option value="2"><</option>
<option value="3">></option>
<option value="4"><=</option>
<option value="5">>=</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>
Speichern Sie das Filter-HTML in einer Datei mit einem richtigen Namen wie "inc_filter.htm".
Fügen Sie den Filter-HTML mit appml-include-html in Ihren Prototyp ein :
Beispiel
<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="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>