The PivotGrid allows you to quickly do a lot of reporting & analysis from a table of data.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pivot Grid - jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Pivot Grid</h2>
<p>The PivotGrid allows you to quickly do a lot of reporting & analysis from a table of data.</p>
<div style="margin-bottom:10px">
<a href="javascript:void(0)" class="easyui-menubutton" style="width:70px;height:78px;" data-options="size:'large',iconCls:'icon-load',iconAlign:'top',plain:false,menu:'#mm'">Load</a>
<a href="javascript:void(0)" class="easyui-linkbutton" style="width:70px;height:78px;" data-options="size:'large',iconCls:'icon-layout',iconAlign:'top',plain:false" onclick="javascript:$('#pg').pivotgrid('layout')">Layout</a>
</div>
<div id="mm" style="display:none">
<div onclick="load1()">Load Data1</div>
<div onclick="load2()">Load Data2</div>
</div>
<table id="pg" style="width:700px;height:300px"></table>
<style type="text/css">
.icon-load{
background:url('/tutorial/app/pivotgrid/load.png') no-repeat center center;
}
.icon-layout{
background:url('/tutorial/app/pivotgrid/layout.png') no-repeat center center;
}
.demo-rtl a.pivotgrid-item{
text-align: right;
}
</style>
<script type="text/javascript" src="/easyui/jquery.pivotgrid.js"></script>
<script type="text/javascript">
$(function(){
load1();
});
function load1(){
$('#pg').pivotgrid({
url:'pivotgrid_data1.json',
method:'get',
pivot:{
rows:['Country','Category'],
columns:['Color'],
values:[
{field:'Price',op:'sum'},
{field:'Discount',op:'sum'}
]
},
forzenColumnTitle:'<span style="font-weight:bold">Pivot Grid</span>',
valuePrecision:0,
valueStyler:function(value,row,index){
if (/Discount$/.test(this.field) && value>100 && value<500){
return 'background:#D8FFD8'
}
}
})
}
function load2(){
$('#pg').pivotgrid({
url:'pivotgrid_data2.json',
method:'get',
pivot:{
rows:['form','name'],
columns:['year'],
values:[
{field:'gdp'},
{field:'oil'},
{field:'balance'}
]
},
valuePrecision:3,
valueStyler:function(value,row,index){
if (/balance$/.test(this.field) && value<0){
return 'background:pink'
}
}
})
}
</script>
</body>
</html>