I made dojo tree with checkbox.
but when I checked parent node, child node was not selected automatically.(not expanded child)
Only when I expand the tree once, after that, Child node can be selected when I click the parent checkbox.
Here is the code.
require([
"dojo/_base/window", "dojo/store/Memory",
"dijit/tree/ObjectStoreModel",
"dijit/Tree", "dijit/form/CheckBox","dojo/dom",
"dojo/domReady!"
], function(win, Memory, ObjectStoreModel, Tree, checkBox, dom){
// Create test store, adding the getChildren() method required by ObjectStoreModel
var myStore = new Memory({
data: [
{ id: 'world', name:'The earth', type:'planet', population: '6 billion'},
{ id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km',
timezone: '-1 UTC to +4 UTC', parent: 'world'},
{ id: 'EG', name:'Egypt', type:'country', parent: 'AF' },
{ id: 'KE', name:'Kenya', type:'country', parent: 'AF' },
{ id: 'Nairobi', name:'Nairobi', type:'city', parent: 'KE' },
{ id: 'Mombasa', name:'Mombasa', type:'city', parent: 'KE' },
{ id: 'SD', name:'Sudan', type:'country', parent: 'AF' },
{ id: 'Khartoum', name:'Khartoum', type:'city', parent: 'SD' },
{ id: 'AS', name:'Asia', type:'continent', parent: 'world' },
{ id: 'CN', name:'China', type:'country', parent: 'AS' },
{ id: 'IN', name:'India', type:'country', parent: 'AS' },
{ id: 'RU', name:'Russia', type:'country', parent: 'AS' },
{ id: 'MN', name:'Mongolia', type:'country', parent: 'AS' },
{ id: 'OC', name:'Oceania', type:'continent', population:'21 million', parent: 'world'},
{ id: 'EU', name:'Europe', type:'continent', parent: 'world' },
{ id: 'DE', name:'Germany', type:'country', parent: 'EU' },
{ id: 'FR', name:'France', type:'country', parent: 'EU' },
{ id: 'ES', name:'Spain', type:'country', parent: 'EU' },
{ id: 'IT', name:'Italy', type:'country', parent: 'EU' },
{ id: 'NA', name:'North America', type:'continent', parent: 'world' },
{ id: 'SA', name:'South America', type:'continent', parent: 'world' }
],
getChildren: function(object){
return this.query({parent: object.id});
}
});
// Create the model
var myModel = new ObjectStoreModel({
store: myStore,
query: {id: 'world'}
});
// Create the Tree.
var tree = new Tree({
model: myModel,
getIconClass:function(item, opened){
console.log('tree getIconClass', item, opened);
console.log('tree item type', item.type);
},
onClick: function(item, node) {
node._iconClass= "dijitFolderClosed";
node.iconNode.className = "dijitFolderClosed";
console.log(node.domNode.id);
var id = node.domNode.id, isNodeSelected = node.checkBox.get('checked');
console.log(isNodeSelected);
dojo.query('#'+id+' .dijitCheckBox').forEach(function(node){
dijit.getEnclosingWidget(node).set('checked',isNodeSelected);
});
},
_createTreeNode: function(args) {
var tnode = new dijit._TreeNode(args);
tnode.labelNode.innerHTML = args.label;
console.log('Tree created', args);
var cb = new dijit.form.CheckBox({id: args.item.id});
cb.placeAt(tnode.labelNode, "first");
tnode.checkBox = cb;
return tnode;
}
});
tree.placeAt(contentHere);
tree.startup();
//tree.expandAll();
});
http://jsfiddle.net/pyz9Lcpv/9/
This happens because before a node is opened in a tree, it's contents do not exist yet. They're loaded after a node is opened up in a tree. What you can do is plug into the tree's onOpen event and then decide there whether you should check the checkboxes of all the nodes that were just created.
Related
I want to store this data to mongodb, But I don't know how to loop it, Tried for a long time and couldn't get the correct answer
There is tree data
[
{
name: 'A',
children: [
{
name: 'A1',
children: [
{
name: 'A11',
children: []
}
]
},
{
name: 'A2',
children: []
},
]
},
{
name: 'B',
children: [
{
name: 'B1',
children: []
},
{
name: 'B2',
children: [
{
name: 'B21',
children: []
}
]
},
]
},
]
There is my Schema
const TempSchema = new mongoose.Schema({
name: String,
parent: { type: ObjectId, ref: 'Temp' },
}
I hope to get this result
{ _id: 5dea0671855f5d4b44774afd, name: 'A', parent: null, },
{ _id: 5dea07383ef7973e80883efd, name: 'A1', parent: 5dea0671855f5d4b44774afd, },
{ _id: 5dea07461047036d7c958771, name: 'A11', parent: 5dea07383ef7973e80883efd, },
{ _id: 5def00c05de2b22f8e6b9bfe, name: 'A2', parent: 5dea0671855f5d4b44774afd, },
...
This problem has troubled me for a long time, hope to get everyone's help, thank you!
Create ID and flat
const ObjectId = mongoose.Types.ObjectId;
const flatten = (data, parent = null) =>
data.flatMap(e => {
e._id = ObjectId();
return ([{
_id: e._id,
parent,
name: e.name
},
...flatten(e.children, e._id)])
});
const result = flatten(tree);
await Model.insertMany(result)
I am new to Quasar and Vue. Could someone explain to me how to solve my task?
Briefly about the task:
(1) I have a q-tree element which represents the folder structure at the left side of a screen [ref.1]
(2) Here is a folder structure [ref.2]
(3) When the user clicks on any element in this folder structure, then he will see a new component on the right side with all children elements of clicked one in a grid layout.
This is what do I have now.
[ref.1] treeComponent.vue
<template>
<q-tree
:nodes="documents"
#click="getId"
node-key="id" >
</q-tree>
</template>
<script>
var documents = require('./documents')
module.exports = {
data: function () {
return {
selectedDoc: x,
documents: documents
}
},
methods: {
getId: function () {
const x = this.getNodeByKey('id')
consol.log(x)
}
}
}
</script>
[ref.2] documents.js
module.exports = [
{
id: '1',
label: 'My Documents',
icon: 'folder',
children: [
{
id: '01',
label: 'Dir 1',
children: [
{ id: '0001', label: 'Doc 1'},
{ id: '0002', label: 'Doc 2'}
]
},
{
id: '02',
label: 'Dir 2',
children: [
{ id: '0003', label: 'Doc 3'},
{ id: '0004', label: 'Doc 4'}
]
},
{
id: '103',
label: 'Dir 3',
children: [
{ id: '0005', label: 'Doc 5'},
{ id: '0006', label: 'Doc 6'},
{ id: '0007', label: 'Doc 7'}
]
}
]
}
]
you need to replace id by key.after this add this handler for each node
handler: (node) => this.onclick(node)
then add this method in methods
onclick(node) {
alert(node.key)
},
this will display id of perticular node
So, the main problem was related to not good enough acquainted with Quasar framework.
Here is my answer to this question:
<template>
<button v-on:click = "showNodeSelected">showClickedNode</button>
<q-tree
:nodes = "documents"
:selected.sync = "selected"
node-key="id"
/>
</template>
<script>
var documents = require('./documents')
module.exports = {
data: function () {
return {
selected: null,
documents: documents
}
},
methods: {
showNodeSelected: function () {
console.log(this.selected)
}
}
}
</script>
I want to add the children array to node where id = 52126f7d (or another). How do I do it?
var children = [
{ name: 'great-granchild3',
id: '2a12a10h'
},
{ name: 'great-granchild4',
id: 'bpme7qw0'
}
]
// json tree
var objects = {
name: 'all objects',
id:"2e6ca1c3",
children: [
{
name: 'child',
id: "6c03cfbe",
children: [
{ name: 'grandchild1',
id: "2790f59c"
},
{ name: 'grandchild2',
id: "52126f7d"
},
{ name: 'grandchild3',
id: "b402f14b"
},
{
name: 'grandchild4',
id: "6c03cff0",
children: [
{ name: 'great-grandchild1',
id: "ce90ffa6"
},
{ name: 'great-grandchild2',
id: "52f95f28"
}
]
}
]
},
{
name: 'child2',
id: "7693b310",
children: [
{ name: 'grandchild5',
id: "def86ecc"
},
{ name: 'grandchild6',
id: "6224a8f8"
}
]
}
]
}
to end up with
var objects = {
name: 'all objects',
id:"2e6ca1c3",
children: [
{
name: 'child',
id: "6c03cfbe",
children: [
{ name: 'grandchild1',
id: "2790f59c"
},
{ name: 'grandchild2',
id: "52126f7d",
children = [
{ name: 'great-granchild3',
id: '2a12a10h'
},
{ name: 'great-granchild4',
id: 'bpme7qw0'
}
]
},
{ name: 'grandchild3',
id: "b402f14b"
},
{
name: 'grandchild4',
id: "6c03cff0",
children: [
{ name: 'great-grandchild1',
id: "ce90ffa6"
},
{ name: 'great-grandchild2',
id: "52f95f28"
}
]
}
]
},
{
name: 'child2',
id: "7693b310",
children: [
{ name: 'grandchild5',
id: "def86ecc"
},
{ name: 'grandchild6',
id: "6224a8f8"
}
]
}
]
}
by finding the proper node first.
function getNodeById(id, node){
var reduce = [].reduce;
function runner(result, node){
if(result || !node) return result;
return node.id === id && node || //is this the proper node?
runner(null, node.children) || //process this nodes children
reduce.call(Object(node), runner, result); //maybe this is some ArrayLike Structure
}
return runner(null, node);
}
var target = getNodeById("52126f7d", objects);
target.children = children;
How about:
objects.children[0].children[1].children = children;
I am using Dojo ObjectStoreModel for a dijit/Tree widget.
I need to configure ObjectStoreModel to use property named parent_id instead of the default parent in order to match my data structure.
Any idea how to set this configuration?
var data = [
{
id: 'world',
name: 'The earth',
type: 'planet',
population: '6 billion'
},
{
id: 'EG',
name: 'Egypt',
type: 'country',
parent_id: 'AF' // does not work if property is called parent_id, only parent by default
},
{
id: 'Nairobi',
name: 'Nairobi',
type: 'city',
parent_id: 'KE'
},
{
id: 'Mombasa',
name: 'Mombasa',
type: 'city',
parent_id: 'KE'
},
{
id: 'SD',
name: 'Sudan',
type: 'country',
parent_id: 'AF'
},
];
var myStore = new Memory({
data: data,
getChildren: function (object) {
return this.query({ parent: object.id });
}
});
// Create the model
var myModel = new ObjectStoreModel({
store: myStore,
query: { id: '0' }
});
// Create the Tree.
var tree = new Tree({
model: myModel
});
tree.placeAt(this.domNode);
tree.startup();
I found the solution to my problem
http://dojotoolkit.org/reference-guide/1.10/dijit/tree/ObjectStoreModel.html
Stating: The dojo.store must implement it’s own getChildren() method.
So with this edit script works fine.
var myStore = new Memory({
data: data,
getChildren: function (object) {
return this.query({ parent_id: object.id });
}
});
In my ASP.NET project I tried to use some dojo UI elements. My first attempt was a tree like it is shown in the dojo documentation. But the tree refuses to hold the state of the expanded nodes after refreshing the browser page.
require([
"dojo/ready", "dojo/_base/window", "dojo/store/Memory",
"dijit/tree/ObjectStoreModel", "dijit/Tree"
], function (ready, win, Memory, ObjectStoreModel, Tree) {
// Create test store, adding the getChildren() method required by ObjectStoreModel
var myStore = new Memory({
data: [
{ id: 'world', name: 'The earth', type: 'planet', population: '6 billion' },
{ id: 'AF', name: 'Africa', type: 'continent', parent: 'world'
},
{ id: 'EG', name: 'Egypt', type: 'country', parent: 'AF' },
{ id: 'KE', name: 'Kenya', type: 'country', parent: 'AF' },
{ id: 'Nairobi', name: 'Nairobi', type: 'city', parent: 'KE' },
{ id: 'Mombasa', name: 'Mombasa', type: 'city', parent: 'KE' },
{ id: 'SD', name: 'Sudan', type: 'country', parent: 'AF' },
{ id: 'Khartoum', name: 'Khartoum', type: 'city', parent: 'SD' },
{ id: 'AS', name: 'Asia', type: 'continent', parent: 'world' },
{ id: 'CN', name: 'China', type: 'country', parent: 'AS' },
{ id: 'IN', name: 'India', type: 'country', parent: 'AS' },
{ id: 'RU', name: 'Russia', type: 'country', parent: 'AS' },
{ id: 'MN', name: 'Mongolia', type: 'country', parent: 'AS' },
{ id: 'OC', name: 'Oceania', type: 'continent', population: '21 million', parent: 'world' },
{ id: 'EU', name: 'Europe', type: 'continent', parent: 'world' },
{ id: 'DE', name: 'Germany', type: 'country', parent: 'EU' },
{ id: 'FR', name: 'France', type: 'country', parent: 'EU' },
{ id: 'ES', name: 'Spain', type: 'country', parent: 'EU' },
{ id: 'IT', name: 'Italy', type: 'country', parent: 'EU' },
{ id: 'NA', name: 'North America', type: 'continent', parent: 'world' },
{ id: 'SA', name: 'South America', type: 'continent', parent: 'world' }
],
getChildren: function (object) {
return this.query({ parent: object.id });
}
});
// Create the model
var myModel = new ObjectStoreModel({
store: myStore,
query: { id: 'world' }
});
// Create the Tree. Note that all widget creation should be inside a dojo.ready().
ready(function () {
var tree = new Tree({
model: myModel,
persist: true
});
tree.placeAt("tree2");
tree.startup();
});
});
</script>
<div id="tree2"></div>
Cookies are activated. I want this to happen just on client side. Tried it with chrome, firefox and IE.
The id for the tree was missing. With id it works:
var tree = new Tree({
id: "yourtree",
model: myModel,
....