jquery.datagrid
Version:
A jquery plugin to render datagrid. Works with local or remote data. Designed to be adaptive, simple to use and extendable.
411 lines (367 loc) • 13 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Datagrid - Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Datagrid">
<meta name="author" content="Creative Area">
<link rel="shortcut icon" href="http://www.creative-area.net/favicon.ico">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
<script type="text/javascript" src="../jquery.datagrid.js"></script>
<script type="text/javascript" src="../plugins/jquery.datagrid.bootstrap3.js"></script>
<script type="text/javascript" src="countries.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet">
<link href="http://labs.creative-area.net/css/prettify.css" rel="stylesheet">
<link href="http://labs.creative-area.net/css/ribbon.css" rel="stylesheet">
<!--[if lt IE 9]>
<link rel="stylesheet" href="http://labs.creative-area.net/css/ribbon.ie.css">
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">//<![CDATA[
// Google Analytics
var _gaq = _gaq || [];
_gaq.push(['_setAccount','UA-5479812-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<style>
a { cursor: pointer;}
.dg div span { cursor: pointer;}
</style>
</head>
<body>
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="https://github.com/creative-area/jquery.datagrid">Fork me on GitHub</a>
</div>
</div>
<div class="container">
<h1>jQuery datagrid <small>- <a href="../">doc</a> - demo - <a href="../plugins/">plugins</a></small></h1>
<hr>
<!-- Nav tabs -->
<ul class="nav nav-pills" id="demo-tabs">
<li><a href="#demo-static-data" data-toggle="tab" data-dg="static-data">Static data</a></li>
<li><a href="#demo-simple" data-toggle="tab" data-dg="simple">Remote data</a></li>
<li><a href="#demo-cell" data-toggle="tab" data-dg="cell">Cell rendering</a></li>
<li><a href="#demo-filters" data-toggle="tab" data-dg="filters">Filters</a></li>
<li><a href="#demo-events" data-toggle="tab" data-dg="events">Events</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="demo-static-data">
<div class="row">
<div class="col-sm-6">
<h3>Simple</h3>
<div id="dg-demo-static-data" class="dg"></div>
</div>
<div class="col-sm-6">
<h3>Options used</h3>
<pre class="prettyprint">{
// static data
data: countries, // see `countries.js` file
// columns definition
// title, field name and sortable
col: [{
field: "Continent",
title: "Continent",
sortable: true
},{
field: "Name",
title: "Name",
sortable: true
},{
field: "Population",
title: "Population",
sortable: true
},{
field: "SurfaceArea",
title: "Surface",
sortable: true
}],
// table attributes set by $.attr()
attr: {
"class": "table table-bordered table-condensed"
},
// plugin used to display sort icon
sorter: "bootstrap",
// plugin used to display pagination
pager: "bootstrap"
}</pre>
</div>
</div>
</div>
<div class="tab-pane" id="demo-simple">
<div class="row">
<div class="col-sm-6">
<h3>Simple</h3>
<div id="dg-demo-simple" class="dg"></div>
</div>
<div class="col-sm-6">
<h3>Options used</h3>
<pre class="prettyprint">{
// server url. data posted :
// "page", "paging", "orderby", "direction"
url: "data/demo-simple.php",
// columns definition
// title, field name and sortable
col: [{
field: "Continent",
title: "Continent",
sortable: true
},{
field: "Name",
title: "Name",
sortable: true
},{
field: "Population",
title: "Population",
sortable: true
},{
field: "SurfaceArea",
title: "Surface",
sortable: true
}],
// table attributes set by $.attr()
attr: {
"class": "table table-bordered table-condensed"
},
// plugin used to display sort icon
sorter: "bootstrap",
// plugin used to display pagination
pager: "bootstrap"
}</pre>
</div>
</div>
</div>
<div class="tab-pane" id="demo-cell">
<div class="row">
<div class="col-sm-6">
<h3>Cell rendering</h3>
<div id="dg-demo-cell-rendering" class="dg"></div>
</div>
<div class="col-sm-6">
<h3>Options used</h3>
<pre class="prettyprint">{
// server url. data posted :
// "page", "paging", "orderby", "direction"
url: "data/demo-simple.php",
// columns definition
// title, field name and sortable
col: [{
field: "Continent",
title: "Continent",
attrHeader: { "width": "20%" },
render: { "fa-button" : {
style: "default",
size: "xs",
icon: "plane"
} },
sortable: true
},{
field: "Name",
title: "Name",
attrHeader: { "width": "25%" },
sortable: true
},{
field: "Population",
title: "Population",
attrHeader: {
"width": "15%",
"style": "text-align: right;",
"nowrap": "nowrap"
},
attr: {
"style": "text-align: right;",
"nowrap": "nowrap"
},
sortable: true,
render: function( data ) {
var r = "<span ";
if ( +data.value == 0) {
r += "class='label label-warning'";
data.value = "None";
} else if ( +data.value > 100000000 ) {
this.addClass( "success" );
} else if ( +data.value > 10000000 ) {
this.addClass( "warning" );
}
r += ">";
if ( +data.value > 1000000 ) {
r += Math.round(data.value/1000000) + " million";
} else {
r += data.value;
}
r += "</span>";
return r;
}
},{
field: "SurfaceArea",
title: "Surface",
attrHeader: {
"width": "15%",
"style": "text-align: right;",
"nowrap": "nowrap"
},
attr: {
"style": "text-align: right;",
"nowrap": "nowrap"
},
sortable: true,
render: function( data ) {
return Math.round( data.value ) + " km<sup>2</sup>";
}
},{
field: "SurfaceArea",
title: "Density",
attrHeader: {
"width": "15%",
"style": "text-align: right;",
"nowrap": "nowrap"
},
attr: { "style": "text-align: right;", "nowrap": "nowrap" },
render: function( data ) {
return ( +data.value > 0 ) ? Math.round( data.row.Population / data.value ) + " p/km<sup>2</sup>" : 'N/A';
}
}],
// table attributes set by $.attr()
attr: {
"class": "table table-bordered table-condensed"
},
// plugin used to display sort icon
sorter: "bootstrap",
// plugin used to display pagination
pager: "bootstrap"
}</pre>
</div>
</div>
</div>
<div class="tab-pane" id="demo-filters">
<div class="row">
<div class="col-sm-6">
<h3>Filters</h3>
<div id="dg-demo-filters-area">
<form class="form-inline" role="form">
<div class="form-group" style="width:115px;">
<label class="sr-only" for="ContinentDemoFilters">Continent</label>
<select name="Continent" id="ContinentDemoFilters" class="form-control">
<option value="">Continents - all</option>
<option value="Africa">Africa</option>
<option value="Antarctica">Antarctica</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="Oceania">Oceania</option>
<option value="South America">South America</option>
</select>
</div>
<div class="form-group" style="width:120px;">
<label class="sr-only" for="PopulationDemoFilters">Continent</label>
<select name="PopulationInterval" id="PopulationDemoFilters" class="form-control">
<option value="">Populations - all</option>
<option value="1">Inf 1 million</option>
<option value="2">Between 1 and 100 millions</option>
<option value="3">Sup 100 millions</option>
</select>
</div>
<div class="form-group" style="width:210px;">
<label class="sr-only" for="SurfaceAreaDemoFilters">Surface</label>
<select name="SurfaceArea" id="SurfaceAreaDemoFilters" class="form-control" multiple="multiple" size="4">
<option value="" disabled>Surfaces</option>
<option value="1">> 1 000 000</option>
<option value="2">> 100 000 & < 1 000 000</option>
<option value="3">< 100 000</option>
</select>
</div>
</form>
</div>
<div id="dg-demo-filters" class="dg"></div>
</div>
<div class="col-sm-6">
<h3>Options used</h3>
<pre class="prettyprint">var dg3 = $( "#dg-demo-filters" ).datagrid({
// same options as simple demo
});
// just pass a $element to the filters method
// works with all form elements
dg3.datagrid( "filters", "#dg-demo-filters-area" );
// you can also use .datagrid( "datagrid" ) method
// dg3.datagrid( "datagrid" ).filters( "#dg-demo-filters-area" );</pre>
</div>
</div>
</div>
<div class="tab-pane" id="demo-events">
<div class="row">
<div class="col-sm-6">
<h3>Events</h3>
<div id="dg-demo-events-area">
<p id="dg-demo-events-info"></p>
<form class="form-inline" role="form">
<label class="sr-only" for="ContinentDemoEvents">Continent</label>
<select name="Continent" id="ContinentDemoEvents" class="form-control">
<option value="">Continents - all</option>
<option value="Africa">Africa</option>
<option value="Antarctica">Antarctica</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="Oceania">Oceania</option>
<option value="South America">South America</option>
</select>
</form>
</div>
<div id="dg-demo-events" class="dg"></div>
</div>
<div class="col-sm-6">
<h3>Options used</h3>
<pre class="prettyprint">// cache jquery elements
$eventsInfo = $( "#dg-demo-events-info" );
$eventsArea = $( "#dg-demo-events-area" );
// datagrid
var dg4 = $( "#dg-demo-events" ).datagrid({
// same options as simple demo
// just add events options
onBefore: function() {
$eventsInfo.html( "Datagrid loading ..." );
$eventsArea.hide();
},
onData: function( data ) {
$eventsInfo.html( data.total + " countries" );
},
onRowData: function( data, num, $tr ) {
if ( data.Population > 10000000 ) {
$tr.addClass( "success" );
} else if ( data.Population < 100 ) {
$tr.addClass( "danger" );
}
},
onComplete: function() {
$eventsArea.show();
}
});
// filters
dg4.datagrid( "filters", $eventsArea );</pre>
</div>
</div>
</div>
</div>
</div>
<div class="github-fork-ribbon-wrapper left-bottom">
<div class="github-fork-ribbon creative-area">
<a href="http://www.creative-area.net/" target="_blank">Built @ Creative Area</a>
</div>
</div>
</body>
</html>