この章では、データベースからレコードを一覧表示されます。
このページの例では、ローカルSQLデータベースを使用します。
ローカルSQLデータベースは、IEやFirefoxで動作しません。 クロムやSafariを使用してください。
新しいモデルを作成します。
前の章では、データベースを作成するためにモデルを使用しました。
今フィルタおよびソート定義を含めた新しいモデルを作成します：
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"}
]
}あなたのアプリケーションでモデルを使用します。
例
<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> »それを自分で試してみてください HTMLフィルタテンプレートを作成します。
あなたのフィルタのためのHTMLを作成します。
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>などの適切な名前のファイルにフィルタHTMLを保存"inc_filter.htm" 。
appml-含ま-HTMLを使用して、プロトタイプのフィルタHTMLを含めます：
例
<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> »それを自分で試してみてください