Listas de AppML
En este capítulo, enumeraremos los registros de una base de datos.
Los ejemplos de esta página utilizan una base de datos SQL local.
Las bases de datos SQL locales no funcionan en IE o Firefox. Usa Chrome o Safari.
Crear un nuevo modelo
En el capítulo anterior, utilizó un modelo para crear una base de datos.
Ahora cree un nuevo modelo, incluidas las definiciones de filtrado y ordenación:
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"}
]
}
Utilice el modelo en su aplicación:
Ejemplo
<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>
Crear una plantilla de filtro HTML
Cree el HTML para sus filtros:
filtro_inc.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>
Guarde el filtro HTML en un archivo con un nombre propio como "inc_filter.htm".
Incluya el filtro HTML en su prototipo con appml-include-html :
Ejemplo
<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>