working jqGrid Example
HTML
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="tableToLoad"></table>
CSS
.ui-jqgrid tr.jqgrow td {
font-weight: normal;
overflow: hidden;
white-space: pre;
height: 22px;
padding: 0 2px 0 2px;
border-bottom-width: 1px;
border-bottom-color: inherit;
border-bottom-style: solid;
/* background-color:#D3D3D3; */
}
.ui-jqgrid tr.jqgfirstrow td {
padding: 0 2px 0 2px;
border-right-width: 1px;
border-right-style: solid;
}
.ui-jqgrid .ui-jqgrid-sortable {
cursor:pointer;
background-color:#b0c4de;
}
JavaScript
/* Split Hierarchically on Unit */
var x = {
"d":
{
"dataReturned": [{
"unit_subject":
"Language Arts",
"unit_name": "Spelling",
"sname": "Dennis Miller",
"ts_st_id": 184321,
"st_grade": 5,
"TestSessions": 1
},
{
"unit_subject": "Mathematics",
"unit_name": "Algebra, Patterns, and Relationships",
"sname": "Bobby Celloo",
"ts_st_id": 184319,
"st_grade": 6,
"TestSessions": 7
},
{
"unit_subject": "Mathematics",
"unit_name": "Algebra, Patterns, and Relationships",
"sname": "Carmen Miranda",
"ts_st_id": 184320,
"st_grade": 6,
"TestSessions": 7
},
{
"unit_subject": "Mathematics",
"unit_name": "Algebra, Patterns, and Relationships",
"sname": "Dennis Miller",
"ts_st_id": 184321,
"st_grade": 5,
"TestSessions": 7
},
{
"unit_subject": "Mathematics",
"unit_name": "Algebra, Patterns, and Relationships",
"sname": "Frog Man",
"ts_st_id": 184318,
"st_grade": 5,
"TestSessions": 7
},
{
"unit_subject": "Mathematics",
"unit_name": "Algebra, Patterns, and Relationships",
"sname": "Sandra Dee",
"ts_st_id": 184330,
"st_grade": 3,
"TestSessions": 7
...