JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>


<a href="http://www.ok-soft-gmbh.com/jqGrid/NonEditableCellsDynamic.htm" target="_blank">別人的jqgrid範例</a>


<table id="grid"></table>
<div id="gridpager"></div>

JavaScript

$("#list2").jqGrid({
/*   url: 'https://d19cf2bd.ngrok.io/erp/get/purth/20181121004',
  datatype: "json", */
  colNames: ['進貨單號', '進貨品號', '進貨品名', '進貨數量', '單位', '驗收數量', '驗收日期'],
  colModel: [{
      name: 'TH002',
      index: 'TH002',
      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);
		order_number=celValue.TH002
		part_number=celValue.TH004.substring(0, celValue.TH004.indexOf(' '));
		part_description=celValue.TH005
		order_mount=celValue.TH007
		console.log("a:"+order_number)
		console.log("b:"+part_number)
		console.log("c:"+part_description)
		console.log("d:"+order_mount)
  }

});

$("#list2").jqGrid('navGrid', '#pager2', {
  edit: true,
  add: true,
  del: true,
  search: true,
  view: true
});

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