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

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

@ -11,11 +11,11 @@
<div class="card"> <div class="card">
<h5>Single</h5> <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> <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"> <DataTable :value="products" :selection.sync="selectedProduct1" selectionMode="single" dataKey="id">
<Column field="vin" header="Vin"></Column> <Column field="code" header="Code"></Column>
<Column field="year" header="Year"></Column> <Column field="name" header="Name"></Column>
<Column field="brand" header="Brand"></Column> <Column field="category" header="Category"></Column>
<Column field="color" header="Color"></Column> <Column field="quantity" header="Quantity"></Column>
</DataTable> </DataTable>
</div> </div>
@ -23,60 +23,60 @@
<h5>Multiple</h5> <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. <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> 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> <template #header>
Multiple Selection with MetaKey Multiple Selection with MetaKey
</template> </template>
<Column field="vin" header="Vin"></Column> <Column field="code" header="Code"></Column>
<Column field="year" header="Year"></Column> <Column field="name" header="Name"></Column>
<Column field="brand" header="Brand"></Column> <Column field="category" header="Category"></Column>
<Column field="color" header="Color"></Column> <Column field="quantity" header="Quantity"></Column>
</DataTable> </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> <template #header>
Multiple Selection without MetaKey Multiple Selection without MetaKey
</template> </template>
<Column field="vin" header="Vin"></Column> <Column field="code" header="Code"></Column>
<Column field="year" header="Year"></Column> <Column field="name" header="Name"></Column>
<Column field="brand" header="Brand"></Column> <Column field="category" header="Category"></Column>
<Column field="color" header="Color"></Column> <Column field="quantity" header="Quantity"></Column>
</DataTable> </DataTable>
</div> </div>
<div class="card"> <div class="card">
<h5>Events</h5> <h5>Events</h5>
<p>row-select and row-unselects are available as selection events.</p> <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"> @row-select="onRowSelect" @row-unselect="onRowUnselect">
<Column field="vin" header="Vin"></Column> <Column field="code" header="Code"></Column>
<Column field="year" header="Year"></Column> <Column field="name" header="Name"></Column>
<Column field="brand" header="Brand"></Column> <Column field="category" header="Category"></Column>
<Column field="color" header="Color"></Column> <Column field="quantity" header="Quantity"></Column>
</DataTable> </DataTable>
</div> </div>
<div class="card"> <div class="card">
<h5>RadioButton</h5> <h5>RadioButton</h5>
<p>Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".</p> <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 selectionMode="single" headerStyle="width: 3em"></Column>
<Column field="vin" header="Vin"></Column> <Column field="code" header="Code"></Column>
<Column field="year" header="Year"></Column> <Column field="name" header="Name"></Column>
<Column field="brand" header="Brand"></Column> <Column field="category" header="Category"></Column>
<Column field="color" header="Color"></Column> <Column field="quantity" header="Quantity"></Column>
</DataTable> </DataTable>
</div> </div>
<div class="card"> <div class="card">
<h5>Checkbox</h5> <h5>Checkbox</h5>
<p>Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".</p> <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 selectionMode="multiple" headerStyle="width: 3em"></Column>
<Column field="vin" header="Vin"></Column> <Column field="code" header="Code"></Column>
<Column field="year" header="Year"></Column> <Column field="name" header="Name"></Column>
<Column field="brand" header="Brand"></Column> <Column field="category" header="Category"></Column>
<Column field="color" header="Color"></Column> <Column field="quantity" header="Quantity"></Column>
</DataTable> </DataTable>
</div> </div>
</div> </div>
@ -86,98 +86,108 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h5&gt;Single&lt;/h3&gt; &lt;div class="card"&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;h5&gt;Single&lt;/h5&gt;
&lt;DataTable :value="cars" :selection.sync="selectedCar1" selectionMode="single" dataKey="vin"&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;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;DataTable :value="products" :selection.sync="selectedProduct1" selectionMode="single" dataKey="id"&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;/DataTable&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;div class="card"&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. &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; 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;DataTable :value="products" :selection.sync="selectedProducts1" selectionMode="multiple" dataKey="id"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Multiple Selection with MetaKey Multiple Selection with MetaKey
&lt;/template&gt; &lt;/template&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;DataTable :value="cars" :selection.sync="selectedCars2" selectionMode="multiple" dataKey="vin" :metaKeySelection="false" style="margin-top: 2em"&gt; &lt;DataTable :value="products" :selection.sync="selectedProducts2" selectionMode="multiple" dataKey="id" :metaKeySelection="false" style="margin-top: 2em"&gt;
&lt;template #header&gt; &lt;template #header&gt;
Multiple Selection without MetaKey Multiple Selection without MetaKey
&lt;/template&gt; &lt;/template&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;Events&lt;/h3&gt; &lt;div class="card"&gt;
&lt;p&gt;row-select and row-unselects are available as selection events.&lt;/p&gt; &lt;h5&gt;Events&lt;/h5&gt;
&lt;DataTable :value="cars" :selection.sync="selectedCar2" selectionMode="single" dataKey="vin" &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; @row-select="onRowSelect" @row-unselect="onRowUnselect"&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;RadioButton&lt;/h3&gt; &lt;div class="card"&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;h5&gt;RadioButton&lt;/h5&gt;
&lt;DataTable :value="cars" :selection.sync="selectedCar3" dataKey="vin"&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 selectionMode="single" headerStyle="width: 3em"&gt;&lt;/Column&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/div&gt;
&lt;h3&gt;Checkbox&lt;/h3&gt; &lt;div class="card"&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;h5&gt;Checkbox&lt;/h5&gt;
&lt;DataTable :value="cars" :selection.sync="selectedCars3" dataKey="vin"&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 selectionMode="multiple" headerStyle="width: 3em"&gt;&lt;/Column&gt;
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt;&lt;/Column&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/div&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
cars: null, products: null,
selectedCar1: null, selectedProduct1: null,
selectedCar2: null, selectedProduct2: null,
selectedCar3: null, selectedProduct3: null,
selectedCars1: null, selectedProducts1: null,
selectedCars2: null, selectedProducts2: null,
selectedCars3: null selectedProducts3: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data);
}, },
methods: { methods: {
onRowSelect(event) { 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) { 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> </template>
<script> <script>
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
cars: null, products: null,
selectedCar1: null, selectedProduct1: null,
selectedCar2: null, selectedProduct2: null,
selectedCar3: null, selectedProduct3: null,
selectedCars1: null, selectedProducts1: null,
selectedCars2: null, selectedProducts2: null,
selectedCars3: null selectedProducts3: null
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProductsSmall().then(data => this.products = data);
}, },
methods: { methods: {
onRowSelect(event) { 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) { 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});
} }
} }
} }