AppML 목록
이 장에서는 데이터베이스의 레코드를 나열합니다.
이 페이지의 예에서는 로컬 SQL 데이터베이스를 사용합니다.
로컬 SQL 데이터베이스는 IE 또는 Firefox에서 작동하지 않습니다. 크롬이나 사파리를 이용하세요.
새 모델 만들기
이전 장에서는 모델을 사용하여 데이터베이스를 생성했습니다.
이제 필터 및 정렬 정의를 포함하여 새 모델을 만듭니다.
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="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>
HTML 필터 템플릿 만들기
필터용 HTML을 만듭니다.
inc_filter.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>
필터 HTML을 "inc_filter.htm"과 같은 적절한 이름으로 파일에 저장합니다.
appml-include-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="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>