Title1

Title2

Title3

prev5. 子母視窗
5-2 進貨單明細 - 商品子視窗(2)next
JQUERY

5-1 進貨單明細 - 商品子視窗

一、樣板表單

  1. 商品編號
    templates/ugm_stk_purchase.tpl 
    
                <!--商品編號-->
                <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>
    
            <!--第一行数据-->
            <tr id="newRow" class="newRow" data-sn="" data-prod="">

     

  2. 調用插件
    templates/ugm_stk_purchase.tpl 
    
      // 調整插件，商品子視窗
      $(".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
    流程 
    
  #----- 商品子視窗
  case "prodWin":
    echo prodWin($sn);
    exit;

    函數
     

    
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="
    <!DOCTYPE html>
    <html lang='zh-Hant-TW'>
      <head>
        <!-- Required meta tags -->
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>

        <!-- Bootstrap CSS -->
        <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' integrity='sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm' crossorigin='anonymous'>

        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <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 
    
    //用廠商流水號，取得廠商資料
    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
    流程
     

    
  case "getAjaxProd":
    echo getAjaxProd($sn);
    exit;

    函數
     

    
################################
# 用流水號取得廠商資料
#################################
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.  
prev5. 子母視窗
5-2 進貨單明細 - 商品子視窗(2)next

友善列印 & 下載 PDF 匯出 MarkDown 格式