I have some code in which I need the ability to add child nodes to a jstree which themselves contain children. The below code adds a 'child2' node correctly to 'child1' but ignores the child3 data. Any help much appreciated. Code follows:
<html>
<head>
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0rc2/jquery.jstree.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function () {
$("#tree").jstree({
"json_data" : {
"data" : [
{
"data" : "parent",
"attr" : { "id" : "root.id" },
"children" : [ { "data" : "child1",
"attr" : { "id" : "child1.id" },
"children" : [ ] }
]
},
]
},
"plugins" : [ "themes", "json_data", "crrm" ]
});
});
$("#add").click(function() {
$("#tree").jstree("create", $("#child1\\.id"), "inside",
{ "data" : "child2", "attr" : { "id" : "child2.id" },
"children" : [ { "data" : "child3", "attr" : { "id" : "child3.id" }, "children": [ ] } ] },
function() { alert("added"); }, true);
});
});
</script>
</head>
<body>
<div id="tree" name="tree"></div>
<input type="button" id="add" value="add" />
</body>
</html>
First off, that's not valid json with the last comma inside the last bracket. Take that off:
[
{
"data" : "parent",
"attr" : {
"id" : "root.id"
},
"children" : [
{
"data" : "child1",
"attr" : {
"id" : "child1.id"
},
"children" : [ ]
}
]
}
]
Also, as of version 3.0 or perhaps before you can simply just insert a new node with json. Recursion is no longer needed.
I created json like so, which creates a folder called income and puts many text children underneath it but also those could be folders just like the parent with more content. See my function below which inserts this folder into the parent with all it's children:
{
"text" : "Income",
"id" : "_folder_income",
"state" : {
"opened" : true
},
"children" : [
{
"text" : "$125,000 - $150,000",
"state" : {
"selected" : true
},
"icon" : "jstree-file",
"id" : "6017897162332"
},
{
"text" : "$150,000 - $250,000",
"state" : {
"selected" : false
},
"icon" : "jstree-file",
"id" : "6017897374132"
},
{
"text" : "$250,000 - $350,000",
"state" : {
"selected" : false
},
"icon" : "jstree-file",
"id" : "6017897397132"
},
{
"text" : "$350,000 - $500,000",
"state" : {
"selected" : false
},
"icon" : "jstree-file",
"id" : "6017897416732"
},
{
"text" : "Over $500,000",
"state" : {
"selected" : false
},
"icon" : "jstree-file",
"id" : "6017897439932"
},
{
"text" : "$30,000 - $40,000",
"state" : {
"selected" : false
},
"icon" : "jstree-file",
"id" : "6018510070532"
},
{
"text" : "$100,000 - $125,000",
"state" : {
"selected" : false
},
"icon" : "jstree-file",
"id" : "6018510083132"
},
{
"text" : "$40,000 - $50,000",
"state" : {
"selected" : false
},
"icon" : "jstree-file",
"id" : "6018510087532"
},
{
"text" : "$75,000 - $100,000",
"state" : {
"selected" : false
},
"icon" : "jstree-file",
"id" : "6018510100332"
},
{
"text" : "$50,000 - $75,000",
"state" : {
"selected" : false
},
"icon" : "jstree-file",
"id" : "6018510122932"
}
]
}
This same json could also be used to fill a parent folder on tree instance:
/**
* inserts a new node (json object returned from url) into an existing node (parentNodeId), for the div ud in jsTreeName which is
* an instanced jstree.
* #param string jsTreeName {name of an instanced tree}
* #param string url {returns json}
* #param string parentNodeId {string of the parent node id}
*/
function insertUrlIntoNode(jsTreeName, url, parentNodeId) {
var nodeTree = getSynchronousJson(url);
var tree = $('#'+jsTreeName).jstree(true);
tree.deselect_all();
var sel = tree.create_node(parentNodeId, nodeTree);
//tree.deselect_all();
//tree.select_node(sel); //optionally you could select the new node after insersion
}
As far as I can see from the source, "create" function doesn't support creating multi-level tree at once. The method that gets called doesn't use and check the children attribute on passed data.
You need to do it yourself, something like that :
var recursivelyCreate = function (node, parentNodeId) {
tree.jstree("create", $("#"+parentNodeId), "inside", node, function() {}, true);
if(node.children){
$.each(node.children, function(i, child){
recursivelyCreate(child, node.attr.id);
});
}
};
recursivelyCreate(rootNodeYouWantToInsert,nodeParentId);
Related
Here is MongoDB scheme.
{
"_id" : ObjectId("222222"),
"active" : false,
"amount" : "15%",
"description" : "15% discount",
"name" : "20200628-test",
"policies" : {
"apply" : [
{
"name" : "expiryDate",
"params" : {
"date" : ISODate("2020-07-06T14:59:59.999Z")
}
},
{
"name" : "isApplyCategoryExist"
}
],
"discount" : [],
"conflict" : [
{
"name" : "exclusive"
}
],
"grant" : []
},
"target" : {
"sku" : "",
"products_ids" : [],
"category_ids" : [
ObjectId("11111111")
]
},
"title" : "15% coupon"
}
I want to access date.
For example, "policies.apply.params.date"...
I don't know how to access 'date' to Javascript.
Please let me know...
apply is an array, so you have to give it index which you want to get.
var num = 0; // pick up an array number you want
var date = policies.apply[num].params.date;
Your policies.apply is an array so if you want to access "2020-07-06T14:59:59.999Z", you should do this:
policies.apply[0].params.date
But the "policies.apply[1]" doesn't have params (params.date also) so you can write a function to get date like this:
function get_apply_date(index) {
if(policies.apply[index].params && policies.apply[index].params.date)
return policies.apply[index].params.date;
return undefined; // or null
}
Wanted to get the clicked tree object value in javascript
what i'm trying to achieve is when user clicks a tree node then its related data i want to get the original object
here is what i have tried not getting object:
$('#jstree').jstree({
"json_data" : {
"data" : [
{
"data" : "A node",
"metadata" : { id : 23 },
"children" : [ "Child 1", "A Child 2" ]
},
{
"attr" : { "id" : "li.node.id1" },
"data" : {
"title" : "Long format demo",
"attr" : { "href" : "#" }
}
}
]
},
"plugins" : [ "themes", "json_data", "ui" ]
});
$("#jstree").bind(
"select_node.jstree", function(evt, data){
//selected node object: data.node;
console.log('data',data.inst.get_json());
console.log('data.node.id',data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree">
</div>
Expected Output:
from above snippet, when i click Child 1 or A Child 2 i should get below object
{
"data" : "A node",
"metadata" : { id : 23 },
"children" : [ "Child 1", "A Child 2" ]
}
when user clicks on Long format demo i should get below object
{
"attr" : { "id" : "li.node.id1" },
"data" : {
"title" : "Long format demo",
"attr" : { "href" : "#" }
}
}
Please help me thanks in advance!!!
As your jstree version is old, I recommend you to update your jstree version. but, as for the 1.0v, You can use below code to get the parent node, if user clicked child one.
$('#jstree').jstree({
"json_data" : {
"data" : [
{
"data" : "A node",
"metadata" : { id : 23 },
"children" : [ "Child 1", "A Child 2" ]
},
{
"attr" : { "id" : "li.node.id1" },
"data" : {
"title" : "Long format demo",
"attr" : { "href" : "#" }
}
}
]
},
"plugins" : [ "themes", "json_data", "ui" ]
});
$("#jstree").bind(
"select_node.jstree", function(evt, data){
if(data.inst._get_parent().length <= 0 || data.inst._get_parent()===-1){
console.log('data',data.inst.get_json());
console.log('data.node.id',data);
}else{
var parent = data.inst._get_parent();
console.log(data.inst.get_json(parent));
}
//selected node object: data.node;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree">
</div>
I am trying to parse a JSON object and delete the Key 'id' with in it, I was able to delete the 'id' which appears in the root of the object but unable to traverse with in the nested array objects which also has 'id' key and delete them, Now follows the code block
var json = {
"id" : "a28b469b-b4f2-4846-9b5f-9d866f249bbe",
"description" : "Cost of Product",
"periodicity" : "calendar-monthly",
"Vanilla" : [ {
"id" : "22382c50-f56f-40b7-a308-203da052c5bc",
"price" : {
"amount" : 100.000,
"currency" : "USD"
},
"packing" : "RECURRING",
"billedInAdvance" : true
} ],
"Chocolate" : [ {
"id" : "44672921-1966-456e-bde2-87ef72f31cab",
"price" : {
"amount" : 256.000000,
"currency" : "USD"
},
"packing" : "Box_Usage"
} ],
"Peach" : [ {
"id" : "e3a600e2-a2ed-4872-8e6d-5d59ec5ca02d",
"packing" : "Box_Usage",
"diff" : [ {
"pricePerUnit" : {
"amount" : 25.000000,
"currency" : "USD"
},
"fixedPrice" : {
"amount" : 36.000000,
"currency" : "USD"
}
} ]
} ],
"Strawberry" : [ {
"id" : "43b4a121-455a-4828-b4bf-1bacda49f9ce",
"packing" : "Box_Usage",
"diff" : [ {
"pricePerUnit" : {
"amount" : 100.000000,
"currency" : "USD"
}
} ]
} ]
}
I am able to delete the 'id' property within an array object by accessing it through the index, But this wont handle dynamic scenarios when the keys with in the JSON grows. Any suggestion would be valuable
You can do it recursively: each time you find an array within the object, you loop through it to remove id in each element.
var json = {
"id" : "a28b469b-b4f2-4846-9b5f-9d866f249bbe",
"description" : "Cost of Product",
"periodicity" : "calendar-monthly",
"Vanilla" : [ {
"id" : "22382c50-f56f-40b7-a308-203da052c5bc",
"price" : {
"amount" : 100.000,
"currency" : "USD"
},
"packing" : "RECURRING",
"billedInAdvance" : true
} ],
"Chocolate" : [ {
"id" : "44672921-1966-456e-bde2-87ef72f31cab",
"price" : {
"amount" : 256.000000,
"currency" : "USD"
},
"packing" : "Box_Usage"
} ],
"Peach" : [ {
"id" : "e3a600e2-a2ed-4872-8e6d-5d59ec5ca02d",
"packing" : "Box_Usage",
"diff" : [ {
"pricePerUnit" : {
"amount" : 25.000000,
"currency" : "USD"
},
"fixedPrice" : {
"amount" : 36.000000,
"currency" : "USD"
}
} ]
} ],
"Strawberry" : [ {
"id" : "43b4a121-455a-4828-b4bf-1bacda49f9ce",
"packing" : "Box_Usage",
"diff" : [ {
"pricePerUnit" : {
"amount" : 100.000000,
"currency" : "USD"
}
} ]
} ]
};
function removeId(obj) {
delete obj.id;
Object.keys(obj).forEach(key => {
if (Array.isArray(obj[key])) {
obj[key].forEach(o => {
removeId(o);
});
}
});
}
removeId(json);
console.log(json);
I'm a longtime JavaScript coder but new to jQuery. I'm using jsTree and need to change a node name. I've searched for and tried many examples from this site and others, but can't find a solution that works. Basically, I'm trying to change a tree node name but it always renames to 'undefined'. In the following example, whenever a node is selected the text should change.
The block of code that is supposed to make the change is:
$('#catTree')
// listen for event
.on('changed.jstree', function (e, data) {
var node = data.instance.get_node(data.selected[0])
var newText = "Some new text";
$('#catTree').jstree('rename_node', [node , newText] );
})
In case is it something obvious that I'm just missing, here the whole example:
<div id="catTree" class="demo"></div>
<script>
var catData = [
{ "id" : "allCategories", "parent" : "#", "type" : "catRoot", "text" : "All categories" },
{ "id" : "category1", "parent" : "allCategories", "type" : "category", "text" : "Category 1" },
{ "id" : "category2", "parent" : "allCategories", "type" : "category", "text" : "Category 2" },
{ "id" : "category3", "parent" : "allCategories", "type" : "category", "text" : "Category 3" },
]
$.jstree.defaults.core = {
strings : false,
check_callback : true,
animation : 100,
aria_roles : true,
multiple : false,
themes : {
name : false,
url : true,
dots : true,
icons : true,
dir : false
},
base_height : false
};
$('#catTree')
// listen for event
.on('changed.jstree', function (e, data) {
var node = data.instance.get_node(data.selected[0])
var newText = "Some new text";
$('#catTree').jstree('rename_node', [node , newText] );
})
$(function () {
$("#catTree").jstree({
'core' : {
'data' : catData
},
"types" : {
"category" : { "icon" : "none", "max_children" : 1, "valid_children" : ["pasteText"] },
},
"crrm" : {
"move" : {
"check_move" : function (m) {
var p = this._get_parent(m.o);
if(!p) return false;
p = p == -1 ? this.get_container() : p;
if(p === m.np) return true;
if(p[0] && m.np[0] && p[0] === m.np[0]) return true;
return false;
}
}
},
"dnd" : {
"drop_target" : false,
"drag_target" : false
},
"plugins" : [ "themes", "html_data", "crrm", "dnd", "types" ]
});
});
</script>
I'm using jsTree v3.2.1 and jQuery v2.1.4
you don't have to get node because you can access it from data variable.
call rename_node as $('#catTree').jstree('rename_node', data.node, newText) instead of $('#catTree').jstree('rename_node', [node , newText] )
also move your .on code to the main jstree init function
So the code will look like below. See example JS Fiddle.
$(function () {
$("#catTree").on('changed.jstree', function (e, data) {
var newText = "Some new text";
$('#catTree').jstree('rename_node', data.node, newText);
})
.jstree({
'core' : {
'data' : catData
},
"types" : {
"category" : { "icon" : "none", "max_children" : 1, "valid_children" : ["pasteText"] },
},
"crrm" : {
"move" : {
"check_move" : function (m) {
var p = this._get_parent(m.o);
if(!p) return false;
p = p == -1 ? this.get_container() : p;
if(p === m.np) return true;
if(p[0] && m.np[0] && p[0] === m.np[0]) return true;
return false;
}
}
},
"dnd" : {
"drop_target" : false,
"drag_target" : false
},
"plugins" : [ "themes", "html_data", "crrm", "dnd", "types" ]
});
});
I'm somewhat new at web development so I apologize if I am using FSCollection incorrectly.
I have a FS.Collection instance that takes in audio files
LectureAudio = new FS.Collection("lectureAudio", {
stores: [new FS.Store.FileSystem("lectureAudio", {
path:"~/digicog/audioUpload",
filter: {
allow: {
contentTypes: ['audio/*'],
extensions: ['mp3', 'wav', 'MP3', 'WAV']
}
}
})]
});
And I am using an input file element to insert audio files into collection.
Template.audioControl.events({
'change #lecAudioPath': function (event) {
var files = document.getElementById("lecAudioPath").files;
if(files.length != 0){
var lecName = Router.current().params._id;
var audioFile = new FS.File(files[0]);
audioFile.metadata = {LectureId: lecName};
LectureAudio.insert(audioFile);
}
}
});
However when I type in LectureAudio.find().fetch() in the console for testing, I get empty brackets [ ].
Even though when I check my mongo database using:
>db.getCollection("cfs.lectureAudio.filerecord").find()
I see that my collection is populated.
{ "_id" : "wwyQtZZNwicbheCch", "copies" : { "lectureAudio" : { "name" : "fWnQyQpEWSXRDeuJq.mp3" } }, "original" : { "name" : "test1.mp3", "updatedAt" : ISODate("2013-08-16T16:07:40Z"), "size" : 8087475, "type" : "audio/mp3" }, "uploadedAt" : ISODate("2015-03-07T06:05:53.589Z") }
{ "_id" : "3rBbFfnGAT3Z8Bkti", "copies" : { "lectureAudio" : { "name" : "Efn235HcCyGrm5TPx.mp3" } }, "original" : { "name" : "test2.mp3", "updatedAt" : ISODate("2013-08-16T16:07:52Z"), "size" : 8806339, "type" : "audio/mp3" }, "uploadedAt" : ISODate("2015-03-07T06:17:06.234Z") }
{ "_id" : "RJ7LLH7XhgG2PnP9g", "copies" : { "lectureAudio" : { "name" : "fWnQyQpEWSXRDeuJq.mp3" } }, "original" : { "name" : "test3.mp3", "updatedAt" : ISODate("2013-08-16T16:07:52Z"), "size" : 8806339, "type" : "audio/mp3" }, "uploadedAt" : ISODate("2015-03-07T06:18:30.454Z") }
{ "_id" : "9YY33kFFbP7oBMjmr", "copies" : { "lectureAudio" : { "name" : "y7KQmq3ReqcP7Pzyw.mp3" } }, "original" : { "name" : "test4.mp3", "updatedAt" : ISODate("2013-08-16T16:07:40Z"), "size" : 8087475, "type" : "audio/mp3" }, "uploadedAt" : ISODate("2015-03-07T20:50:21.226Z") }
How do I get the collection to show?
You probably forgot to publish and subscribe to the collection.
On the server:
Meteor.publish('lecture_audio', function () {
return LectureAudio.find();
}
And on client:
Meteor.subscribe('lecture_audio');
More info in the docs here