jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
207 lines (190 loc) • 9.92 kB
HTML
<html lang="en">
<head>
<title id='Description'>This example shows how to use the Grid Cells Selection API.
</title>
<meta name="description" content="JavaScript Grid with Cells Selection" />
<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/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/jqxcheckbox.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/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data = generatedata(200);
var source =
{
localdata: data,
datafields:
[
{ name: 'id', type: 'number'},
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'available', type: 'bool' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#grid").jqxGrid(
{
width: getWidth('Grid'),
source: dataAdapter,
selectionmode: 'singlecell',
columns: [
{ text: 'First Name', datafield: 'firstname', width: 200 },
{ text: 'Last Name', datafield: 'lastname', width: 200 },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' },
]
});
// initialize buttons and checkboxes.
$("#selectcellbutton").jqxButton({ theme: theme });
$("#scrolltobutton").jqxButton({ theme: theme });
$("#clearselectionbutton").jqxButton({ theme: theme });
$("#enableselection").jqxDropDownList({ autoDropDownHeight: true, dropDownWidth: 200, width: 120, height: 25, selectedIndex: 1, source: ['none', 'single cell', 'multiple cells', 'multiple cells extended', 'multiple cells advanced'] });
var columns = ['First Name', 'Last Name', 'Product Name', 'Quantity', "Unit Price", "Total"];
$("#columnchooser").jqxDropDownList({ autoDropDownHeight: true, width: 120, height: 25, selectedIndex: 1, source: columns });
$("#enablehover").jqxCheckBox({ checked: true });
// select a row.
$("#selectcellbutton").click(function () {
var index = parseInt($("#rowindexinput").val());
var columnindex = $("#columnchooser").jqxDropDownList('getSelectedIndex');
var columndatafield = $("#grid").jqxGrid('getcolumnat', columnindex).datafield;
if (!isNaN(index)) {
$("#grid").jqxGrid('selectcell', index, columndatafield);
}
});
// clears the selection.
$("#clearselectionbutton").click(function () {
$("#grid").jqxGrid('clearselection');
});
// scroll to a row.
$("#scrolltobutton").click(function () {
var index = parseInt($("#rowindexinput2").val());
if (!isNaN(index)) {
$("#grid").jqxGrid('ensurerowvisible', index);
}
});
// enable or disable the selection.
$("#enableselection").on('select', function (event) {
var index = event.args.index;
switch (index) {
case 0:
$("#grid").jqxGrid('selectionmode', 'none');
break;
case 1:
$("#grid").jqxGrid('selectionmode', 'singlecell');
break;
case 2:
$("#grid").jqxGrid('selectionmode', 'multiplecells');
break;
case 3:
$("#grid").jqxGrid('selectionmode', 'multiplecellsextended');
break;
case 4:
$("#grid").jqxGrid('selectionmode', 'multiplecellsadvanced');
break;
}
});
// enable or disable the hover state.
$("#enablehover").on('change', function (event) {
$("#grid").jqxGrid('enablehover', event.args.checked);
});
// display selected row index.
$("#grid").on('cellselect', function (event) {
var columnheader = $("#grid").jqxGrid('getcolumn', event.args.datafield).text;
$("#selectedcell").text("Row: " + event.args.rowindex + ", Column: " + columnheader);
});
// display unselected row index.
$("#grid").on('cellunselect', function (event) {
var columnheader = $("#grid").jqxGrid('getcolumn', event.args.datafield).text;
$("#unselectedcell").text("Row: " + event.args.rowindex + ", Column: " + columnheader);
});
// select a cell in the second row in the 'Last Name' column.
$("#grid").jqxGrid('selectcell', 2, "lastname");
});
</script>
</head>
<body class='default'>
<div id="grid">
</div>
<div style="margin-top: 20px;">
<div style="float: left;">
<div>
<input value="100" style="width: 50px;" maxlength="4" id="rowindexinput2" type="text" />
<input id="scrolltobutton" type="button" value="Scroll to Row" />
</div>
<div style="margin-top: 10px;" id="enablehover">
Enable Hover</div>
<div style="margin-top: 10px;">
<span>Selection Mode</span>
<div style="margin-top: 5px;" id="enableselection">
</div>
</div>
</div>
<div style="float: left; margin-left: 20px;">
<div>
<div>
<table>
<tr>
<td align="right">
Row:
</td>
<td>
<input value="0" style="float: left; width: 50px;" maxlength="4" id="rowindexinput"
type="text" />
</td>
</tr>
<tr>
<td align="right">
Column:
</td>
<td>
<div id="columnchooser">
</div>
</td>
</tr>
<tr>
<td align="right">
<input id="clearselectionbutton" type="button" value="Clear Selection" />
</td>
<td>
<input id="selectcellbutton" type="button" value="Select Cell" />
</td>
</tr>
</table>
</div>
</div>
</div>
<div style="float: left; margin-left: 20px;">
<span>Selection Log:</span>
<div style="margin-top: 10px;">
<span>Selected Cell:</span> <span id="selectedcell"></span>
<br />
<span>Unselected Cell:</span> <span id="unselectedcell"></span>
</div>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>