jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
238 lines (230 loc) • 10.1 kB
JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDataTable from '../../../jqwidgets-react/react_jqxdatatable.js';
import JqxDropDownList from '../../../jqwidgets-react/react_jqxdropdownlist.js';
import JqxButton from '../../../jqwidgets-react/react_jqxbuttons.js';
import JqxInput from '../../../jqwidgets-react/react_jqxinput.js';
class App extends React.Component {
componentDidMount() {
this.refs.selectionMode.on('change', (event) => {
switch (event.args.index) {
case 0:
// disable multiple rows selection with Shift or Ctrl.
this.refs.myDataTable.selectionMode('singleRow');
break;
case 1:
// enable multiple rows selection with Shift or Ctrl.
this.refs.myDataTable.selectionMode('multipleRows');
break;
}
});
this.refs.rowSelect.on('click', (event) => {
let index = parseInt(this.refs.rowInput.val());
this.refs.myDataTable.selectRow(index);
});
// clear selection.
this.refs.clearSelection.on('click', (event) => {
this.refs.myDataTable.clearSelection();
});
this.refs.myDataTable.on('rowSelect', (event) => {
// event arguments
let args = event.args;
// row index
let index = args.index;
// row data
let rowData = args.row;
// row key
let rowKey = args.key;
this.selectionInfo();
});
this.refs.myDataTable.on('rowUnselect', (event) => {
// event arguments
let args = event.args;
// row index
let index = args.index;
// row data
let rowData = args.row;
// row key
let rowKey = args.key;
this.selectionInfo();
});
}
selectionInfo() {
// gets selected row indexes. The method returns an Array of indexes.
let selection = this.refs.myDataTable.getSelection();
let selectedRows = '<br/>Selected Row Indexes:<br/>';
if (selection && selection.length > 0) {
let rows = this.refs.myDataTable.getRows();
for (let i = 0; i < selection.length; i++) {
let rowData = selection[i];
selectedRows += rows.indexOf(rowData);
if (i < selection.length - 1) {
selectedRows += ', ';
}
if (i > 1 && i % 8 === 0) {
selectedRows += '<br/>';
}
}
}
document.getElementById('selectedRows').innerHTML = selectedRows;
}
render() {
let columns =
[
{ text: 'First Name', dataField: 'First Name', width: 150 },
{ text: 'Last Name', dataField: 'Last Name', width: 150 },
{ 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' }
];
return (
<div>
<JqxDataTable ref='myDataTable'
width={650} columns={columns} altRows={true}
>
<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>
</JqxDataTable>
<div style={{ float: 'left', marginTop: 10 }}>
<div><strong>Settings</strong></div>
Select Row:
<JqxInput ref='rowInput' value='0'
width={60} height={30}
/>
<br />
<br />
<JqxButton ref='rowSelect' style={{ float: 'left' }}
width={105} height={30} value='Select'
/>
<JqxButton ref='clearSelection' style={{ float: 'left', marginLeft: 5 }}
width={105} height={30} value='Clear Selection'
/>
<div id='selectedRows'></div>
<br />
<div>Selection Mode:</div>
<JqxDropDownList ref='selectionMode'
height={30} source={['Single Row', 'Multiple Rows']}
selectedIndex={1} autoDropDownHeight={true}
/>
</div>
</div >
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));