JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/js/jquery.jqGrid.src.js"></script>
<table id="myOID"></div>
CSS
html, body {
font-size: 75%;
}
.ui-jqgrid .ui-pg-table .ui-pg-input, .ui-jqgrid .ui-pg-table .ui-pg-selbox {
height: auto;
width: auto;
line-height: inherit;
}
.ui-jqgrid .ui-pg-table .ui-pg-selbox {
padding: 1px;
}
.ui-jqgrid { line-height: normal; }
div.ui-jqgrid-view table.ui-jqgrid-btable {
border-style:none;
border-top-style:none;
border-collapse:separate;
}
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title { border-collapse:separate; margin-top: 0; top: 0; margin-right: 2px; height: 22px; width: 20px; padding: 2px; }
.ui-jqgrid .ui-jqgrid-titlebar-close.fa-title.ui-state-hover span { margin-top: -1px; margin-left: -1px;}
.ui-paging-info { display: inline; }
.ui-jqgrid .ui-pg-table {border-collapse:separate;}
div.ui-jqgrid-view table.ui-jqgrid-btable td {
border-left-style:none
}
div.ui-jqgrid-view table.ui-jqgrid-htable {
border-style:none;
border-top-style:none;
border-collapse:separate;
}
div.ui-jqgrid-view table.ui-jqgrid-btable th {
border-left-style:none
}
.ui-jqgrid .ui-jqgrid-htable th div {
height: 14px;
}
.ui-jqgrid .ui-jqgrid-resize {
height: 18px !important;
}
.ui-jqgrid .ui-pg-table {
padding-bottom: 0;
}
JavaScript
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
//<![CDATA[
/*global $ */
/*jslint plusplus: true */
// ***************************************************************************
// this is used by the onSelectRow function in jqGrid - see code further down
function showPopup(id){
switch(id){
case 1:
Showpop1();
break;
case 2:
Showpop2();
break;
case 3:
Showpop3();
break;
case 4:
Showpop4();
break;
case 5:
Showpop5();
break;
// case etc...
default:
break;
}
}
// individual popup functions - you mentioned you have 15 of these?
function Showpop1(){
alert('row 1 clicked');
}
function Showpop2(){
alert('row 2 clicked');
}
function Showpop3(){
alert('row 3 clicked');
}
// ***************************************************************************
$(function () {
"use strict";
var mydata = [
{cusip: "1234567890123", oid_type: "F", oid_type_desc: "TIPS"},
{cusip: "1234567890", oid_type: "S", oid_type_desc: "NQSI"},
{cusip: "1234567", oid_type: "C", oid_type_desc: "CPDI"}
],
$grid = $("#myOID"),
viewParam = {
//bClose: "Close",
recreateForm: true,
labelswidth: "50%",
beforeShowForm: function ($form){
$form.find("td.DataTD").each(function () {
var html = $(this).html(); // <span> </span>
if (html.substr(0, 6) === " ") {
$(this).html(html.substr(6));
}
});
}
};
$grid.jqGrid({
datatype: "local",
data: mydata,
...