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

JQUERY
======

1. 按鈕  
   templates/ugm\_stk\_purchase.tpl ```
  <pre class="brush:as3;">
  
              
              <tr id="newRow" class="newRow" data-sn="" data-prod="">
                <td >
                  
                  <div class='form-group'>
                    <div class="input-group">
                      <input type="text" class="prod form-control" name='prod[]' value="" readonly>
                      <div class="input-group-prepend">
                        <a href="javascript:void(0)" class="prodWin" >
                        <div class="input-group-text">...</div>
                        </a>
                      </div>
                    </div>
                  </div>
                </td>
  ```
2. 調用插件 ```
  <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
          var url = 'purchase.php?op=prodWin&sn='+sn+'&id='+id;
          var wH = 350;
          var wW = 600;
          var wL = 0;
          var wT = 0;
          childWin(url,wH,wW,wL,wT);
        });
  ```
3. 子視窗函數 ```
  <pre class="brush:as3;">
   
        //子視窗函數
        function childWin(url,wH,wW,wL,wT)
        {
          mywin=window.open("","","height=" + wH + ",width=" + wW + ",left="+ wL + ",top=" + wT );
          mywin.location.href = url ;
        }
  ```
4. 程式流程  
   purchase.php ```
  <pre class="brush:as3;">
  
    #----- 商品子視窗
    case "prodWin":
      echo prodWin($sn);
      exit;
  ```
5. 程式函數 ```
  <pre class="brush:as3;">
  
  function prodWin($sn=""){
    global $xoopsDB;
    #---- 過濾資料 --------------------------
    $myts = &MyTextSanitizer::getInstance();
    $id = system_CleanVars($_REQUEST, 'id', '', 'string');
    
    $sql = "select a.sn,a.title,b.title as kind_title
            from " . $xoopsDB->prefix("ugm_stk_prod") . " as a 
            left join ". $xoopsDB->prefix("ugm_stk_kind") ." as b on a.kind = b.sn
            where a.enable='1'
            order by a.sort desc"; //die($sql);
  
    $result = $xoopsDB->query($sql) or redirect_header($_SERVER['PHP_SELF'], 3, web_error($sql));
    $rows = "";
    
    while ($row = $xoopsDB->fetchArray($result)) {
      $row['sn'] = intval($row['sn']);
      $row['title'] = $myts->htmlSpecialChars($row['title']);//
      $row['kind_title'] = $myts->htmlSpecialChars($row['kind_title']);//
      $checked = ($row['sn'] == $sn) ? "<input type='radio' checked >":"";
      $rows .= "<tr><td>{$checked}</td><td>{$row['sn']}</td><td>{$row['title']}</td><td>{$row['kind_title']}</td></tr>";
    }
    $title = "商品資料";
    $content = "    
      <link rel='stylesheet' href='".XOOPS_URL."/modules/ugm_tools2/class/bootstrap-table/bootstrap-table.css'>
      <script src='".XOOPS_URL."/modules/ugm_tools2/class/bootstrap-table/bootstrap-table.js'></script>
  
      <script>
          function senddata()
          {
            var sn = $(\"[name='btSelectItem']:checked\").val();
            var id = '{$id}';
            window.opener.getAjaxProd(sn,id);//run 母視窗的方法
            window.close();//結束子視窗
            //console.log(x);
          }
      </script>
  
      <div class='container-fluid'>
        
        <table id='table'
               data-toolbar='#toolbar'
               data-search='true'
               data-toggle='table'
               data-height='300'
               data-sort-name='name'
               data-sort-order='desc'
               data-pagination='true'
               data-id-field='sn'
               data-page-list='[10, 25, 50, 100, ALL]'
               data-show-footer='false'
               data-click-to-select='true'>
  
            <thead>
            <tr>
                <th data-field='state' data-radio='true'></th>
                <th data-field='sn' data-sortable='true'>商品編號</th>
                <th data-field='title' data-sortable='true'>商品名稱</th>
                <th data-field='kind_title' data-sortable='true'>商品類別</th>
            </tr>
            </thead>
            <tbody>
              {$rows}
            </tbody>
        </table>
        <input type='button' value='送出' onClick='senddata()' />
      </div>
  
    ";
    $main = show_lytebox_html_b4($content,$title);
  
    return $main;
  }
  ```
6. 傳回商品sn，由母視窗AJAX  
   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);
          }
        })
      }
  ```
7. 程式  
   流程 ```
  <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) ;
  }
  ```
8. 
9.

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown