vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Selection demo

pull/358/head
cagataycivici 2020-06-30 15:57:37 +03:00
parent e9bfcecf73
commit 4ed4931915
1 changed files with 122 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

234
src/views/datatable/DataTableSelectionDemo.vue
View File

@ -11,11 +11,11 @@
<div class="card">
<h5>Single</h5>
<p>In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.</p>
<DataTable :value="cars" :selection.sync="selectedCar1" selectionMode="single" dataKey="vin">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<DataTable :value="products" :selection.sync="selectedProduct1" selectionMode="single" dataKey="id">
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
@ -23,60 +23,60 @@
<h5>Multiple</h5>
<p>In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required.
Setting metaKeySelection property as false enables multiple selection without meta key.</p>
<DataTable :value="cars" :selection.sync="selectedCars1" selectionMode="multiple" dataKey="vin">
<DataTable :value="products" :selection.sync="selectedProducts1" selectionMode="multiple" dataKey="id">
<template #header>
Multiple Selection with MetaKey
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
<DataTable :value="cars" :selection.sync="selectedCars2" selectionMode="multiple" dataKey="vin" :metaKeySelection="false" style="margin-top: 2em">
<DataTable :value="products" :selection.sync="selectedProducts2" selectionMode="multiple" dataKey="id" :metaKeySelection="false" style="margin-top: 2em">
<template #header>
Multiple Selection without MetaKey
</template>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
<div class="card">
<h5>Events</h5>
<p>row-select and row-unselects are available as selection events.</p>
<DataTable :value="cars" :selection.sync="selectedCar2" selectionMode="single" dataKey="vin"
<DataTable :value="products" :selection.sync="selectedProduct2" selectionMode="single" dataKey="id"
@row-select="onRowSelect" @row-unselect="onRowUnselect">
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
<div class="card">
<h5>RadioButton</h5>
<p>Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".</p>
<DataTable :value="cars" :selection.sync="selectedCar3" dataKey="vin">
<DataTable :value="products" :selection.sync="selectedProduct3" dataKey="id">
<Column selectionMode="single" headerStyle="width: 3em"></Column>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
<div class="card">
<h5>Checkbox</h5>
<p>Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".</p>
<DataTable :value="cars" :selection.sync="selectedCars3" dataKey="vin">
<DataTable :value="products" :selection.sync="selectedProducts3" dataKey="id">
<Column selectionMode="multiple" headerStyle="width: 3em"></Column>
<Column field="vin" header="Vin"></Column>
<Column field="year" header="Year"></Column>
<Column field="brand" header="Brand"></Column>
<Column field="color" header="Color"></Column>
<Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column>
<Column field="quantity" header="Quantity"></Column>
</DataTable>
</div>
</div>
@ -86,98 +86,108 @@
<TabPanel header="Source">
<CodeHighlight>
<template v-pre>
&lt;h5&gt;Single&lt;/h3&gt;
&lt;p&gt;In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.&lt;/p&gt;
&lt;DataTable :value="cars" :selection.sync="selectedCar1" selectionMode="single" dataKey="vin"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Single&lt;/h5&gt;
&lt;p&gt;In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.&lt;/p&gt;
&lt;DataTable :value="products" :selection.sync="selectedProduct1" selectionMode="single" dataKey="id"&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;Multiple&lt;/h3&gt;
&lt;p&gt;In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required.
Setting metaKeySelection property as false enables multiple selection without meta key.&lt;/p&gt;
&lt;DataTable :value="cars" :selection.sync="selectedCars1" selectionMode="multiple" dataKey="vin"&gt;
&lt;template #header&gt;
Multiple Selection with MetaKey
&lt;/template&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Multiple&lt;/h5&gt;
&lt;p&gt;In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required.
Setting metaKeySelection property as false enables multiple selection without meta key.&lt;/p&gt;
&lt;DataTable :value="products" :selection.sync="selectedProducts1" selectionMode="multiple" dataKey="id"&gt;
&lt;template #header&gt;
Multiple Selection with MetaKey
&lt;/template&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;DataTable :value="cars" :selection.sync="selectedCars2" selectionMode="multiple" dataKey="vin" :metaKeySelection="false" style="margin-top: 2em"&gt;
&lt;template #header&gt;
Multiple Selection without MetaKey
&lt;/template&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;DataTable :value="products" :selection.sync="selectedProducts2" selectionMode="multiple" dataKey="id" :metaKeySelection="false" style="margin-top: 2em"&gt;
&lt;template #header&gt;
Multiple Selection without MetaKey
&lt;/template&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;Events&lt;/h3&gt;
&lt;p&gt;row-select and row-unselects are available as selection events.&lt;/p&gt;
&lt;DataTable :value="cars" :selection.sync="selectedCar2" selectionMode="single" dataKey="vin"
@row-select="onRowSelect" @row-unselect="onRowUnselect"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Events&lt;/h5&gt;
&lt;p&gt;row-select and row-unselects are available as selection events.&lt;/p&gt;
&lt;DataTable :value="products" :selection.sync="selectedProduct2" selectionMode="single" dataKey="id"
@row-select="onRowSelect" @row-unselect="onRowUnselect"&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;RadioButton&lt;/h3&gt;
&lt;p&gt;Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".&lt;/p&gt;
&lt;DataTable :value="cars" :selection.sync="selectedCar3" dataKey="vin"&gt;
&lt;Column selectionMode="single" headerStyle="width: 3em"&gt;&lt;/Column&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;div class="card"&gt;
&lt;h5&gt;RadioButton&lt;/h5&gt;
&lt;p&gt;Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".&lt;/p&gt;
&lt;DataTable :value="products" :selection.sync="selectedProduct3" dataKey="id"&gt;
&lt;Column selectionMode="single" headerStyle="width: 3em"&gt;&lt;/Column&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;Checkbox&lt;/h3&gt;
&lt;p&gt;Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".&lt;/p&gt;
&lt;DataTable :value="cars" :selection.sync="selectedCars3" dataKey="vin"&gt;
&lt;Column selectionMode="multiple" headerStyle="width: 3em"&gt;&lt;/Column&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Checkbox&lt;/h5&gt;
&lt;p&gt;Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".&lt;/p&gt;
&lt;DataTable :value="products" :selection.sync="selectedProducts3" dataKey="id"&gt;
&lt;Column selectionMode="multiple" headerStyle="width: 3em"&gt;&lt;/Column&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt;
&lt;/div&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
import CarService from '../../service/CarService';
import ProductService from '../../service/ProductService';
export default {
data() {
return {
cars: null,
selectedCar1: null,
selectedCar2: null,
selectedCar3: null,
selectedCars1: null,
selectedCars2: null,
selectedCars3: null
products: null,
selectedProduct1: null,
selectedProduct2: null,
selectedProduct3: null,
selectedProducts1: null,
selectedProducts2: null,
selectedProducts3: null
}
},
carService: null,
productService: null,
created() {
this.carService = new CarService();
this.productService = new ProductService();
},
mounted() {
this.carService.getCarsSmall().then(data => this.cars = data);
this.productService.getProductsSmall().then(data => this.products = data);
},
methods: {
onRowSelect(event) {
this.$toast.add({severity: 'info', summary: 'Car Selected', detail: 'Vin: ' + event.data.vin, life: 3000});
this.$toast.add({severity: 'info', summary: 'Product Selected', detail: 'Name: ' + event.data.name, life: 3000});
},
onRowUnselect(event) {
this.$toast.add({severity: 'warn', summary: 'Car Unselected', detail: 'Vin: ' + event.data.vin, life: 3000});
this.$toast.add({severity: 'warn', summary: 'Product Unselected', detail: 'Name: ' + event.data.name, life: 3000});
}
}
}
@ -189,33 +199,33 @@ export default {
</template>
<script>
import CarService from '../../service/CarService';
import ProductService from '../../service/ProductService';
export default {
data() {
return {
cars: null,
selectedCar1: null,
selectedCar2: null,
selectedCar3: null,
selectedCars1: null,
selectedCars2: null,
selectedCars3: null
products: null,
selectedProduct1: null,
selectedProduct2: null,
selectedProduct3: null,
selectedProducts1: null,
selectedProducts2: null,
selectedProducts3: null
}
},
carService: null,
productService: null,
created() {
this.carService = new CarService();
this.productService = new ProductService();
},
mounted() {
this.carService.getCarsSmall().then(data => this.cars = data);
this.productService.getProductsSmall().then(data => this.products = data);
},
methods: {
onRowSelect(event) {
this.$toast.add({severity: 'info', summary: 'Car Selected', detail: 'Vin: ' + event.data.vin, life: 3000});
this.$toast.add({severity: 'info', summary: 'Product Selected', detail: 'Name: ' + event.data.name, life: 3000});
},
onRowUnselect(event) {
this.$toast.add({severity: 'warn', summary: 'Car Unselected', detail: 'Vin: ' + event.data.vin, life: 3000});
this.$toast.add({severity: 'warn', summary: 'Product Unselected', detail: 'Name: ' + event.data.name, life: 3000});
}
}
}