JSFiddle - React, Tailwind, and code Playground

by ritesh26

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.0/css/ui.jqgrid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css">
<div style="width:800px;">
  <table id="grid"></table>
</div>

<div>
  <input type="button" value="Get Selected Rows" onclick="getSelectedRows()" />
</div>

<script type="text/javascript">
  function getSelectedRows() {
    var grid = $("#grid");
    var rowKey = grid.getGridParam("selrow");

    if (!rowKey)
      alert("No rows are selected");
    else {
      var selectedIDs = grid.getGridParam("selarrrow");
      var result = "";
      for (var i = 0; i < selectedIDs.length; i++) {
        result += selectedIDs[i] + ",";
      }

     alert(result);
    }
    var checkedIds = [];
    $('form:input[type="checkbox"][checked]').each(function(i, v) {
      checkedIds.push($(v).attr('id'));
    });
    alert(checkedIds);
    console.log(checkedIds)
  }

</script>

JavaScript

var myData = [{
      "ProductID": "1010",
      "CategoryName": "Beverages",
      "ProductName": "Steeleye Stout",
      "Country": "UK",
      "Price": "1008.0000",
      "Quantity": "65"
    },
    {
      "ProductID": "1012",
      "CategoryName": "Beverages",
      "ProductName": "Laughing Lumberjack Lager",
      "Country": "USA",
      "Price": "140.0000",
      "Quantity": "10"
    },
    {
      "ProductID": "1013",
      "CategoryName": "Beverages",
      "ProductName": "Lakkalik\u00f6\u00f6ri",
      "Country": "USA",
      "Price": "2160.0000",
      "Quantity": "120"
    },
    {
      "ProductID": "1014",
      "CategoryName": "Beverages",
      "ProductName": "Guaran\u00e1 Fant\u00e1stica",
      "Country": "USA",
      "Price": "436.5000",
      "Quantity": "97"
    },
    {
      "ProductID": "1015",
      "CategoryName": "Beverages",
      "ProductName": "Ipoh Coffee",
      "Country": "UK",
      "Price": "1656.0000",
      "Quantity": "36"
    },
    {
      "ProductID": "1016",
      "CategoryName": "Beverages",
      "ProductName": "Chang",
      "Country": "UK",
      "Price": "342.0000",
      "Quantity": "20"
    },
    {
      "ProductID": "1017",
      "CategoryName": "Beverages",
      "ProductName": "Chartreuse verte",
      "Country": "USA",
      "Price": "648.0000",
      "Quantity": "42"
    },
    {
      "ProductID": "1018",
      "CategoryName": "Beverages",
      "ProductName": "Ipoh Coffee",
      "Country": "USA",
      "Price": "1656.0000",
      "Quantity": "39"
    },
    {
      "ProductID": "1019",
      "CategoryName": "Beverages",
      "ProductName": "Chai",
      "Country": "UK",
      "Price": "1314.0000",
      "Quantity": "73"
    },
    {
      "ProductID": "1021",
      "CategoryName": "Beverages",
      "ProductName": "Chang",
      "Country": "USA",
      "Price": "5168.0000",
      "Quantity": "294"
    },
    {
      "ProductID": "1022",
      "CategoryName": "Beverages",
      "ProductName": "Steeleye...