Please refer below code.
Download required plugin from below link
JqGrid
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body
{
padding-top: 30px;
padding-bottom: 40px;
}
#content
{
width: 100%;
height: 100%;
}
.navbar
{
margin-bottom: 30px;
}
.jumbotron
{
font-size: inheret;
font-weight: 200;
line-height: 1;
color: inherit;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="jqGrid/js/i18n/grid.locale-en.js"></script>
<script src="jqGrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link href="jqGrid/css/ui.jqgrid.css" rel="stylesheet" />
<link href="jqGrid.bootstrap.css" rel="stylesheet" />
<script>
$(document).ready(function () {
var mydata = [
{ id: "1", name: "Cash", num: "100", debit: "400.00", credit: "250.00", balance: "150.00", enbl: "1", level: "0", parent: "null", isLeaf: false, expanded: false, loaded: true },
{ id: "2", name: "Cash 1", num: "1", debit: "300.00", credit: "200.00", balance: "100.00", enbl: "0", level: "1", parent: "1", isLeaf: false, expanded: false, loaded: true },
{ id: "3", name: "Sub Cash 1", num: "1", debit: "300.00", credit: "200.00", balance: "100.00", enbl: "1", level: "2", parent: "2", isLeaf: true, expanded: false, loaded: true },
{ id: "4", name: "Cash 2", num: "2", debit: "100.00", credit: "50.00", balance: "50.00", enbl: "0", level: "1", parent: "1", isLeaf: true, expanded: false, loaded: true },
{ id: "5", name: "Bank\'s", num: "200", debit: "1500.00", credit: "1000.00", balance: "500.00", enbl: "1", level: "0", parent: "null", isLeaf: false, expanded: true, loaded: true },
{ id: "6", name: "Bank 1", num: "1", debit: "500.00", credit: "0.00", balance: "500.00", enbl: "0", level: "1", parent: "5", isLeaf: true, expanded: false, loaded: true },
{ id: "7", name: "Bank 2", num: "2", debit: "1000.00", credit: "1000.00", balance: "0.00", enbl: "1", level: "1", parent: "5", isLeaf: true, expanded: false, loaded: true },
{ id: "8", name: "Fixed asset", num: "300", debit: "0.00", credit: "1000.00", balance: "-1000.00", enbl: "0", level: "0", parent: "null", isLeaf: true, expanded: false, loaded: true }
];
$("#jqGrid01").jqGrid({
datatype: "jsonstring",
datastr: mydata,
colNames: ["Id", "Account", "Acc Num", "Debit", "Credit", "Balance", "Enabled"],
colModel: [
{ name: 'id', index: 'id', width: 1, hidden: true, key: true },
{ name: 'name', index: 'name', width: 180 },
{ name: 'num', index: 'acc_num', width: 80, formatter: 'integer', sorttype: 'int', align: 'center', editable: true },
{ name: 'debit', index: 'debit', width: 80, formatter: 'number', sorttype: 'number', align: 'right', editable: true },
{ name: 'credit', index: 'credit', width: 80, formatter: 'number', sorttype: 'number', align: 'right', editable: true },
{ name: 'balance', index: 'balance', width: 80, formatter: 'number', sorttype: 'number', align: 'right', editable: true },
{ name: 'enbl', index: 'enbl', width: 60, align: 'center',
formatter: 'checkbox', editoptions: { value: '1:0' },
formatoptions: { disabled: false }
}
],
height: 'auto',
gridview: true,
pager: "#jqGridPager01",
rowNum: 1000,
sortname: 'id',
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "local",
ExpandColumn: 'name',
add: true,
edit: true,
addtext: 'Add',
edittext: 'Edit',
caption: "Tree Grid"
});
jQuery("#jqGrid01").jqGrid('navGrid', '#jqGridPager01',
{ edit: true, add: true, del: true, search: true },
{ height: 200, reloadAfterSubmit: true }
);
$("#jqGrid01").jqGrid('setGridWidth', $(".content").width(), true);
});
</script>
</head>
<body>
<div class="container">
<div id="content">
<table id="jqGrid01">
</table>
<div id="jqGridPager01">
</div>
</div>
</div>
</body>
</html>
Screenshot
