57 lines
1.9 KiB
HTML
57 lines
1.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>W2UI Demo: grid/6</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="grid" style="min-width: 300px;max-width:900px;height: 300px;"></div>
|
||
|
|
<br>
|
||
|
|
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
import { w2grid } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
|
||
|
|
|
||
|
|
let grid = new w2grid({
|
||
|
|
name: 'grid',
|
||
|
|
box: '#grid',
|
||
|
|
show: { selectColumn: true },
|
||
|
|
multiSelect: true,
|
||
|
|
columns: [
|
||
|
|
{ field: 'recid', text: 'ID', size: '50px' },
|
||
|
|
{ field: 'lname', text: 'Last Name', size: '30%' },
|
||
|
|
{ field: 'fname', text: 'First Name', size: '30%' },
|
||
|
|
{ field: 'email', text: 'Email', size: '40%' },
|
||
|
|
{ field: 'sdate', text: 'Start Date', size: '120px' }
|
||
|
|
],
|
||
|
|
records: [
|
||
|
|
{ recid: 1, fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
|
||
|
|
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
|
||
|
|
{ recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
|
||
|
|
{ recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
|
||
|
|
{ recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
|
||
|
|
{ recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
|
||
|
|
{ recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
|
||
|
|
{ recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
|
||
|
|
],
|
||
|
|
async onSelect(event) {
|
||
|
|
await event.complete
|
||
|
|
console.log('select', event.detail, this.getSelection())
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
window.multi = function(el) {
|
||
|
|
grid.multiSelect = el.checked
|
||
|
|
grid.selectNone()
|
||
|
|
grid.refresh()
|
||
|
|
}
|
||
|
|
|
||
|
|
window.selColumn = function(flag) {
|
||
|
|
grid.show.selectColumn = flag
|
||
|
|
grid.refresh()
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|