Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

140 lines (132 sloc) 10.424 kb
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Grid Demo</title>
<meta name="description" content="HTML-based table with fixed headers, fixed footers, fixed left columns, row selection, sorting and more. Open source.">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="src/Grid.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet" type="text/css">
<style>
HTML{margin:0px;padding:0px;min-height:100%;background-color:#5597cf;color:#eee;background-image:-webkit-linear-gradient(bottom, #80b4e1, #5597cf);background-image:-moz-linear-gradient(bottom, #80b4e1, #5597cf);background-image:-ms-linear-gradient(bottom, #80b4e1, #5597cf);background-image:-o-linear-gradient(bottom, #80b4e1, #5597cf);background-image:linear-gradient(bottom, #80b4e1, #5597cf);}
BODY{margin:0px;padding:0px;font-family:"Droid Sans",sans-serif;-webkit-font-smoothing:antialiased;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-thumb{border:1px solid #B8B8B8;-webkit-border-radius:0px;border-radius:0px;background:#ccc;}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:#eee;}
A{color:#eee;text-decoration:none;cursor:pointer;}
A:hover{text-decoration:underline;}
#hdr{display:block;margin:40px 0px 0px 80px;padding:0px;line-height:1.2em;font-size:28px;color:#fff;text-shadow:0px 1px 1px rgba(51, 51, 51, 0.1);}
#demoLinks{margin:0px 0px 0px 80px;line-height:1.5em;font-size:12px;}
#demoDiv{margin:20px 0px 40px 80px;padding:16px;border:1px solid #ccc;border-radius:16px;width:800px;height:360px;background-color:#eee;background-image:-webkit-linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0) 2%);background-image:-moz-linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0) 2%);background-image:-ms-linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0) 2%);background-image:-o-linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0) 2%);background-image:linear-gradient(top, #fff 0%, rgba(255, 255, 255, 0) 2%);box-shadow:1px 1px 1px rgba(51, 51, 51, 0.1);}
#demoGrid{width:100%;height:100%;background-color:#fff;color:#1a2731;}
</style>
</head>
<body>
<h1 id="hdr">Grid Demo</h1>
<div id="demoLinks">
<a href="http://www.matts411.com/post/grid/" title="Blog project page">Home</a>
&nbsp;-&nbsp;
<a href="http://github.com/mmurph211/Grid" title="GitHub">Github Project</a>
&nbsp;-&nbsp;
<a href="https://github.com/mmurph211/Grid/blob/master/src/Grid.js" title="View Script">Script Source</a>
&nbsp;-&nbsp;
<a href="https://github.com/mmurph211/Grid/blob/master/src/Grid.css" title="View CSS">CSS Source</a>
</div>
<div id="demoDiv"><div id="demoGrid"></div></div>
<script src="src/Grid.js"></script>
<script>
(function(window, document, undefined) {
"use strict";
var gridColSortTypes = ["string", "number", "number", "number", "number", "number", "number", "number", "number", "number", "number", "number", "number", "string", "string", "string"],
gridColAlign = [],
gridData = {
Head : [
["<span id='demoHdr0'>Team</span>",
"<span id='demoHdr1' title='Wins'>W</span>",
"<span id='demoHdr2' title='Losses'>L</span>",
"<span id='demoHdr3' title='Ties'>T</span>",
"<span id='demoHdr4' title='Win Percentage'>Pct</span>",
"<span id='demoHdr5' title='Points For'>PF</span>",
"<span id='demoHdr6' title='Points Against'>PA</span>",
"<span id='demoHdr7' title='Net Points'>Net Pts</span>",
"<span id='demoHdr8' title='Home Record'>Home</span>",
"<span id='demoHdr9' title='Road Record'>Road</span>",
"<span id='demoHdr10' title='Division Record'>Div</span>",
"<span id='demoHdr11' title='Conference Record'>Conf</span>",
"<span id='demoHdr12' title='Last 5 Games'>Last 5</span>",
"<span id='demoHdr13'>Streak</span>",
"<span id='demoHdr14'>Division</span>",
"<span id='demoHdr15'>Conference</span>"]
],
Body : [
["New England Patriots", "13", "3", "0", ".812", "513", "342", "+171", "7-1-0", "6-2-0", "5-1-0", "10-2-0", "5-0-0", "Won 8", "East", "AFC"],
["New York Jets", "8", "8", "0", ".500", "377", "363", "+14", "6-2-0", "2-6-0", "3-3-0", "6-6-0", "2-3-0", "Lost 3", "East", "AFC"],
["Miami Dolphins", "6", "10", "0", ".375", "329", "313", "+16", "4-4-0", "2-6-0", "3-3-0", "5-7-0", "3-2-0", "Won 1", "East", "AFC"],
["Buffalo Bills", "6", "10", "0", ".375", "372", "434", "-62", "5-3-0", "1-7-0", "1-5-0", "4-8-0", "1-4-0", "Lost 1", "East", "AFC"],
["Baltimore Ravens", "12", "4", "0", ".750", "378", "266", "+112", "8-0-0", "4-4-0", "6-0-0", "9-3-0", "4-1-0", "Won 2", "North", "AFC"],
["Pittsburgh Steelers", "12", "4", "0", ".750", "325", "227", "+98", "7-1-0", "5-3-0", "4-2-0", "9-3-0", "4-1-0", "Won 2", "North", "AFC"],
["Cincinnati Bengals", "9", "7", "0", ".562", "344", "323", "+21", "4-4-0", "5-3-0", "2-4-0", "6-6-0", "2-3-0", "Lost 1", "North", "AFC"],
["Cleveland Browns", "4", "12", "0", ".250", "218", "307", "-89", "3-5-0", "1-7-0", "0-6-0", "3-9-0", "0-5-0", "Lost 6", "North", "AFC"],
["Houston Texans", "10", "6", "0", ".625", "381", "278", "+103", "5-3-0", "5-3-0", "4-2-0", "8-4-0", "2-3-0", "Lost 3", "South", "AFC"],
["Tennessee Titans", "9", "7", "0", ".562", "325", "317", "+8", "5-3-0", "4-4-0", "3-3-0", "7-5-0", "3-2-0", "Won 2", "South", "AFC"],
["Jacksonville Jaguars", "5", "11", "0", ".312", "243", "329", "-86", "4-4-0", "1-7-0", "3-3-0", "4-8-0", "2-3-0", "Won 1", "South", "AFC"],
["Indianapolis Colts", "2", "14", "0", ".125", "243", "430", "-187", "2-6-0", "0-8-0", "2-4-0", "2-10-0", "2-3-0", "Lost 1", "South", "AFC"],
["Denver Broncos", "8", "8", "0", ".500", "309", "390", "-81", "3-5-0", "5-3-0", "3-3-0", "6-6-0", "2-3-0", "Lost 3", "West", "AFC"],
["San Diego Chargers", "8", "8", "0", ".500", "406", "377", "+29", "5-3-0", "3-5-0", "3-3-0", "7-5-0", "4-1-0", "Won 1", "West", "AFC"],
["Oakland Raiders", "8", "8", "0", ".500", "359", "433", "-74", "3-5-0", "5-3-0", "3-3-0", "6-6-0", "1-4-0", "Lost 1", "West", "AFC"],
["Kansas City Chiefs", "7", "9", "0", ".438", "212", "338", "-126", "3-5-0", "4-4-0", "3-3-0", "4-8-0", "3-2-0", "Won 1", "West", "AFC"],
["New York Giants", "9", "7", "0", ".562", "394", "400", "-6", "4-4-0", "5-3-0", "3-3-0", "5-7-0", "3-2-0", "Won 2", "East", "NFC"],
["Philadelphia Eagles", "8", "8", "0", ".500", "396", "328", "+68", "3-5-0", "5-3-0", "5-1-0", "6-6-0", "4-1-0", "Won 4", "East", "NFC"],
["Dallas Cowboys", "8", "8", "0", ".500", "369", "347", "+22", "5-3-0", "3-5-0", "2-4-0", "6-6-0", "1-4-0", "Lost 2", "East", "NFC"],
["Washington Redskins", "5", "11", "0", ".312", "288", "367", "-79", "2-6-0", "3-5-0", "2-4-0", "5-7-0", "1-4-0", "Lost 2", "East", "NFC"],
["Green Bay Packers", "15", "1", "0", ".938", "560", "359", "+201", "8-0-0", "7-1-0", "6-0-0", "12-0-0", "4-1-0", "Won 2", "North", "NFC"],
["Detroit Lions", "10", "6", "0", ".625", "474", "387", "+87", "5-3-0", "5-3-0", "3-3-0", "6-6-0", "3-2-0", "Lost 1", "North", "NFC"],
["Chicago Bears", "8", "8", "0", ".500", "353", "341", "+12", "5-3-0", "3-5-0", "3-3-0", "7-5-0", "1-4-0", "Won 1", "North", "NFC"],
["Minnesota Vikings", "3", "13", "0", ".188", "340", "449", "-109", "1-7-0", "2-6-0", "0-6-0", "3-9-0", "1-4-0", "Lost 1", "North", "NFC"],
["New Orleans Saints", "13", "3", "0", ".812", "547", "339", "+208", "8-0-0", "5-3-0", "5-1-0", "9-3-0", "5-0-0", "Won 8", "South", "NFC"],
["Atlanta Falcons", "10", "6", "0", ".625", "402", "350", "+52", "6-2-0", "4-4-0", "3-3-0", "7-5-0", "3-2-0", "Won 1", "South", "NFC"],
["Carolina Panthers", "6", "10", "0", ".375", "406", "429", "-23", "3-5-0", "3-5-0", "2-4-0", "3-9-0", "3-2-0", "Lost 1", "South", "NFC"],
["Tampa Bay Buccaneers", "4", "12", "0", ".250", "287", "494", "-207", "3-5-0", "1-7-0", "2-4-0", "3-9-0", "0-5-0", "Lost 10", "South", "NFC"],
["San Francisco 49ers", "13", "3", "0", ".812", "380", "229", "+151", "7-1-0", "6-2-0", "5-1-0", "10-2-0", "4-1-0", "Won 3", "West", "NFC"],
["Arizona Cardinals", "8", "8", "0", ".500", "312", "348", "-36", "6-2-0", "2-6-0", "4-2-0", "7-5-0", "4-1-0", "Won 1", "West", "NFC"],
["Seattle Seahawks", "7", "9", "0", ".438", "321", "315", "+6", "4-4-0", "3-5-0", "3-3-0", "6-6-0", "3-2-0", "Lost 2", "West", "NFC"],
["St. Louis Rams", "2", "14", "0", ".125", "193", "407", "-214", "1-7-0", "1-7-0", "0-6-0", "1-11-0", "0-5-0", "Lost 7", "West", "NFC"]
]
};
var onColumnSort = function(newIndexOrder, columnIndex, lastColumnIndex) {
var doc = document;
if (columnIndex !== lastColumnIndex) {
if (lastColumnIndex > -1) {
doc.getElementById("demoHdr" + (lastColumnIndex - 1)).parentNode.style.backgroundColor = "";
}
doc.getElementById("demoHdr" + (columnIndex - 1)).parentNode.style.backgroundColor = "#f7f7f7";
}
};
var onResizeGrid = function(newWidth, newHeight) {
var demoDivStyle = document.getElementById("demoDiv").style;
demoDivStyle.width = newWidth + "px";
demoDivStyle.height = newHeight + "px";
};
for (var i=0, col; col=gridColSortTypes[i]; i++) {
gridColAlign[i] = (col === "number") ? "right" : "left";
}
var myGrid = new Grid("demoGrid", {
srcType : "json",
srcData : gridData,
allowGridResize : true,
allowColumnResize : true,
allowClientSideSorting : true,
allowSelections : true,
allowMultipleSelections : true,
showSelectionColumn : true,
onColumnSort : onColumnSort,
onResizeGrid : onResizeGrid,
colAlign : gridColAlign,
colBGColors : ["#fafafa"],
colSortTypes : gridColSortTypes,
fixedCols : 1
});
})(this, this.document);
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.