jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
254 lines (246 loc) • 10.5 kB
HTML
<html lang="en">
<head>
<title id="Description">Rows Selection Modes in jqxDataTable. Select multiple rows by holding Shift or Ctrl and clicking on a row.</title>
<meta name="description" content="This sample demonstrates how we can set up the DataTable plug-in with Single Row or Multiple Row selection modes and how to use the DataTable's Selection API." />
<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/jqxdatatable.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxinput.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="../../sampledata/generatedata.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// create jqxDataTable.
$("#table").jqxDataTable(
{
width: getWidth("dataTable"),
altRows: true,
columns: [
{ text: 'First Name', dataField: 'First Name', width: 200 },
{ text: 'Last Name', dataField: 'Last Name', width: 200 },
{ text: 'Product', dataField: 'Product', width: 180 },
{ text: 'Unit Price', dataField: 'Price', width: 90, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
{ text: 'Quantity', dataField: 'Quantity', width: 80, align: 'right', cellsAlign: 'right' }
]
});
// create jqxInput.
$("#rowInput").jqxInput({ height: 30, width: 60 });
// create jqxButton.
$("#rowSelect").jqxButton({ height: 30, width: 60 });
$("#clearSelection").jqxButton({ height: 30 });
// create jqxDropDownList.
$("#selectionMode").jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 1, source: ['Single Row', 'Multiple Rows'], height: 30 });
$("#selectionMode").on('change', function (event) {
switch (event.args.index) {
case 0:
// disable multiple rows selection with Shift or Ctrl.
$("#table").jqxDataTable({ 'selectionMode': 'singleRow' });
break;
case 1:
// enable multiple rows selection with Shift or Ctrl.
$("#table").jqxDataTable({ 'selectionMode': 'multipleRows' });
break;
}
});
// selects a row by index.
$("#rowSelect").click(function () {
var index = parseInt($("#rowInput").val());
$("#table").jqxDataTable('selectRow', index);
});
// clear selection.
$("#clearSelection").click(function () {
$("#table").jqxDataTable('clearSelection');
});
var selectionInfo = function () {
// gets selected row indexes. The method returns an Array of indexes.
var selection = $("#table").jqxDataTable('getSelection');
var selectedRows = "<br/>Selected Row Indexes:<br/>";
if (selection && selection.length > 0) {
var rows = $("#table").jqxDataTable('getRows');
for (var i = 0; i < selection.length; i++) {
var rowData = selection[i];
selectedRows += rows.indexOf(rowData);
if (i < selection.length - 1) {
selectedRows += ", ";
}
if (i > 1 && i % 8 === 0) {
selectedRows += "<br/>";
}
}
$("#selectedRows").html(selectedRows);
}
else $("#selectedRows").html(selectedRows);
}
$("#table").on('rowSelect', function (event) {
// event arguments
var args = event.args;
// row index
var index = args.index;
// row data
var rowData = args.row;
// row key
var rowKey = args.key;
selectionInfo();
});
$("#table").on('rowUnselect', function (event) {
// event arguments
var args = event.args;
// row index
var index = args.index;
// row data
var rowData = args.row;
// row key
var rowKey = args.key;
selectionInfo();
});
});
</script>
</head>
<body class='default'>
<div style="float: left;">
<table id="table" border="1">
<thead>
<tr>
<th align="left">First Name</th>
<th align="left">Last Name</th>
<th align="left">Product</th>
<th align="right">Price</th>
<th align="right">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ian</td>
<td>Devling</td>
<td>Espresso Truffle</td>
<td>$1.75</td>
<td>8</td>
</tr>
<tr>
<td>Nancy</td>
<td>Wilson</td>
<td>Cappuccino</td>
<td>$5.00</td>
<td>3</td>
</tr>
<tr>
<td>Cheryl</td>
<td>Nodier</td>
<td>Caffe Americano</td>
<td>$2.50</td>
<td>4</td>
</tr>
<tr>
<td>Martin</td>
<td>Saavedra</td>
<td>Caramel Latte</td>
<td>$3.80</td>
<td>11</td>
</tr>
<tr>
<td>Guylene</td>
<td>Bjorn</td>
<td>Green Tea</td>
<td>$1.50</td>
<td>8</td>
</tr>
<tr>
<td>Andrew</td>
<td>Burke</td>
<td>Caffe Espresso</td>
<td>$3.00</td>
<td>2</td>
</tr>
<tr>
<td>Regina</td>
<td>Murphy</td>
<td>White Chocolate Mocha</td>
<td>$3.60</td>
<td>6</td>
</tr>
<tr>
<td>Michael</td>
<td>Murphy</td>
<td>Caramel Latte</td>
<td>$3.80</td>
<td>2</td>
</tr>
<tr>
<td>Petra</td>
<td>Bein</td>
<td>Caffe Americano</td>
<td>$2.50</td>
<td>7</td>
</tr>
<tr>
<td>Nancy</td>
<td>Nodier</td>
<td>Caffe Latte</td>
<td>$4.50</td>
<td>10</td>
</tr>
<tr>
<td>Peter</td>
<td>Devling</td>
<td>Green Tea</td>
<td>$1.50</td>
<td>1</td>
</tr>
<tr>
<td>Beate</td>
<td>Saylor</td>
<td>Espresso con Panna</td>
<td>$3.25</td>
<td>3</td>
</tr>
<tr>
<td>Shelley</td>
<td>Nodier</td>
<td>Peppermint Mocha Twist</td>
<td>$4.00</td>
<td>7</td>
</tr>
<tr>
<td>Nancy</td>
<td>Murphy</td>
<td>Peppermint Mocha Twist</td>
<td>$4.00</td>
<td>1</td>
</tr>
<tr>
<td>Lars</td>
<td>Wilson</td>
<td>Caffe Espresso</td>
<td>$3.00</td>
<td>11</td>
</tr>
</tbody>
</table>
</div>
<div style="float: left; margin-left: 10px;">
<div><strong>Settings</strong></div>
Select Row:
<input value="0" id="rowInput" />
<br />
<br />
<button id="rowSelect">Select</button>
<button id="clearSelection">Clear Selection</button>
<div id="selectedRows"></div>
<br />
Selection Mode:
<div id="selectionMode"></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>