Comments (12)
App.vue:
import TreeRoot from '@/Tree/components/TreeRoot'
import sourceData from "@/data";
function fetchData() {
return fetch('/static/data.json').then(r => r.json()).then(items => {
return items.map(item => {
item.data = item
return item
})
})
}
export default {
components: {
'tree': TreeRoot
},
data() {
return {
items: fetchData(),
query: '',
options: {}
}
}
};
Then you can use data
property.
Check this demo to add the icons: https://amsik.github.io/liquor-tree/#Custom-Node
from liquor-tree.
Move your data.json file to the static
directory.
from liquor-tree.
Do not worry, all is ok. Does the above code work for you? (fetchData fn)
from liquor-tree.
Hey! Check out my commit. It will help you
from liquor-tree.
Much appreciated.
So regarding the first problem in the Selection.js, works like a charm.
The second part, I couldn't get it to work.
I use the node:selected event to print the selected node's data, problem is that data only display the text property.
from liquor-tree.
Could you show me the example in your repo? I didn't get you.
from liquor-tree.
<template>
<div id="app">
<div class="min-h-screen bg-grey-darker p-4">
<div class="max-w-md mx-auto">
<div class="mb-2 border-solid border-grey-light rounded border shadow-sm">
<div
class="flex justify-between items-center bg-grey-lighter px-2 py-3 border-solid border-grey-light border-b">
<span>List of existing assets</span>
<span class="relative">
<i class="absolute pin-r pin-t mt-055 mr-3 fas fa-search"></i>
<input type="text"
class="border border-solid border-grey-light bg-grey-white leading-normal p-1 pr-8 rounded outline-0 shadow-inner"
title=""
v-model="query"
/>
</span>
</div>
<div class="p-3 bg-white p-4">
<div class="tree bg-white p-4 rounded">
<tree
:data="items"
:filter="query"
ref="tree"
@node:selected="onSelectedNode"
>
<span class="tree-text" slot-scope="{ node }">
<template v-if="!node.hasChildren()">
<i :class="node.data.icon"></i>
{{ node.text }}
</template>
<template v-else>
<i :class="[node.expanded() ? 'far fa-folder-open' : 'far fa-folder']"></i>
{{ node.text }}
</template>
</span>
</tree>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import TreeRoot from '@/Tree/components/TreeRoot'
function fetchData() {
return fetch('/static/data.json').then(r => r.json()).then(items => {
return items.map(item => {
item.data = item
return item
})
})
}
export default {
components: {
'tree': TreeRoot
},
data() {
return {
items: fetchData(),
query: '',
options: {}
}
},
methods: {
onSelectedNode(node) {
console.log(node)
}
}
};
</script>
<style lang="scss">
/* Custom styles for scrollbar */
::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track-piece {
background-color: #d6dadc;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: darkgrey;
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
.outline-0 {
outline: none;
}
.h-80 {
height: 20rem;
}
.tree-node.matched > .tree-content {
background: #f7f2e7;
}
.mt-055 {
margin-top: 0.55rem;
}
</style>
As shown in the first screenshot, on the root node, the data properties are set.
In the second screenshot, you can see that data property only contains 'text', the others are not set.
from liquor-tree.
Sorry, it is my fault.
Try this one:
function fetchData() {
return fetch('/static/data.json').then(r => r.json()).then(items => {
items.forEach(setData)
function setData(item) {
item.data = item
if (item.children) {
item.children.forEach(setData)
}
}
return items
})
}
from liquor-tree.
By the way, you can load this library via npm:
npm i liquor-tree
App.vue:
import TreeRoot from 'liquor-tree'
It will work as well :)
from liquor-tree.
I'm doing that on the project I'm currently working on.
But as I said, I'm use the source code as learning material.
And to be honest, there are lots of things that are helping so far.
And again, sorry for troubling to help me fix my code.
from liquor-tree.
All good my friend.
By the way, through the code, I found some odd functions in the code like
function getAllChildren (source) {
const result = []
source.forEach(function collect (node) {
result.push(node)
if (node.children) {
node.children.forEach(collect)
}
})
return result
}
what does the collect do ?
and this one too
const preparedItems = data.map(function converter (item) {
const convertedItem = convertNames(item, p)
// Possible to receive 1 child like a simple object. It must be converted to an array
// We do not have checks on the correctness of the format. A developer should pass correct format
if (convertedItem.children && !Array.isArray(convertedItem.children)) {
convertedItem.children = [convertedItem.children]
}
if (convertedItem.children) {
convertedItem.children = convertedItem.children.map(converter)
}
return convertedItem
})
the converter ?
sorry I've been going through your code like full speed since yesterday and I'm trying to piece out some of the API
from liquor-tree.
- This function is collecting all children (as named ... ) and it using only for
find
method.
Example structure:
let treeData = [{
text: 'Item 2.3',
children: [{
text: 'Item 2.2.3.1'
},
{
text: 'Item 2.2.3.2'
},
{
text: 'Item 2.2.3.3'
},
{
text: 'Item 2.2.3.4',
children: [{
text: 'Item 2.2.3.4.1'
},
{
text: 'Item 2.2.3.4.2'
}
]
}
]
}]
// --- some initialization and so on
new Vue({
// ----
// this is NOT real method... only for demo :)
onTreeMounted() {
const node = this.$refs.tree.find('Item 2.3');
// print -> Item 2.2.3.4, Item 2.2.3.4.1, Item 2.2.3.4.2
node.find(/Item 2.2.3.4/).map(n => console.log(n.text))
// print -> Item 2.2.3.4
node.find(/Item 2.2.3.4/, false).map(n => console.log(n.text))
}
// ----
})
from liquor-tree.
Related Issues (20)
- unselect
- Extra fields to return on selected HOT 1
- Find ROOT nodes
- The tree component rerenders when a v-model is changed HOT 1
- The text node not shown at all
- Wrong position return on multiple Drag and Drop HOT 2
- How to access data coming from server without changing its structure? HOT 1
- window.Vue.use is not a function after upgrade to Laravel-mix 6 HOT 1
- Parent auto check not working properly with checked and disabled children
- Filter & Store data sync Issue
- while drag and drop , how to stop child node from dropping inside any other parent or outside parent
- Vue 3 Support HOT 1
- store and disabled child-node
- Scroll to selected node HOT 1
- Dynamic indexing nodes
- Searching by the data field?
- How to only return children node event ?
- Selected notes on mount returns 0 nodes HOT 1
- Is this project dead? HOT 5
- kknjljkkl
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from liquor-tree.