في هذا الفصل، وسوف نقوم بإدراج سجلات من قاعدة البيانات.
الأمثلة على هذه الصفحة استخدام قاعدة بيانات SQL المحلية.
قواعد البيانات SQL المحلية لا يعمل في IE أو فايرفوكس. استخدام Chrome أو 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" .
تشمل HTML التصفية في النموذج الخاص بك مع appml-تشمل-أتش تي أم أل:
مثال
<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>
انها محاولة لنفسك »