În acest capitol, vom lista de înregistrări dintr-o bază de date.
Exemplele de pe această pagină a utiliza o bază de date SQL locale.
Baze de date SQL locale nu funcționează în IE sau Firefox. Utilizați Chrome sau Safari.
Crearea unui nou model
În capitolul anterior, ați folosit un model pentru a crea o bază de date.
Acum, creați un nou model, inclusiv de filtrare și sortare definiții:
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"}
]
}Utilizați modelul din aplicația:
Exemplu
<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> Încearcă - l singur » Creați un filtru șablon HTML
Creați HTML pentru filtrele dvs.:
inc_filter.htm
<div id="appml_filtercontainer" class="jumbotron"
style="display:none;">
<button id="appmlbtn_queryClose" type="button"
class="close"><span>×</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"><></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="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>Salvați HTML filtru într - un fișier cu un nume propriu ca "inc_filter.htm" .
Includeți HTML filtru în prototip cu appml-includ-html:
Exemplu
<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> Încearcă - l singur »