Source codes for Tree Demos
cagataycivici
parent
f3f5491b76
commit
5029c4b214
|
|
@ -112,36 +112,73 @@ import Tree from 'primevue/tree';
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tristatecheckbox" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/treedemo" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>TriStateCheckbox</h1>
|
||||
<p>TriStateCheckbox is used to select either "true", "false" or "null" as the value.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Tree</h1>
|
||||
<p>Tree is used to display hierarchical data.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<TriStateCheckbox v-model="value" />
|
||||
<p>Value: <span style="font-weight: bold">{{value == null ? 'null' : value}}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-section implementation">
|
||||
<h3>Basic</h3>
|
||||
<Tree :value="nodes"></Tree>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import NodeService from '../../service/NodeService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: null
|
||||
}
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
nodes: null,
|
||||
expandedKeys: {}
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
this.nodeService = new NodeService();
|
||||
},
|
||||
mounted() {
|
||||
this.nodeService.getTreeNodes().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) {
|
||||
this.expandedKeys[node.key] = true;
|
||||
if (node.children && node.children.length) {
|
||||
for (let child of node.children) {
|
||||
this.expandNode(child);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
|
|
|
|||
|
|
@ -17,9 +17,64 @@
|
|||
<Tree :value="nodes" :filter="true" filterMode="strict"></Tree>
|
||||
</div>
|
||||
|
||||
<TreeDoc />
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Lenient Filter</h3>
|
||||
<Tree :value="nodes" :filter="true" filterMode="lenient"></Tree>
|
||||
|
||||
<h3>Strict Filter</h3>
|
||||
<Tree :value="nodes" :filter="true" filterMode="strict"></Tree>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import NodeService from '../../service/NodeService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: null,
|
||||
expandedKeys: {}
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
this.nodeService = new NodeService();
|
||||
},
|
||||
mounted() {
|
||||
this.nodeService.getTreeNodes().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) {
|
||||
this.expandedKeys[node.key] = true;
|
||||
if (node.children << node.children.length) {
|
||||
for (let child of node.children) {
|
||||
this.expandNode(child);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NodeService from '../../service/NodeService';
|
||||
import TreeDoc from './TreeDoc';
|
||||
|
|
|
|||
|
|
@ -10,12 +10,90 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading"></Tree>
|
||||
<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading"></Tree>
|
||||
</div>
|
||||
|
||||
<TreeDoc />
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading"></Tree>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import NodeService from '../../service/NodeService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
nodes: null
|
||||
}
|
||||
},
|
||||
nodeService: null,
|
||||
created() {
|
||||
this.nodeService = new NodeService();
|
||||
},
|
||||
mounted() {
|
||||
this.loading = true;
|
||||
|
||||
setTimeout(() => {
|
||||
this.nodes = this.initateNodes();
|
||||
this.loading = false;
|
||||
}, 2000);
|
||||
},
|
||||
methods: {
|
||||
onNodeExpand(node) {
|
||||
if (!node.children) {
|
||||
this.loading = true;
|
||||
|
||||
setTimeout(() => {
|
||||
let _node = {...node};
|
||||
_node.children = [];
|
||||
|
||||
for (let i = 0; i < 3; i++) {
|
||||
_node.children.push({
|
||||
key: node.key + '-' + i,
|
||||
label: 'Lazy ' + node.label + '-' + i
|
||||
});
|
||||
}
|
||||
|
||||
let _nodes = {...this.nodes}
|
||||
_nodes[parseInt(node.key, 10)] = _node;
|
||||
|
||||
this.nodes = _nodes;
|
||||
this.loading = false;
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
initateNodes() {
|
||||
return [{
|
||||
key: '0',
|
||||
label: 'Node 0',
|
||||
leaf: false
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
label: 'Node 1',
|
||||
leaf: false
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'Node 2',
|
||||
leaf: false
|
||||
}];
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NodeService from '../../service/NodeService';
|
||||
import TreeDoc from './TreeDoc';
|
||||
|
|
|
|||
|
|
@ -27,9 +27,66 @@
|
|||
@node-select="onNodeSelect" @node-unselect="onNodeUnselect"></Tree>
|
||||
</div>
|
||||
|
||||
<TreeDoc />
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Single Selection</h3>
|
||||
<Tree :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey1"></Tree>
|
||||
|
||||
<h3>Multiple Selection with MetaKey</h3>
|
||||
<Tree :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys1"></Tree>
|
||||
|
||||
<h3>Multiple Selection without MetaKey</h3>
|
||||
<Tree :value="nodes" selectionMode="multiple" :selectionKeys.sync="selectedKeys2" :metaKeySelection="false"></Tree>
|
||||
|
||||
<h3>Checkbox Selection</h3>
|
||||
<Tree :value="nodes" selectionMode="checkbox" :selectionKeys.sync="selectedKeys3"></Tree>
|
||||
|
||||
<h3>Events</h3>
|
||||
<Tree :value="nodes" selectionMode="single" :selectionKeys.sync="selectedKey2" :metaKeySelection="false"
|
||||
@node-select="onNodeSelect" @node-unselect="onNodeUnselect"></Tree>
|
||||
</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.getTreeNodes().then(data => this.nodes = data);
|
||||
},
|
||||
methods: {
|
||||
onNodeSelect(node) {
|
||||
this.$toast.add({severity:'success', summary: 'Node Selected', detail: node.label, life: 3000});
|
||||
},
|
||||
onNodeUnselect(node) {
|
||||
this.$toast.add({severity:'success', summary: 'Node Unselected', detail: node.label, life: 3000});
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NodeService from '../../service/NodeService';
|
||||
import TreeDoc from './TreeDoc';
|
||||
|
|
|
|||
|
|
@ -20,9 +20,58 @@
|
|||
</Tree>
|
||||
</div>
|
||||
|
||||
<TreeDoc />
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Tree :value="nodes">
|
||||
<template #default="slotProps">
|
||||
<b>{{slotProps.node.label}}</b>
|
||||
</template>
|
||||
<template #url="slotProps">
|
||||
<a :href="slotProps.node.data">{{slotProps.node.label}}</a>
|
||||
</template>
|
||||
</Tree>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nodes: [
|
||||
{
|
||||
key: '0',
|
||||
label: 'Introduction',
|
||||
children: [
|
||||
{key: '0-0', label: 'What is Vue.js?', data:'https://vuejs.org/v2/guide/#What-is-Vue-js', type: 'url'},
|
||||
{key: '0-1', label: 'Getting Started', data: 'https://vuejs.org/v2/guide/#Getting-Started', type: 'url'},
|
||||
{key: '0-2', label: 'Declarative Rendering', data:'https://vuejs.org/v2/guide/#Declarative-Rendering', type: 'url'},
|
||||
{key: '0-3', label: 'Conditionals and Loops', data: 'https://vuejs.org/v2/guide/#Conditionals-and-Loops', type: 'url'}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
label: 'Components In-Depth',
|
||||
children: [
|
||||
{key: '1-0', label: 'Component Registration', data: 'https://vuejs.org/v2/guide/components-registration.html', type: 'url'},
|
||||
{key: '1-1', llabel: 'Props', data: 'https://vuejs.org/v2/guide/components-props.html', type: 'url'},
|
||||
{key: '1-2', llabel: 'Custom Events', data: 'https://vuejs.org/v2/guide/components-custom-events.html', type: 'url'},
|
||||
{key: '1-3', llabel: 'Slots', data: 'https://vuejs.org/v2/guide/components-slots.html', type: 'url'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TreeDoc from './TreeDoc';
|
||||
import TreeSubMenu from './TreeSubMenu';
|
||||
|
|
|
|||
Loading…
Reference in New Issue