jquery.datagrid
Version:
A jquery plugin to render datagrid. Works with local or remote data. Designed to be adaptive, simple to use and extendable.
176 lines (166 loc) • 5.84 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Datagrid - Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="jQuery Datagrid">
<meta name="author" content="Creative Area">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.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">
$( document ).ready( function() {
// tests
$( "#dg-test" ).datagrid({
// data: countries,
// source: {
// data: {
// data: countries,
// filter: function( data, filters ) {
// // console.log( filters );
// var filteredData = [];
// for ( var i=0 ; i<data.length ; i++ ) {
// var good = true;
// if ( filters.Continent && filters.Continent !== "" ) {
// good = good && ( "" + data[ i ].Continent === "" + filters.Continent );
// }
// if ( filters.PopulationInterval && filters.PopulationInterval !== "" ) {
// if ( filters.PopulationInterval === "1" && 1*data[ i ].Population > 1000000 ) {
// good = false;
// } else if ( filters.PopulationInterval === "2" && ( 1*data[ i ].Population <= 1000000 || 1*data[ i ].Population >= 100000000 ) ) {
// good = false;
// } else if ( filters.PopulationInterval === "3" && 1*data[ i ].Population < 100000000 ) {
// good = false;
// }
// }
// if ( good ) {
// filteredData.push( data[ i ] );
// }
// }
// return filteredData;
// }
// // ,
// // sorter: function( data, key, comparator ) {
// // return data;
// // }
// }
// },
url: "data/demo-simple.php",
source: {
"post": {
url: "data/demo-simple.php"
}
},
col: [{
field: "Continent",
title: "Continent",
sortable: true,
// render: "fa-button"
render: { "fa-button" : {
style: function( data ) {
return ( data.value === "Asia" ) ? "success" : "default";
},
size: "xs",
icon: "plane"
} }
},{
field: "is_asia",
title: "Is Asia",
sortable: true,
render: { "fa-button-yn" : {
style: function( data ) {
return ( data.row.Continent === "Asia" ) ? "success" : "default";
},
size: "xs",
iconOn: "plane",
iconOff: "info"
} }
},{
field: "Name",
title: "Name",
sortable: true
},{
field: "Population",
title: "Population",
sortable: true
},{
field: "SurfaceArea",
title: "Surface",
sortable: true
}],
attr: { "class": "table table-bordered table-condensed" },
attrSortable: { "class": "text-info" },
// sorter: "bootstrap",
// pager: "default",
// pager: "bootstrap",
pager: { "bootstrap-sm": {
behavior: { "sliding": { "pages": 4 } },
}},
pagerPosition: ["top","bottom"],
paramsDefault: {paging:10, Continent: $("#ContinentDemoFilters").val()}
})
.datagrid( "filters", "#dg-filters" );
});
</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">
<!-- 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]-->
<style>
a { cursor: pointer;}
.dg div span { cursor: pointer;}
</style>
</head>
<body>
<div class="container">
<h1>jQuery datagrid <small>tests</small></h1>
<div class="row">
<div class="col-sm-12">
<h3>Tests</h3>
<div id="dg-filters">
<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="" selected>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">Population</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; display: none;">
<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-test" class="dg"></div>
</div>
</div>
</div>
</body>
</html>