jTemplate Sample

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Sales</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery-jtemplates.js"></script>
  <link rel="stylesheet" href="style.css">

 <script type="text/javascript">
  <!--
    //global variables
    Items = null;
    Customers = null;
    Sales = null;
    
    //update selection of Customers and refresh entries
    function UpdateCustomer(elem, index) {
      Customers[index].selected = elem.checked;
      UpdatEntries();
    }
    
    //update selection of Items and refresh entries
    function UpdateItem(elem, index) {
      Items[index].selected = elem.checked;
      UpdatEntries();
    }
    
    //refresh entries
    function UpdatEntries() {
      //local key cache
      var CustCacheMap = {};
      var ItemCacheMap = {};
      
      //build key cache
      for(var i=0; i<Customers.length; ++i) {
        CustCacheMap[Customers[i].ID] = Customers[i];
      }
      for(var i=0; i<Items.length; ++i) {
        ItemCacheMap[Items[i].ID] = Items[i];
      }
      
      //create resultset from all Sales entries
      var entries = $.map(Sales, function(e) {
        //find customer and item
        var cust = CustCacheMap[e.CustomerID];
        var item = ItemCacheMap[e.ItemID];
        
        //if customer of item not found skip record
        if(cust == null || item == null) {
          return null;
        }
        
        //if both customer and item are selected then put record
        if(cust.selected && item.selected) {
          return [{
            "CustName": cust.FirstName + ' ' + cust.LastName,
            "ItemName": item.Name,
            "Price": e.SalesPrice,
            "Cost": e.UnitCost
          }];
        } else {
          return null;
        }
      });
      
      //process template
      $("#Entries").processTemplate(entries);
    }
    
    $(document).ready(function() {
      //load data
      $.getJSON('data.json', function(data) {
        Items = data.Items;
        Customers = data.Customers;
        Sales = data.SalesEntry;
        
        //setup templates
        $("#Customers").setTemplateElement("Template-ListCustomers").processTemplate(Customers);
        $("#Items").setTemplateElement("Template-ListItems").processTemplate(Items);
        
        $("#Entries").setTemplateElement("Template-Entries");
        $("#Entries").processTemplate(null); //process empty data to show header
      });
    });
  -->
  </script>

</head>

<body>

  <!-- Templates -->
  <p style="display:none"><textarea id="Template-ListCustomers" rows="0" cols="0"><!--
    <div class="title">Customers</div>
    <table>
      <tr>
        <td class="header">Choose</td>
        <td class="header">Name</td>
      </tr>
      {#foreach $T as Row}
        <tr class="{#cycle values=['bcEED','bcDEE']}">
          <td><input type="checkbox" value="{$T.Row.ID}" onclick="UpdateCustomer(this,{$T.Row$index})") /></td>
          <td>{$T.Row.FirstName} {$T.Row.LastName}</td>
        </tr>
      {#/for}
    </table>
  --></textarea></p>
    
  <p style="display:none"><textarea id="Template-ListItems" rows="0" cols="0"><!--
    <div class="title">Items</div>
    <table>
      <tr>
        <td class="header">Choose</td>
        <td class="header">Name</td>
      </tr>
      {#foreach $T as Row}
        <tr class="{#cycle values=['bcEED','bcDEE']}">
          <td><input type="checkbox" value="{$T.Row.ID}" onclick="UpdateItem(this,{$T.Row$index})") /></td>
          <td>{$T.Row.Name}</td>
        </tr>
      {#/for}
    </table>
  --></textarea></p>
  
  <p style="display:none"><textarea id="Template-Entries" rows="0" cols="0"><!--
    <div class="title">Entries</div>
    <table>
      <tr>
        <td class="header">Customer</td>
        <td class="header">Item</td>
        <td class="header">Price</td>
        <td class="header">Cost</td>
        <td class="header">Profit</td>
      </tr>
      {#param name=ProfitTotal value=0}
      {#foreach $T as Row}
        <tr class="{#cycle values=['bcEED','bcDEE']}">
          <td>{$T.Row.CustName}</td>
          <td>{$T.Row.ItemName}</td>
          <td>{$T.Row.Price}</td>
          <td>{$T.Row.Cost}</td>
          <td>{$T.Row.Price - $T.Row.Cost}</td>
        </tr>
      {#param name=ProfitTotal value=$P.ProfitTotal + ($T.Row.Price - $T.Row.Cost)}
      {#/for}
      <tr>
        <td class="header"></td>
        <td class="header"></td>
        <td class="header"></td>
        <td class="header">Total:</td>
        <td class="header">{$P.ProfitTotal}</td>
      </tr>
    </table>
  --></textarea></p>

  <!-- Output elements -->
  <div id="Customers" class="Content"></div>
  <div id="Items" class="Content"></div>
  <div id="Entries" class="Content"></div>
  
</body>
</html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Visual studio 2017에서 빨리 파이썬을 코딩

<<준비>> VS2017에서 Raspberry PI에 액세스할 수 있도록 한다. /etc/samba/smb.conf에 추가 /etc/samba/smb.conf samba 재부팅 새 프로젝트에서 템플릿 Bottle 웹...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

jTemplate Sample

좋은 웹페이지 즐겨찾기