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

Dynamic lock-unlock row demos

pull/973/head
Cagatay Civici 2021-02-10 16:02:27 +03:00
parent 710c692594
commit 560add9d67
4 changed files with 37 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/datatable/BodyCell.vue
View File

@ -1,7 +1,7 @@
<template>
<td :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell">
<component :is="column.children.body" :data="rowData" :column="column" :index="index" v-if="column.children && column.children.body && !d_editing" />
<component :is="column.children.editor" :data="rowData" :column="column" :index="index" v-else-if="column.children && column.children.editor && d_editing" />
<component :is="column.children.body" :data="rowData" :column="column" :index="index" :frozenRow="frozenRow" v-if="column.children && column.children.body && !d_editing" />
<component :is="column.children.editor" :data="rowData" :column="column" :index="index" :frozenRow="frozenRow" v-else-if="column.children && column.children.editor && d_editing" />
<template v-else-if="columnProp('selectionMode')">
<DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="column.props.selectionMode === 'single'" />
<DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="column.props.selectionMode ==='multiple'" />
@ -48,6 +48,10 @@ export default {
type: Object,
default: null
},
frozenRow: {
type: Boolean,
default: false
},
index: {
type: Number,
default: null

4
src/components/datatable/DataTable.vue
View File

@ -1801,8 +1801,9 @@ export default {
.p-datatable-scrollable .p-datatable-thead > tr > th,
.p-datatable-scrollable .p-datatable-tbody > tr > td,
.p-datatable-scrollable .p-datatable-tfoot > tr > td {
display: block;
display: flex;
flex: 1 1 0;
align-items: center;
}
.p-datatable-scrollable .p-datatable-thead {
@ -1813,6 +1814,7 @@ export default {
.p-datatable-scrollable .p-datatable-frozen-tbody {
position: sticky;
z-index: 1;
}
.p-datatable-scrollable .p-datatable-tfoot {

2
src/components/datatable/TableBody.vue
View File

@ -16,7 +16,7 @@
@mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)" role="row">
<template v-for="(col,i) of columns" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i">
<DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
:rowTogglerIcon="columnProp(col,'expander') ? rowTogglerIcon(rowData): null"
:rowTogglerIcon="columnProp(col,'expander') ? rowTogglerIcon(rowData): null" :frozenRow="frozenRow"
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null"
:editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)"
@radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)" @row-toggle="onRowToggle($event)"

103
src/views/datatable/DataTableScrollDemo.vue
View File

@ -37,33 +37,6 @@
<Button label="Ok" icon="pi pi-check" @click="closeDialog" />
</template>
</Dialog>
<!--
<div class="card">
<h5>Virtual Scroll</h5>
<DataTable :value="virtualCustomers" :scrollable="true" scrollHeight="200px" :lazy="true" :rows="20" :loading="loading"
:virtualScroll="true" :virtualRowHeight="45" @virtual-scroll="onVirtualScroll" :totalRecords="lazyTotalRecords">
<Column field="name" header="Name">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="country.name" header="Country">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="representative.name" header="Representative">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
<Column field="status" header="Status">
<template #loading>
<span class="loading-text"></span>
</template>
</Column>
</DataTable>
</div>-->
<div class="card">
<h5>Horizontal and Vertical with Footer</h5>
@ -83,15 +56,20 @@
<Column field="representative.name" header="Representative" footer="Representative" :style="{width:'200px'}"></Column>
</DataTable>
</div>
<div class="card">
<h5>Frozen Rows</h5>
<DataTable :value="customers" :frozenValue="frozenValue" :scrollable="true" scrollHeight="400px" :loading="loading">
<DataTable :value="unlockedCustomers" :frozenValue="lockedCustomers" :scrollable="true" scrollHeight="400px" :loading="loading">
<Column field="name" header="Name"></Column>
<Column field="country.name" header="Country"></Column>
<Column field="representative.name" header="Representative"></Column>
<Column field="status" header="Status"></Column>
<Column style="flex: 0 0 4rem">
<template #body="{data,frozenRow,index}">
<Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2"
class="p-button-sm p-button-text" @click="toggleLock(data,frozenRow,index)"/>
</template>
</Column>
</DataTable>
</div>
@ -162,7 +140,6 @@
<pre v-code.script><code>
</code></pre>
</TabPanel>
</TabView>
@ -177,17 +154,15 @@ import LiveEditor from '../liveeditor/LiveEditor';
export default {
data() {
return {
customers: null,
customersGrouped: null,
virtualCustomers: null,
lazyTotalRecords: 0,
frozenValue: null,
customers: null,
customersGrouped: null,
lockedCustomers: [],
unlockedCustomers: null,
loading: false,
dialogVisible: false
}
},
customerService: null,
inmemoryData: null,
created() {
this.customerService = new CustomerService();
},
@ -198,26 +173,10 @@ export default {
this.customers = data;
this.loading = false;
});
this.customerService.getCustomersMedium().then(data => this.unlockedCustomers = data);
this.customerService.getCustomersMedium().then(data => this.customersGrouped = data);
this.customerService.getCustomersXLarge().then(data => this.inmemoryData = data);
this.frozenValue = [
{
id: 1255,
name: "James McAdams",
country: {
name: "United States",
code: "us"
},
company: "McAdams Consulting Ltd",
date: "2014-02-13",
status: "qualified",
activity: 23,
representative: {
name: "Ioni Bowcher",
image: "ionibowcher.png"
}
},
this.lockedCustomers = [
{
id: 5135,
name: "Geraldine Bisset",
@ -235,30 +194,8 @@ export default {
}
}
];
setTimeout(() => {
this.virtualCustomers = this.loadChunk(0, 40);
this.lazyTotalRecords = 500;
}, 250);
},
methods: {
loadChunk(index, length) {
let chunk = [];
for (let i = 0; i < length; i++) {
chunk[i] = {...this.inmemoryData[i]};
}
return chunk;
},
onVirtualScroll(event) {
setTimeout(() => {
//last chunk
if (event.first === 480)
this.virtualCustomers = this.loadChunk(event.first, 20)
else
this.virtualCustomers = this.loadChunk(event.first, event.rows)
}, 250);
},
openDialog() {
this.dialogVisible = true;
},
@ -280,6 +217,20 @@ export default {
}
return total;
},
toggleLock(data, frozen, index) {
if (frozen) {
this.lockedCustomers = this.lockedCustomers.filter((c, i) => i !== index);
this.unlockedCustomers.push(data);
}
else {
this.unlockedCustomers = this.unlockedCustomers.filter((c, i) => i !== index);
this.lockedCustomers.push(data);
}
this.unlockedCustomers.sort((val1, val2) => {
return val1.id < val2.id ? -1 : 1;
});
}
},
components: {