Source codes for the samples
cagataycivici
parent
5bed730cfe
commit
2ed3de3988
|
|
@ -25,6 +25,50 @@
|
|||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Fit Mode</h3>
|
||||
<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Expand Mdoe</h3>
|
||||
<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import NodeService from '../../service/NodeService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: null
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
this.nodeService = new NodeService();
|
||||
},
|
||||
mounted() {
|
||||
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,13 +21,59 @@
|
|||
</TreeTable>
|
||||
</div>
|
||||
|
||||
<TreeTableDoc />
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<TreeTable :value="nodes">
|
||||
<template #header>
|
||||
<div style="text-align:left">
|
||||
<MultiSelect v-model="columns" :options="columnOptions" optionLabel="header" placeholder="Select Columns" style="width: 20em"/>
|
||||
</div>
|
||||
</template>
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
|
||||
</TreeTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import NodeService from '../../service/NodeService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: null,
|
||||
columnOptions: null,
|
||||
columns: null
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
this.nodeService = new NodeService();
|
||||
|
||||
this.columns = [
|
||||
{field: 'size', header: 'Size'},
|
||||
{field: 'type', header: 'Type'}
|
||||
];
|
||||
|
||||
this.columnOptions = [...this.columns];
|
||||
},
|
||||
mounted() {
|
||||
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NodeService from '../../service/NodeService';
|
||||
import TreeTableDoc from './TreeTableDoc';
|
||||
import TreeTableSubMenu from './TreeTableSubMenu';
|
||||
|
||||
export default {
|
||||
|
|
@ -53,7 +99,6 @@ export default {
|
|||
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
|
||||
},
|
||||
components: {
|
||||
'TreeTableDoc': TreeTableDoc,
|
||||
'TreeTableSubMenu': TreeTableSubMenu
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -721,20 +721,34 @@ export default {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tree" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/treetable" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Basic</h3>
|
||||
<Tree :value="nodes"></Tree>
|
||||
<TreeTable :value="nodes">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Dynamic Columns</h3>
|
||||
<TreeTable :value="nodes">
|
||||
<Column v-for="col of columns" :key="col.field"
|
||||
:field="col.field" :header="col.header" :expander="col.expander"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Programmatic Control</h3>
|
||||
<div style="margin-bottom: 1em">
|
||||
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
|
||||
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
|
||||
</div>
|
||||
<Tree :value="nodes" :expandedKeys="expandedKeys"></Tree>
|
||||
<TreeTable :value="nodes" :expandedKeys="expandedKeys">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -745,15 +759,22 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
nodes: null,
|
||||
columns: null,
|
||||
expandedKeys: {}
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
this.nodeService = new NodeService();
|
||||
|
||||
this.columns = [
|
||||
{field: 'name', header: 'Vin', expander: true},
|
||||
{field: 'size', header: 'Size'},
|
||||
{field: 'type', header: 'Type'}
|
||||
];
|
||||
},
|
||||
mounted() {
|
||||
this.nodeService.getTreeNodes().then(data => this.nodes = data);
|
||||
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
|
||||
},
|
||||
methods: {
|
||||
expandAll() {
|
||||
|
|
@ -767,8 +788,9 @@ export default {
|
|||
this.expandedKeys = {};
|
||||
},
|
||||
expandNode(node) {
|
||||
this.expandedKeys[node.key] = true;
|
||||
if (node.children && node.children.length) {
|
||||
this.expandedKeys[node.key] = true;
|
||||
|
||||
for (let child of node.children) {
|
||||
this.expandNode(child);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,13 +61,91 @@
|
|||
</TreeTable>
|
||||
</div>
|
||||
|
||||
<TreeTableDoc />
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Lenient Filter</h3>
|
||||
<TreeTable :value="nodes" :filters="filters" filterMode="lenient">
|
||||
<template #header>
|
||||
<div style="text-align: right">
|
||||
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
|
||||
<InputText v-model="filters['global']" placeholder="Global Search" size="50" />
|
||||
</div>
|
||||
</template>
|
||||
<Column field="name" header="Name" :expander="true">
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['name']" class="p-column-filter" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="size" header="Size">
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['size']" class="p-column-filter" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="type" header="Type">
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['type']" class="p-column-filter" />
|
||||
</template>
|
||||
</Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Strict Filter</h3>
|
||||
<TreeTable :value="nodes" :filters="filters" filterMode="strict">
|
||||
<template #header>
|
||||
<div style="text-align: right">
|
||||
<i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
|
||||
<InputText v-model="filters['global']" placeholder="Global Search" size="50" />
|
||||
</div>
|
||||
</template>
|
||||
<Column field="name" header="Name" :expander="true">
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['name']" class="p-column-filter" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="size" header="Size">
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['size']" class="p-column-filter" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="type" header="Type">
|
||||
<template #filter>
|
||||
<InputText type="text" v-model="filters['type']" class="p-column-filter" />
|
||||
</template>
|
||||
</Column>
|
||||
</TreeTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import NodeService from '../../service/NodeService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
filters: {},
|
||||
nodes: null
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
this.nodeService = new NodeService();
|
||||
},
|
||||
mounted() {
|
||||
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NodeService from '../../service/NodeService';
|
||||
import TreeTableDoc from './TreeTableDoc';
|
||||
import TreeTableSubMenu from './TreeTableSubMenu';
|
||||
|
||||
export default {
|
||||
|
|
@ -85,7 +163,6 @@ export default {
|
|||
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
|
||||
},
|
||||
components: {
|
||||
'TreeTableDoc': TreeTableDoc,
|
||||
'TreeTableSubMenu': TreeTableSubMenu
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,12 +19,116 @@
|
|||
</TreeTable>
|
||||
</div>
|
||||
|
||||
<TreeTableDoc />
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
|
||||
@node-expand="onExpand" @page="onPage" :totalRecords="totalRecords">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: null,
|
||||
rows: 10,
|
||||
loading: false,
|
||||
totalRecords: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loading = true;
|
||||
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.nodes = this.loadNodes(0, this.rows);
|
||||
this.totalRecords = 1000;
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
onExpand(node) {
|
||||
if (!node.children) {
|
||||
this.loading = true;
|
||||
|
||||
setTimeout(() => {
|
||||
let lazyNode = {...node};
|
||||
|
||||
lazyNode.children = [
|
||||
{
|
||||
data: {
|
||||
name: lazyNode.data.name + ' - 0',
|
||||
size: Math.floor(Math.random() * 1000) + 1 + 'kb',
|
||||
type: 'File'
|
||||
},
|
||||
},
|
||||
{
|
||||
data: {
|
||||
name: lazyNode.data.name + ' - 1',
|
||||
size: Math.floor(Math.random() * 1000) + 1 + 'kb',
|
||||
type: 'File'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
let nodes = this.nodes.map(n => {
|
||||
if (n.key === node.key) {
|
||||
n = lazyNode;
|
||||
}
|
||||
|
||||
return n;
|
||||
});
|
||||
|
||||
this.loading = false;
|
||||
this.nodes = nodes;
|
||||
}, 250);
|
||||
}
|
||||
},
|
||||
onPage(event) {
|
||||
this.loading = true;
|
||||
|
||||
//imitate delay of a backend call
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.nodes = this.loadNodes(event.first, this.rows);
|
||||
}, 1000);
|
||||
},
|
||||
loadNodes(first, rows) {
|
||||
let nodes = [];
|
||||
|
||||
for(let i = 0; i < rows; i++) {
|
||||
let node = {
|
||||
key: (first + i),
|
||||
data: {
|
||||
name: 'Item ' + (first + i),
|
||||
size: Math.floor(Math.random() * 1000) + 1 + 'kb',
|
||||
type: 'Type ' + (first + i)
|
||||
},
|
||||
leaf: false
|
||||
};
|
||||
|
||||
nodes.push(node);
|
||||
}
|
||||
|
||||
return nodes;
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TreeTableDoc from './TreeTableDoc';
|
||||
import TreeTableSubMenu from './TreeTableSubMenu';
|
||||
|
||||
export default {
|
||||
|
|
@ -113,14 +217,7 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
'TreeTableDoc': TreeTableDoc,
|
||||
'TreeTableSubMenu': TreeTableSubMenu
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
margin-right: .5em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,6 +16,59 @@
|
|||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<TreeTable :value="nodes" :paginator="true" :rows="10">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let files = [];
|
||||
for(let i = 0; i < 50; i++) {
|
||||
let node = {
|
||||
key: i,
|
||||
data: {
|
||||
name: 'Item ' + i,
|
||||
size: Math.floor(Math.random() * 1000) + 1 + 'kb',
|
||||
type: 'Type ' + i
|
||||
},
|
||||
children: [
|
||||
{
|
||||
key: i + ' - 0',
|
||||
data: {
|
||||
name: 'Item ' + i + ' - 0',
|
||||
size: Math.floor(Math.random() * 1000) + 1 + 'kb',
|
||||
type: 'Type ' + i
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
files.push(node);
|
||||
}
|
||||
|
||||
this.nodes = files;
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -28,7 +81,6 @@ export default {
|
|||
nodes: null
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
let files = [];
|
||||
for(let i = 0; i < 50; i++) {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,70 @@
|
|||
<Column field="type" header="Type" headerClass="sm-invisible" bodyClass="sm-invisible"></Column>
|
||||
</TreeTable>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<TreeTable :value="nodes" class="p-treetable-responsive">
|
||||
<template #header>
|
||||
Responsive
|
||||
</template>
|
||||
<Column field="name" header="Name" :expander="true">
|
||||
<template #body="slotProps">
|
||||
{{slotProps.node.data.name}}
|
||||
<span class="sm-visible">{{slotProps.node.data.size}}</span>
|
||||
<span class="sm-visible">{{slotProps.node.data.type}}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="size" header="Size" headerClass="sm-invisible" bodyClass="sm-invisible"></Column>
|
||||
<Column field="type" header="Type" headerClass="sm-invisible" bodyClass="sm-invisible"></Column>
|
||||
</TreeTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import NodeService from '../../service/NodeService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: null
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
this.nodeService = new NodeService();
|
||||
},
|
||||
mounted() {
|
||||
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
.sm-visible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
/deep/ {
|
||||
.sm-invisible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sm-visible {
|
||||
display: inline;
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -47,13 +47,88 @@
|
|||
</TreeTable>
|
||||
</div>
|
||||
|
||||
<TreeTableDoc />
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Single Selection</h3>
|
||||
<TreeTable :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey1">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Multiple Selection with MetaKey</h3>
|
||||
<TreeTable :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys1">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Multiple Selection without MetaKey</h3>
|
||||
<TreeTable :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys2" :metaKeySelection="false">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Checkbox Selection</h3>
|
||||
<TreeTable :value="nodes" selectionMode="checkbox" :selectionKeys.sync="selectedKeys3">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Events</h3>
|
||||
<TreeTable :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey2"
|
||||
@node-select="onNodeSelect" @node-unselect="onNodeUnselect">
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
</TreeTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import NodeService from '../../service/NodeService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectedKey1: null,
|
||||
selectedKey2: null,
|
||||
selectedKeys1: null,
|
||||
selectedKeys2: null,
|
||||
selectedKeys3: null,
|
||||
nodes: null
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
this.nodeService = new NodeService();
|
||||
},
|
||||
mounted() {
|
||||
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
|
||||
},
|
||||
methods: {
|
||||
onNodeSelect(node) {
|
||||
this.$toast.add({severity:'success', summary: 'Node Selected', detail: node.data.name, life: 3000});
|
||||
},
|
||||
onNodeUnselect(node) {
|
||||
this.$toast.add({severity:'success', summary: 'Node Unselected', detail: node.data.name, life: 3000});
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NodeService from '../../service/NodeService';
|
||||
import TreeTableDoc from './TreeTableDoc';
|
||||
import TreeTableSubMenu from './TreeTableSubMenu';
|
||||
|
||||
export default {
|
||||
|
|
@ -83,14 +158,7 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
'TreeTableDoc': TreeTableDoc,
|
||||
'TreeTableSubMenu': TreeTableSubMenu
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
margin-right: .5em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -24,6 +24,50 @@
|
|||
<Column field="type" header="Type" :sortable="true"></Column>
|
||||
</TreeTable>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Single Column Sorting</h3>
|
||||
<TreeTable :value="nodes" sortMode="single">
|
||||
<Column field="name" header="Name" :expander="true" :sortable="true"></Column>
|
||||
<Column field="size" header="Size" :sortable="true"></Column>
|
||||
<Column field="type" header="Type" :sortable="true"></Column>
|
||||
</TreeTable>
|
||||
|
||||
<h3>Multiple Column Sorting</h3>
|
||||
<TreeTable :value="nodes" sortMode="multiple">
|
||||
<Column field="name" header="Name" :expander="true" :sortable="true"></Column>
|
||||
<Column field="size" header="Size" :sortable="true"></Column>
|
||||
<Column field="type" header="Type" :sortable="true"></Column>
|
||||
</TreeTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import NodeService from '../../service/NodeService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: null
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
this.nodeService = new NodeService();
|
||||
},
|
||||
mounted() {
|
||||
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -34,59 +34,78 @@
|
|||
</TreeTable>
|
||||
</div>
|
||||
|
||||
<TreeTableDoc />
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<TreeTable :value="nodes">
|
||||
<template #header>
|
||||
FileSystem
|
||||
</template>
|
||||
<Column field="name" header="Name" :expander="true"></Column>
|
||||
<Column field="size" header="Size"></Column>
|
||||
<Column field="type" header="Type"></Column>
|
||||
<Column headerStyle="width: 8em" bodyStyle="text-align: center">
|
||||
<template #header>
|
||||
<Button type="button" icon="pi pi-cog"></Button>
|
||||
</template>
|
||||
<template #body="slotProps">
|
||||
<Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
|
||||
<Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>
|
||||
</template>
|
||||
</Column>
|
||||
<template #footer>
|
||||
<div style="text-align:left">
|
||||
<Button icon="pi pi-refresh" />
|
||||
</div>
|
||||
</template>
|
||||
</TreeTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import NodeService from '../../service/NodeService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: null,
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
this.nodeService = new NodeService();
|
||||
},
|
||||
mounted() {
|
||||
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NodeService from '../../service/NodeService';
|
||||
import TreeTableDoc from './TreeTableDoc';
|
||||
import TreeTableSubMenu from './TreeTableSubMenu';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: null,
|
||||
columns: null,
|
||||
expandedKeys: {}
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
this.nodeService = new NodeService();
|
||||
|
||||
this.columns = [
|
||||
{field: 'name', header: 'Vin', expander: true},
|
||||
{field: 'size', header: 'Size'},
|
||||
{field: 'type', header: 'Type'}
|
||||
];
|
||||
},
|
||||
mounted() {
|
||||
this.nodeService.getTreeTableNodes().then(data => this.nodes = data);
|
||||
},
|
||||
methods: {
|
||||
expandAll() {
|
||||
for (let node of this.nodes) {
|
||||
this.expandNode(node);
|
||||
}
|
||||
|
||||
this.expandedKeys = {...this.expandedKeys};
|
||||
},
|
||||
collapseAll() {
|
||||
this.expandedKeys = {};
|
||||
},
|
||||
expandNode(node) {
|
||||
if (node.children && node.children.length) {
|
||||
this.expandedKeys[node.key] = true;
|
||||
|
||||
for (let child of node.children) {
|
||||
this.expandNode(child);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'TreeTableDoc': TreeTableDoc,
|
||||
'TreeTableSubMenu': TreeTableSubMenu
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue