JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>

<table id="list2"></table>
<div id="pager2"></div>

JavaScript

$("#list2").jqGrid({
url: 'https://0321273d.ap.ngrok.io/erp/get/purth/343/20160603009',
  datatype: "json",
  /* datatype: "local", */
  colNames: ['採購單號', '進貨品號', '進貨品名', '進貨數量', '單位', '驗收數量', '驗收日期'],
  colModel: [{
      name: 'TH012',
      index: 'TH012',
      width: 100,
      align: "center"
    },
    {
      name: 'TH004',
      index: 'TH004',
      width: 120,
      align: "left",
      formatter: getLink
    },

    {
      name: 'TH005',
      index: 'TH005',
      width: 200,
      align: "left"
    },
    {
      name: 'TH007',
      index: 'TH007',
      width: 70,
      align: "right"
    },
    {
      name: 'TH008',
      index: 'TH008',
      width: 70,
      align: "center"
    },
    {
      name: 'TH015',
      index: 'TH015',
      width: 70,
      align: "right"
    },
    {
      name: 'TH014',
      index: 'TH014',
      width: 100,
      align: "center",
      formatter: fixDate
    }

  ],
  /* height: "auto",  // Grid高度
  autowidth: true, // 自動欄寬	 */
width: 800,
  height: $(window).height() - 200,
  rowNum: 100,
  pager: '#pager2',
  sortname: 'TH007',
  viewrecords: true,
  sortorder: "desc",
  caption: "JSON Example",
  onSelectRow:function(rowid, status){
      var myGrid = $('#list2'),
    selRowId = myGrid.jqGrid ('getGridParam', 'selrow'),
    celValue = myGrid.jqGrid ('getRowData', selRowId);
      purchase_number=celValue.TH012
      part_number=celValue.TH004.substring(0, celValue.TH004.indexOf(' '));
      part_description=celValue.TH005
      order_mount=celValue.TH007
      console.log("a:"+purchase_number)
      console.log("b:"+part_number)
      console.log("c:"+part_description)
      console.log("d:"+order_mount)
  }

});

/* var mydata = [ { "TH002": "20181109015", "TH004": "3PP00000000011", "TH005": "TRIGGER 固定座", "TH007": "5800.000", "TH008": "PCS", "TH015": "5800.000", "TH014": "20181112" }, { "TH002": "20181109015", "TH004": "3PP00000000040", "TH005": "塑膠刮片", "TH007": "12000.000", "TH008": "PCS", "TH015":...