jqGrid Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<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="grid"></table>

JavaScript

var mydata = [
    {id: "1", emp:"Michelle", product:"A A", sold:"8", sold2:"8", sold3:"8" },
    {id: "2", emp:"Tania", product:"A A", sold:"3", sold2:"8", sold3:"8" },
    {id: "6", emp:"Mark", product:"A B", sold:"1", sold2:"8", sold3:"8" },
    {id: "3", emp:"Tommy", product:"A B", sold:"5", sold2:"8", sold3:"8" },
    {id: "4", emp:"Dave", product:"B B", sold:"2", sold2:"8", sold3:"8" },
    {id: "5", emp:"Carol", product:"B B", sold:"5", sold2:"8", sold3:"8" },
];


var grid = $("#grid");

grid.jqGrid('jqPivot',
    mydata, {
        xDimension: [{
            dataName: 'id',
            label: 'ID',
            width: 90
        }, {
            dataName: 'emp',
            label: 'Employee',
            width: 90
        }, ],
        yDimension: [{
            dataName: 'product',
            converter: function (val) {return val.replace(/\s/g, '&nbsp;');}
        }],
        aggregates: [{
            member: 'sold',
            aggregator: 'sum',
            width: 50,
            label: 'Sold'
        }, 
        {
            member: 'sold2',
            aggregator: 'sum',
            width: 50,
            label: 'Sold 2'
        },
        {
            member: 'sold3',
            aggregator: 'sum',
            width: 50,
            label: 'Sold 3'
        },],
        colTotals: true

    }, {
        width: "100%",
        height: "100%",
        pager: "#pager",
        caption: "Daily Sales"
    });