jqwidgets-framework
Version:
jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
114 lines (104 loc) • 5.29 kB
HTML
<html lang="en">
<head>
<title id="Description">This demo shows how to filter values depending on the selection
of the jqxRangeSelector. </title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxrangeselector.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// create jqxRangeSelector.
$("#rangeSelector").jqxRangeSelector({
width: 750, height: 80, min: "January 01, 1800", max: "January 01, 1900",
majorTicksInterval: { years: 10 }, minorTicksInterval: "year", labelsFormat: "yyyy", markersFormat: "yyyy"
});
var url = "../sampledata/discoveries.txt";
var source =
{
datatype: "json",
datafields: [
{ name: "discovery", type: "string" },
{ name: "scientist", type: "string" },
{ name: "year", type: "date" }
],
id: "id",
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxGrid").jqxGrid(
{
theme: theme,
width: 850,
height: 300,
source: dataAdapter,
filterable: true,
columns: [
{ text: "Discovery", columngroup: "header", datafield: "discovery", width: 250 },
{ text: "Scientist", columngroup: "header", datafield: "scientist", width: 210 },
{ text: "Year", columngroup: "header", datafield: "year", cellsformat: "yyyy" }
],
columngroups: [
{ text: "Major scientific discoveries in the 19th century", align: "center", name: "header" }
]
});
var applyFilter = function (from, to) {
$("#jqxGrid").jqxGrid("clearfilters");
filtertype = "datefilter";
var filtergroup = new $.jqx.filter();
var filter_or_operator = 0;
var filtervalueFrom = from;
var filterconditionFrom = "GREATER_THAN_OR_EQUAL";
var filterFrom = filtergroup.createfilter(filtertype, filtervalueFrom, filterconditionFrom);
filtergroup.addfilter(filter_or_operator, filterFrom);
var filtervalueTo = to;
var filterconditionTo = "LESS_THAN_OR_EQUAL";
var filterTo = filtergroup.createfilter(filtertype, filtervalueTo, filterconditionTo);
filtergroup.addfilter(filter_or_operator, filterTo);
$("#jqxGrid").jqxGrid("addfilter", "year", filtergroup);
$("#jqxGrid").jqxGrid("applyfilters");
};
// update filter on "change" event.
$("#rangeSelector").on("change", function (event) {
var range = event.args;
var min = $("#rangeSelector").jqxRangeSelector("min");
var max = $("#rangeSelector").jqxRangeSelector("max");
min = new Date(min);
max = new Date(max);
if (range.from.getTime() == min.getTime() && range.to.getTime() == max.getTime()) {
$("#jqxGrid").jqxGrid("clearfilters");
} else {
applyFilter(range.from, range.to);
};
});
});
</script>
</head>
<body>
<label style="font-size: 13px; font-family: Verdana;">Major scientific discoveries in selected period:
</label>
<div id="jqxGrid" style="margin-top: 10px;">
</div>
<br />
<label style="font-size: 13px; margin-top: 10px; font-family: Verdana;">Select period:
</label>
<br />
<div id="rangeSelector">
<div id="jqxRangeSelectorContent">
</div>
</div>
</body>
</html>