育將電腦工作室 - 線上書籍

JQUERY
======

一、樣板表單

1. 商品編號  
   templates/ugm\_stk\_purchase.tpl ```
  <pre class="brush:as3;">
  
                  
                  <div class='form-group'>
                    <div class="input-group">
                      <input type="text" class="prod form-control" id="prod_1" name='prod[]' value="" readonly>
                      <div class="input-group-prepend">
                        <div class="input-group-text">
                          <a href="javascript:void(0)" class="prodWin" >
                            ...
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
  ```
  
   ```
  <pre class="brush:as3;">
  
              
              <tr id="newRow" class="newRow" data-sn="" data-prod="">
  ```
2. 調用插件  
   templates/ugm\_stk\_purchase.tpl ```
  <pre class="brush:as3;">
  
        // 調整插件，商品子視窗
        $(".prodWin").click(function(){
          var vTr = $(this).parents("tr:first");//得到父tr对象;
          var sn = vTr.attr("data-prod");//取得商品流水號
          var id = vTr.attr("id");//取得id
          childWin('purchase.php?op=prodWin&sn='+sn+'&id='+id,300,300);
        });
  ```
3. purchase.php  
   流程 ```
  <pre class="brush:as3;">
  
    #----- 商品子視窗
    case "prodWin":
      echo prodWin($sn);
      exit;
  ```
  
  函數
  
   ```
  <pre class="brush:as3;">
  
  function prodWin($sn=""){
    global $xoopsDB;
    #---- 過濾資料 --------------------------
    $myts = &MyTextSanitizer::getInstance();
    $id = system_CleanVars($_REQUEST, 'id', '', 'string');
  
    #外鍵  
    $sql = "select sn,title
            from " . $xoopsDB->prefix("ugm_stk_prod") . "
            where enable='1'
            order by sort desc"; //die($sql);
  
    $result = $xoopsDB->query($sql) or redirect_header($_SERVER['PHP_SELF'], 3, web_error($sql));
    $option = $selected = $defaultTitle = "";
    while ($row = $xoopsDB->fetchArray($result)) {
      //以下會產生這些變數： $sn , $ofsn , $title , $enable  ,$sort url target
      $row['sn'] = intval($row['sn']);
      $row['title'] = $myts->htmlSpecialChars($row['title']);//
  
      $selected = "";
      if ($row['sn'] == $sn) {
        $selected = " selected";
      }
      $option .= "<option value='{$row['sn']}'{$selected}>{$row['title']} ({$row['sn']})</option>";
    }
  
  
    $main="
      
      <html lang='zh-Hant-TW'>
        <head>
          
          <meta charset='utf-8'>
          <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
  
          
          <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' integrity='sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm' crossorigin='anonymous'>
  
          
          <script src='https://code.jquery.com/jquery-3.3.1.min.js' integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous'></script>
          <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' integrity='sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q' crossorigin='anonymous'></script>
          <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl' crossorigin='anonymous'></script>
          <script>
            function senddata()
            {
              var prod = document.getElementById('prod');
              var sn = prod.value;
              var id = '{$id}';
              //var old_sn = {$sn};
  
              window.opener.getAjaxProd(sn,id);//run 母視窗的方法
              // if(window.opener.document && sn != old_sn){
              // }
              window.close();//結束子視窗
            }
          </script>
  
          <title>商品資料</title>
        </head>
        <body>
          <div class='container'>
            <select name='prod' id='prod' class='form-control' size='5'>
              $option
            </select>
            <input type='button' value='送出' onClick='senddata()' />
          </div>
        </body>
      </html>
    ";
    return $main;
  }
  ```
4. 母視窗的方法  
   templates/ugm\_stk\_purchase.tpl ```
  <pre class="brush:as3;">
  
      //用廠商流水號，取得廠商資料
      function getAjaxProd(sn,id)
      {
        $.ajax({
          type: 'GET',
          url: '<{xoAppUrl}>modules/ugm_stk/purchase.php?op=getAjaxProd&id=' + id + '&sn=' + sn,
          dataType: 'json',
          success: function(data) {
            var target = $('#'+data.id);
            target.find('.prod').val(data.sn);//商品編號
            target.find('.prod_title').html(data.title);//商品名稱
            target.find('.price').val(data.price);//商品進價
            target.find('.amount').focus();//聚焦數量
          },
          error: function(jqXHR) {
            alert('發生錯誤:(templates/ugm_stk_purchase.tpl/getAjaxProd) ' + jqXHR.status);
          }
        })
      }
  ```
  
  purchase.php  
   流程
  
   ```
  <pre class="brush:as3;">
  
    case "getAjaxProd":
      echo getAjaxProd($sn);
      exit;
  ```
  
  函數
  
   ```
  <pre class="brush:as3;">
  
  ################################
  # 用流水號取得廠商資料
  #################################
  function getAjaxProd($sn){
    global $xoopsDB;
    #---- 過濾資料 --------------------------
    $myts = &MyTextSanitizer::getInstance();
    $id = system_CleanVars($_REQUEST, 'id', '', 'string');
    #外鍵  
    $sql = "select a.*
            from " . $xoopsDB->prefix("ugm_stk_prod") . " as a 
            where a.sn='$sn'"; //die($sql);
    $result = $xoopsDB->query($sql) or redirect_header($_SERVER['PHP_SELF'], 3, web_error($sql));
    $row = $xoopsDB->fetchArray($result);
  
    $rows['sn'] = intval($row['sn']);//商品流水號
    $rows['title'] = $myts->htmlSpecialChars($row['title']);//商品名稱
    $rows['price'] = intval($row['price']);//名稱
    $rows['id'] = $id ;
    return json_encode($rows, JSON_UNESCAPED_UNICODE) ;
  }
  ```
5. 
 
</body></html>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown