jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
204 lines (186 loc) • 9.33 kB
HTML
<html ng-app="demoApp" lang="en">
<head>
<title id="Description">JavaScript Grid Filtering API</title>
<meta name="description" content="AngularJS DataTable with Data Filtering example." />
<script type="text/javascript" src="../../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdatatable.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../sampledata/generatedata.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script><script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
<script type="text/javascript">
var demoApp = angular.module("demoApp", ["jqwidgets"]);
demoApp.controller("demoController", function ($scope) {
var grid, filterBox, columnChooser;
var source = {
localData: generateData(200),
dataFields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' }
],
dataType: "array"
};
$scope.gridSettings =
{
created: function(args)
{
grid = args.instance;
},
width: 650,
pagerButtonsCount: 4,
pageable: true,
source: new $.jqx.dataAdapter(source),
sortable: true,
columns: [
{ text: 'First Name', dataField: 'firstname', width: 190 },
{ text: 'Last Name', dataField: 'lastname', width: 190 },
{ text: 'Product', dataField: 'productname', width: 170 },
{ text: 'Quantity', dataField: 'quantity', cellsAlign: 'right' }
]
};
$scope.filterBoxSettings = {
propertyChanged: function(propertyName, oldValue, newValue)
{
},
created: function (args) {
displayMember: "",
filterBox = args.instance; $scope.updateFilterBox('firstname');
}, source: null, checkboxes: true, width: 160, height: 250
};
$scope.columnChooserSettings = {
created: function(args)
{
columnChooser = args.instance;
},
autoDropDownHeight: true, selectedIndex: 0, width: 160, height: 25,
source: [{ label: 'First Name', value: 'firstname' },
{ label: 'Last Name', value: 'lastname' },
{ label: 'Product', value: 'productname' },
{ label: 'Quantity', value: 'quantity' }
]
};
// updates the listbox with unique records depending on the selected column.
$scope.updateFilterBox = function (dataField) {
if (grid) {
grid.clearFilters();
}
var filterBoxAdapter = new $.jqx.dataAdapter(source,
{
uniqueDataFields: [dataField],
autoBind: true
});
var uniqueRecords = filterBoxAdapter.records;
uniqueRecords.splice(0, 0, '(Select All)');
$scope.filterBoxSettings.displayMember = dataField;
$scope.filterBoxSettings.source = uniqueRecords;
$scope.$apply();
filterBox.checkAll();
}
// handle select all item.
var handleCheckChange = true;
$scope.filterBoxCheckChange = function (event) {
if (!handleCheckChange)
return;
if (event.args.label != '(Select All)') {
// update the state of the "Select All" listbox item.
handleCheckChange = false;
filterBox.checkIndex(0);
var checkedItems = filterBox.getCheckedItems();
var items = filterBox.getItems();
if (checkedItems.length == 1) {
$filterBox.uncheckIndex(0);
}
else if (items.length != checkedItems.length) {
filterBox.indeterminateIndex(0);
}
handleCheckChange = true;
}
else {
// check/uncheck all items if "Select All" is clicked.
handleCheckChange = false;
if (event.args.checked) {
filterBox.checkAll();
}
else {
filterBox.uncheckAll();
}
handleCheckChange = true;
}
};
// handle columns selection.
$scope.columnChooserSelect = function (event) {
$scope.updateFilterBox(event.args.item.value);
};
// builds and applies the filter.
var applyFilter = function (dataField) {
grid.clearFilters();
var filtertype = 'stringfilter';
if (dataField == 'date') filtertype = 'datefilter';
if (dataField == 'price' || dataField == 'quantity') filtertype = 'numericfilter';
// create a new group of filters.
var filtergroup = new $.jqx.filter();
// get listbox's checked items.
var checkedItems = filterBox.getCheckedItems();
if (checkedItems.length == 0) {
var filter_or_operator = 1;
var filtervalue = "Empty";
var filtercondition = 'equal';
var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter);
}
else {
for (var i = 0; i < checkedItems.length; i++) {
var filter_or_operator = 1;
// set filter's value.
var filtervalue = checkedItems[i].label;
// set filter's condition.
var filtercondition = 'equal';
// create new filter.
var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
// add the filter to the filter group.
filtergroup.addfilter(filter_or_operator, filter);
}
}
// add the filters.
grid.addFilter(dataField, filtergroup);
// apply the filters.
grid.applyFilters();
}
// clears the filter.
$scope.clearFilter = function () {
grid.clearFilters();
};
// applies the filter.
$scope.applyFilter = function () {
var dataField = columnChooser.getSelectedItem().value;
applyFilter(dataField);
};
});
</script>
</head>
<body ng-controller="demoController">
<div style="float: left;">
<div style="float: left">
<div>Filter By:</div>
<jqx-drop-down-list jqx-on-select="columnChooserSelect(event)" jqx-settings="columnChooserSettings"></jqx-drop-down-list>
<jqx-list-box jqx-watch="[filterBoxSettings.displayMember]" jqx-settings="filterBoxSettings" jqx-on-check-change="filterBoxCheckChange(event)" style="margin-top: 10px;"></jqx-list-box>
<div style="margin-top: 10px;">
<jqx-button jqx-on-click="applyFilter()">Apply Filter</jqx-button>
<jqx-button jqx-on-click="clearFilter()">Clear Filter</jqx-button>
</div>
</div>
<jqx-data-table style="margin-left: 20px; float: left" jqx-settings="gridSettings">
</jqx-data-table>
</div>
</body>
</html>