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

Templating Demo for Tree

pull/41/head
cagataycivici 2019-08-02 10:46:06 +03:00
parent c954f5dbe2
commit 43df972377
6 changed files with 272 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/tree/Tree.vue
View File

@ -1,7 +1,7 @@
<template>
<div :class="containerClass">
<ul class="p-tree-container" role="tree">
<TreeNode v-for="node of value" :key="node.key" :node="node"
<TreeNode v-for="node of value" :key="node.key" :node="node" :templates="$scopedSlots"
:expandedKeys="d_expandedKeys" @node-toggle="onNodeToggle" @node-click="onNodeClick"
:selectionMode="selectionMode" :selectionKeys="selectionKeys" @checkbox-change="onCheckboxChange"></TreeNode>
</ul>

34
src/components/tree/TreeNode.vue
View File

@ -11,10 +11,12 @@
</div>
</div>
<span :class="icon"></span>
<span class="p-treenode-label">{{node.label}}</span>
<span class="p-treenode-label">
<TreeNodeTemplate :node="node" :template="templates[node.type]||templates['default']" />
</span>
</div>
<ul class="p-treenode-children" role="group" v-if="hasChildren && expanded">
<sub-treenode v-for="childNode of node.children" :key="childNode.key" :node="childNode"
<sub-treenode v-for="childNode of node.children" :key="childNode.key" :node="childNode" :templates="templates"
:expandedKeys="expandedKeys" @node-toggle="onChildNodeToggle" @node-click="onChildNodeClick"
:selectionMode="selectionMode" :selectionKeys="selectionKeys"
@checkbox-change="propagateUp"></sub-treenode>
@ -25,6 +27,27 @@
<script>
import DomHandler from '../utils/DomHandler';
const TreeNodeTemplate = {
functional: true,
props: {
node: {
type: null,
default: null
},
template: {
type: null,
default: null
}
},
render(createElement, context) {
const content = context.props.template ? context.props.template({
'node': context.props.node
}): context.props.node.label;
return [content];
}
};
export default {
name: 'sub-treenode',
props: {
@ -43,6 +66,10 @@ export default {
selectionMode: {
type: String,
default: null
},
templates: {
type: null,
default: null
}
},
nodeTouched: false,
@ -281,6 +308,9 @@ export default {
partialChecked() {
return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked: false;
}
},
components: {
'TreeNodeTemplate': TreeNodeTemplate
}
}
</script>

17
src/router.js
View File

@ -363,8 +363,23 @@ export default new Router({
},
{
path: '/tree/selection',
name: 'treeselectiın',
name: 'treeselection',
component: () => import('./views/tree/TreeSelectionDemo.vue')
},
{
path: '/tree/lazy',
name: 'treelazy',
component: () => import('./views/tree/TreeLazyDemo.vue')
},
{
path: '/tree/templating',
name: 'treetemplating',
component: () => import('./views/tree/TreeTemplatingDemo.vue')
},
{
path: '/tree/filter',
name: 'treefilter',
component: () => import('./views/tree/TreeFilterDemo.vue')
},
{
path: '/tristatecheckbox',

77
src/views/tree/TreeFilterDemo.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<div>
<TreeSubMenu />
<div class="content-section introduction">
<div class="feature-intro">
<h1>Tree - Filter</h1>
<p>Tree is used to display hierarchical data.</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>
<TreeDoc />
</div>
</template>
<script>
import NodeService from '../../service/NodeService';
import TreeDoc from './TreeDoc';
import TreeSubMenu from './TreeSubMenu';
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);
}
}
}
},
components: {
'TreeDoc': TreeDoc,
'TreeSubMenu': TreeSubMenu
}
}
</script>
<style scoped>
button {
margin-right: .5em;
}
</style>

77
src/views/tree/TreeLazyDemo.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<div>
<TreeSubMenu />
<div class="content-section introduction">
<div class="feature-intro">
<h1>Tree - Lazy</h1>
<p>Tree is used to display hierarchical data.</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>
<TreeDoc />
</div>
</template>
<script>
import NodeService from '../../service/NodeService';
import TreeDoc from './TreeDoc';
import TreeSubMenu from './TreeSubMenu';
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);
}
}
}
},
components: {
'TreeDoc': TreeDoc,
'TreeSubMenu': TreeSubMenu
}
}
</script>
<style scoped>
button {
margin-right: .5em;
}
</style>

69
src/views/tree/TreeTemplatingDemo.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<div>
<TreeSubMenu />
<div class="content-section introduction">
<div class="feature-intro">
<h1>Tree - Templating</h1>
<p>Tree is used to display hierarchical data.</p>
</div>
</div>
<div class="content-section implementation">
<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>
</div>
<TreeDoc />
</div>
</template>
<script>
import NodeService from '../../service/NodeService';
import TreeDoc from './TreeDoc';
import TreeSubMenu from './TreeSubMenu';
export default {
data() {
return {
nodes: [
{
key: '0',
label: 'Introduction',
children: [
{label: 'What is Vue.js?', data:'https://vuejs.org/v2/guide/#What-is-Vue-js', type: 'url'},
{label: 'Getting Started', data: 'https://vuejs.org/v2/guide/#Getting-Started', type: 'url'},
{label: 'Declarative Rendering', data:'https://vuejs.org/v2/guide/#Declarative-Rendering', type: 'url'},
{label: 'Conditionals and Loops', data: 'https://vuejs.org/v2/guide/#Conditionals-and-Loops', type: 'url'}
]
},
{
key: '1',
label: 'Components In-Depth',
children: [
{label: 'Component Registration', data: 'https://vuejs.org/v2/guide/components-registration.html', type: 'url'},
{label: 'Props', data: 'https://vuejs.org/v2/guide/components-props.html', type: 'url'},
{label: 'Custom Events', data: 'https://vuejs.org/v2/guide/components-custom-events.html', type: 'url'},
{label: 'Slots', data: 'https://vuejs.org/v2/guide/components-slots.html', type: 'url'}
]
}
]
}
},
components: {
'TreeDoc': TreeDoc,
'TreeSubMenu': TreeSubMenu
}
}
</script>
<style scoped>
button {
margin-right: .5em;
}
</style>