Los últimos tutoriales de desarrollo web
 

AppML lista


En este capítulo, haremos una lista de registros de una base de datos.


Los ejemplos de esta página utilizan una base de datos SQL local.
bases de datos SQL locales no funciona en IE o Firefox. Utilizar Chrome o Safari.

Crear un nuevo modelo

En el capítulo anterior, que utilizó un modelo para crear una base de datos.

Ahora cree un nuevo modelo, que incluye filtrar y ordenar las definiciones:

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"}
]
}

Utilizar el modelo en la aplicación:

Ejemplo

<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>
Inténtalo tú mismo "

Crear una plantilla de filtro HTML

Crear el código HTML para los filtros:

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>

Guarde el HTML filtro en un archivo con un nombre propio como "inc_filter.htm" .

Incluir el código HTML del filtro 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="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>
Inténtalo tú mismo "