أحدث البرامج التعليمية وتطوير الشبكة
 

AppML قوائم


في هذا الفصل، وسوف نقوم بإدراج سجلات من قاعدة البيانات.


الأمثلة على هذه الصفحة استخدام قاعدة بيانات 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>&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>

حفظ 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>
انها محاولة لنفسك »