<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><!-- Title here --></title>
<!--link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://paramquery.com/pro2/Content/js5.0.1/pqgrid.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<link href="https://paramquery.com/pro2/Content/css5.0.1/pqgrid.min.css" type="text/css" rel="stylesheet">
<link href="https://paramquery.com/pro2/Content/css5.0.1/pqgrid.ui.min.css" type="text/css" rel="stylesheet">
<link href="https://paramquery.com/pro2/Content/css5.0.0/themes/bootstrap/pqgrid.css" type="text/css" rel="stylesheet">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="grid_group" style="margin:auto;"></div>
</body>
</html>
$(function () {
//columns in data array : Sr No, Company Name, Revenues(domestic), Revenues(export), expenditure
var data = [[1, 'Exxon Mobil', 'Ex', 339938.0, 36130.0, 23333.0],
[2, 'Wal-Mart Stores', 'WS', 315654.0, 11231.0, 24342.0],
[3, 'Royal Dutch Shell', 'RDS', 306731.0, 25311.0, 56231.2],
[4, 'BP', 'B', 267600.0, 22341.0, 71923.4],
[5, 'General Motors', 'GM', 192604.0, -10567.0, 52934.0],
[6, 'Chevron', 'C', 189481.0, 14099.0, 12023.5],
[7, 'DaimlerChrysler', 'DC', 186106.3, 3536.3, 42734.0],
[8, 'Toyota Motor', 'TM', 185805.0, 12119.6, 57023.4],
[9, 'Ford Motor', 'FM', 177210.0, 2024.0, 22896.0],
[10, 'ConocoPhillips', 'CP', 166683.0, 13529.0, 72456.0],
[11, 'General Electric', 'GE', 157153.0, 16353.0, 16912.5],
[12, 'Total', 'T', '152360.7', 15250.0, 74236.5],
[13, 'ING Group', 'IG', 138235.3, 8958.9, 52012.9],
[14, 'Citigroup', 'CG', 131045.0, 24589.0, 90342.0],
[15, 'AXA', 'A', 129839.2, 5186.5, 13043.8],
[16, 'Allianz', 'AZ', 121406.0, 5442.4, 19529.5],
[17, 'Volkswagen', 'VW', 118376.6, 1391.7, 84472.7],
[18, 'Fortis', 'F', 112351.4, 4896.3, 83473.0],
[19, 'Crédit Agricole', 'CA', 110764.6, 7434.3, 14567.4],
[20, 'American Intl. Group', 'AIG', 108905.0, 10477.0, 10533.0]];
data.forEach(function(rdata){
//fill rest of the columns with random data.
for (var i = 8; i <= 16; i++) {
rdata[i] = (Math.random()*1000).toFixed(2);
}
})
var obj = {
height: 430,
hwrap: false,
title: "Grid with header grouping",
freezeCols: 1,
resizable: true,
create: function (evt, ui) {
var opts = [];
this.getColModel().forEach(function(column){
if (column.hidden !== true) {
opts.push(column.dataIndx);
}
})
//initialize the selected options in toolbar select list.
$(".columnSelector").val(opts);
//convert it into pqSelect.
$(".columnSelector").pqSelect({
checkbox: true,
multiplePlaceholder: 'Select visible columns',
maxDisplay: 100,
width: 'auto'
});
},
formulas: [
[6, function (rd) {
return rd[3] + rd[4];
}
],
[7, function (rd) {
return rd[6] - rd[5];
}
]
],
columnTemplate: { width: 100, align: 'right' }
};
obj.colModel = [
{ title: "Some No", colModel: [] },
{ title: "Company", width: 140, align: "center", colModel: [{ title: "Company A" }, { title: "Company B"}] },
{ title: "Balance Sheet", align: "center", colModel: [
{ title: "Revenues", dataType: "float", align: "center", colModel: [
{
title: "Domestic",
dataIndx: 3,
format: '$##,###.00',
dataType: "float"
},
{
title: "Exports",
dataIndx: 4,
format: '$##,###.00',
dataType: "float"
},
{
title: "Total",
width: 120,
editable: false,
dataIndx: 6,
dataType: "float",
format: '$##,###.00'
}
]},
{
title: "Expenditure",
dataType: "float",
format: '$##,###.00',
dataIndx: 5
},
{
title: "Profits = Total - Expenditure",
width: 140,
dataType: "float",
editable: false,
dataIndx: 7,
format: '$##,###.00'
}
]},
{ title: "Rank", align: 'center', colModel: [
{ title: "Rank1" },
{ title: "Rank2", colModel: [
{ title: "Rank21" },
{ title: "Rank 22", colModel: [
{ title: "Rank 221" },
{ title: "Rank 222", colModel: [
{ title: "Rank 2221" },
{ title: "Rank 2222" },
{ title: "Rank 2223" }
]}
]}
]},
{ title: "Rank 3" }
]},
{
title: "Column", colModel: [{ title: "Column1" }, { title: "Column2"}]
}
];
obj.dataModel = { data: data };
var $grid = $("#grid_group").pqGrid(obj);
});
/* Put your css in here */
.pq-grid-col>.pq-td-div{
position: absolute;
left:4px;
/*bottom:4px;*/
bottom:calc(50% - 9px);
width:calc(100% - 8px);
}