AppML ro‘yxatlari
Ushbu bobda ma’lumotlar bazasidagi yozuvlarni ro‘yxat ko‘rinishida chiqaramiz.
Ushbu sahifadagi misollarda mahalliy SQL ma’lumotlar bazasidan foydalaniladi.
Mahalliy SQL ma’lumotlar bazalari IE yoki Firefox’da ishlamaydi. Chrome yoki Safari’dan foydalaning.
Yangi model yarating
Oldingi bobda ma’lumotlar bazasini yaratish uchun modeldan foydalandingiz.
Endi filtrlash va saralash ta’riflarini o‘z ichiga olgan yangi model yarating:
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"}
]
}
Modeldan ilovangizda foydalaning:
Misol
<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>
O‘zingiz sinab ko‘ring »
HTML filtr shablonini yarating
Filtrlaringiz uchun HTML yarating:
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>
Filtr HTML’ini "inc_filter.htm" kabi mos nomli faylga saqlang.
Filtr HTML’ini prototipingizga appml-include-html yordamida qo‘shing:
Misol
<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>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!