Neste capítulo, vamos listar os registros de um banco de dados.
Os exemplos nesta página usar um banco de dados SQL local.
não bancos de dados SQL locais não funciona no IE ou Firefox. Use Chrome ou Safari.
Criar um novo modelo
No capítulo anterior, você usou um modelo para criar um banco de dados.
Agora criar um novo modelo, incluindo definições de filtro e classificação:
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"}
]
}Use o modelo em sua aplicação:
Exemplo
<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> Tente você mesmo " Criar um Modelo de Filtro HTML
Criar o HTML para os seus filtros:
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>Salve o HTML filtro em um arquivo com um nome próprio como "inc_filter.htm" .
Incluir o HTML filtro no seu protótipo com appml-incluem-html:
Exemplo
<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> Tente você mesmo "