ऐपएमएल ट्यूटोरियल

ऐपएमएल होम AppML कैसे करें ऐपएमएल डेटा ऐपएमएल में शामिल हैं ऐपएमएल नियंत्रक ऐपएमएल संदेश ऐपएमएल मॉडल ऐपएमएल एपीआई

ऐपएमएल मामले

केस परिचय केस टेक्स्ट फ़ाइल केस एक्सएमएल फाइल केस JSON फ़ाइल केस ग्राहक केस उत्पाद केस सप्लायर्स केस शिपर्स केस श्रेणियाँ केस कर्मचारी

ऐपएमएल क्लाइंट

ऐपएमएल क्लाइंट ऐपएमएल प्रोटोटाइप ऐपएमएल सूचियां ऐपएमएल फॉर्म ऐपएमएल वेबएसक्यूएल

ऐपएमएल सर्वर

ऐपएमएल पीएचपी एपीपीएमएल एएसपी

ऐपएमएल क्लाउड

गूगल क्लाउड एसक्यूएल अमेज़ॅन आरडीएस एसक्यूएल

ऐपएमएल संदर्भ

ऐपएमएल संदर्भ ऐपएमएल डेटाफाइल्स ऐपएमएल डेटाबेस ऐपएमएल एपीआई ऐपएमएल आर्किटेक्चर ऐपएमएल इतिहास

ऐपएमएल सूचियां


इस अध्याय में, हम डेटाबेस से रिकॉर्ड सूचीबद्ध करेंगे।


इस पृष्ठ के उदाहरण स्थानीय 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">&times;</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">&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="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" जैसे उचित नाम वाली फ़ाइल में सहेजें।

अपने प्रोटोटाइप में फ़िल्टर HTML को appml-include-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>