Hi I am currently having an issue with the jsTree Context menu.
I would like to grab the id of the selected node however I've looked at a number of solutions and none have worked. My code is below.
The function I have which uses tree.get_selected($node) does return an object of the selected node but I'm struggling to access the id parameter of the object. Below I used tree.get_selected($node).id but it says it's undefined but its clearly not when I look at the console.
Can anyone help as to where I'm going wrong?
$("#tree_1").jstree({
"core" : {
"themes" : {
"responsive": false
},
// so that create works
"check_callback" : true,
'data' : {
'url' : function (node) {
if(node.id=='#') {
var id = 0;
} else {
var id = node.id;
}
return 'organisation/getOrganisationLocations/'+id;
}
}
},
"types" : {
"default" : {
"icon" : "fa fa-folder icon-state-warning icon-lg"
},
"file" : {
"icon" : "fa fa-file icon-state-warning icon-lg"
}
},
"state" : { "key" : "demo3" },
"plugins" : [ "dnd", "state", "types", "contextmenu" ],
"contextmenu":{
"items": function($node) {
var tree = $("#tree_1").jstree(true);
return {
"Create": {
"separator_before": false,
"separator_after": false,
"label": "Create",
"action": function (obj) {
$node = tree.create_node($node);
tree.edit($node);
console.log(tree.get_selected($node).id);
}
},
"Rename": {
"separator_before": false,
"separator_after": false,
"label": "Rename",
"action": function (obj) {
tree.edit($node);
}
},
"Remove": {
"separator_before": false,
"separator_after": false,
"label": "Remove",
"action": function (obj) {
tree.delete_node($node);
}
}
};
}
}
});
This approach worked for me:
$(node).attr('id')
Declare your id above the jstree declaration (at line 1, put var id;)
Then, in the data.url function, remove var from before each line that assignes to id.
Related
I have this data on my firebase:
transportation: {
"car" : {
"bus" : {
"toyota" : true,
"bmw" : true
},
"suv" : {
"honda" : true,
"toyota" : true,
}
}
}
I want to delete all "toyota" data so that my data looks like this:
transportation: {
"car" : {
"bus" : {
"bmw" : true
},
"suv" : {
"honda" : true,
}
}
}
The best possible way to do is check the value using loop in Javascript manually and delete if it's "toyota".
var firebaseRef= firebase.database().ref('transportation/');
firebaseRef.on("value", function(data)){
var datKey=data.key;
firebase.database().ref('transportation/'+datKey).on("value",function(childData)){
var childDataKey=childData.key;
firebase.database().ref('transportation/'+datKey+'/'+childDataKey+'/').on("value",function(data)){
firebase.database().ref('transportation/'+dataKey+'/'+childDataKey+'toyota').remove();
}
}
}
I have to work on a jstree so that it saves what nodes are checked, but also opens checked nodes and their parents on load. This is the code i have to work with:
initializeGeoLevelTree: function () {
var GeoLevelTree = $('#geoLevelTree');
GeoLevelTree.jstree({
"core": {
"multiple": false,
"themes": {
"responsive": false
},
"check_callback": true,
"data":
CreateAdministrator.TreeGeoLevelArray
},
"types": {
"default": {
"icon": "fa fa-folder icon-warning icon-lg"
},
"file": {
"icon": "fa fa-file icon-warning icon-lg"
},
"disabled": {
"check_node": false,
"uncheck_node": false
}
},
"state": { "key": "createAdministrator" },
"checkbox": {
"three_state": false,
"whole_node": false,
"tie_selection": false
},
"plugins": ["checkbox", "wholerow", "types", "themes", "state"]
});
GeoLevelTree.bind("loaded.jstree", function (e, data) {
GeoLevelTree.bind("select_node.jstree", function (e, data) {
$("#lblName").text(data.node.original.Name);
$("#lblType").text(data.node.original.GeoLevelType);
if (data.node.original.IdGeoLevelType == 4) {
$("#officeDetail").show();
$("#lblAddress").text("");
CreateAdministrator.getOfficelDetail(data.node.id);
} else {
$("#officeDetail").hide();
}
});
CreateAdministrator.SelectGeoLevelAdministratorSavedNode();
});
CreateAdministrator.hideLoadingPage();
},
SelectGeoLevelAdministratorSavedNode: function () {
for (var i = 0, l = CreateAdministrator.GeoLevelAdministratorSavedArray.length; i < l; i++) {
var option = CreateAdministrator.GeoLevelAdministratorSavedArray[i];
$.jstree.reference("#geoLevelTree").check_node(option.IdGeoLevel);
jQuery.jstree._reference("#geoLevelTree")._open_to(option.IdGeoLevel);
}
},
The checked nodes adre stored on an external array, which is processed to find which ones are checked. Is there a way to set those nodes to opened as well? using the open_node or the _open_to methods doesn't seem to work. Thanks in advance
_open_to seems to do the trick. Here is a demo:
http://jsfiddle.net/DGAF4/1267/
Maybe the problem is the format of the IDs you pass to both functions - notice the ID is a string and has no # prefix.
Best regards,
Ivan
I'm working with the JsTree Ajax lazy load feature and to display the data I am using JsTree-grid. However, I am having the issue with display the data using the JsTree-grid on the second column. I've the following JSON data that I'm passing through the PHP using the JsTree ajax lazy load feature:
[
{
"id": 157749,
"parent": "Sheet1.worksheet1webs44lx8GbsHu9igMc2vM_qWJqhePuo257PKZm_6Uo",
"text": "Script 1: Login",
"data": {
"status": "Fail"
}
},
{
"id": 104511,
"parent": "Sheet1.worksheet1webs44lx8GbsHu9igMc2vM_qWJqhePuo257PKZm_6Uo",
"text": "skip",
"data": {
"status": "Pass"
}
}
]
In the Javascript I've the following code:
$('#jstree').jstree({
plugins: ['grid'],
'grid': {
'columns': [
{
'width': 50,
'header': 'Nodes'
},
{
'width': 30,
'header': 'Status',
'value': function (node) {
return (node.status);
}
}
]
},
'core' : {
'data' : {
"url" : function (node) {
return node.id === '#' ? 'node' : 'tree/' + node.id;
},
'data' : function (node) {
return { 'id' : file.id, 'title' : file.title };
},
"dataType" : "json"
}
}
});
Note: When I console log the node on here: 'value': function (node) { console.log(node); } I got the following result on the console:
Object { status: "Fail" }
Object { status: "Pass" }
I would like to display the status Pass or Fail on the second JsTree-grid column. However, the JsTree-grid isn't displaying the data and I'm even not getting any error on the console. Please, can someone help me regarding what I want to achieve.
I see two issues here:
"parent": "Sheet1.worksheet1webs44lx8GbsHu9igMc2vM_qWJqhePuo257PKZm_6Uo"; your json doesn't have any parents for these nodes
you don't need function here - 'value': function (node) { return (node.status); }, simply use 'value': 'status'.
After fixing these two issues it works, check demo - Fiddle.
I am creating JsTree with json Data. the tree is created upto second level but after second the tree is not populated.
I want to recursively call the function to add leaf to it until leaf doesnt exit.
Below is my Json:
[ {
"id" : 25,
"name" : "Output",
"path" : "/",
"type" : "folder",
}, {
"id" : 26,
"name" : "Templates",
"path" : "/",
"type" : "folder",
}, {
"id" : 27,
"name" : "Temp",
"path" : "/Output/",
"type" : "folder",
}, {
"id" : 28,
"name" : "December",
"path" : "/Output/",
"type" : "folder",
}, {
"id" : 29,
"name" : "ParameterDOC",
"path" : "/Templates/DecemberTemplates/",
"type" : "Doc",
}, {
"id" : 30,
"name" : "SimpleDoc",
"path" : "/Templates/DecemberTemplates/",
"type" : "Doc",
}, {
"id" : 31,
"name" : "DecemberTemplates",
"path" : "/Templates/",
"type" : "folder",
}, {
"id" : 32,
"name" : "NovemberTemplates",
"path" : "/Templates/",
"type" : "folder",
} ]
and code is:
function createTreeForDoc(jsonData,path,id){
for(var i=0; i < jsonData.length;i++){
if(jsonData[i].path == path){
$("<li id="+jsonData[i].name+" class=\"lib\" rel="+jsonData[i].path+" data-jstree='{\"icon\":\"images/"+jsonData[i].type+"_small.png\"}' >"+jsonData[i].name+"</li>").appendTo("#maptree");
createSubTree(jsonData,jsonData[i].path+jsonData[i].name+"/",jsonData[i].name,i);
}
}
$('#rptTree').jstree({
"plugins" : ["types"],
"core" : { "check_callback" : false, "themes" : { "dots" : false }, },
});
}
function createSubTree(jsonData,path,gid,counter){
$("<ul id=\"test"+counter+"\"></ul>").appendTo("#"+gid);
for(var i=0; i < jsonData.length;i++){
if(jsonData[i].path == path ){
$("<li id="+jsonData[i].name+" class=\"lib\" rel="+jsonData[i].path+" >"+jsonData[i].name+"</li>").appendTo("#test"+counter);
}
}
}
and right now i am getting out this:
so this creates till second level third level is not created how to recursively call a function to create all other level to end.
I am not able to get what you are trying to do ,but by looking your json data you can do in the following way.Here I am using a recursive function:
function filterData(globalData,parentPath){
var result=[];
for(var i =0; i<globalData.length;i++){
if(globalData[i].path == parentPath){
result.push(data[i]);
}
}
return result;
}
function renderTree(data,parentNodeId)
{
for (var i=0; i<data.length;i++)
{
if(data[i].type == 'folder')
{
$("<li id="+data[i].name+ ">"+data[i].name+"</li>").appendTo($('#'+parentNodeId));
var childNodes=filterData(globalData,data[i].path+data[i].name+"/");
if(childNodes.length > 0)
{
$("<ul id="+data[i].path+data[i].name+"></ul>").appendTo($('#'+data[i].name));
renderTree(childNodes,data[i].path+data[i].name);
}
}
else
{
$("<li id="+data[i].name+">"+data[i].name+"</li>").appendTo($('#'+parentNodeId));
}
}
hope it will work.
You have to use a recursive function to build your tree. This function should look like:
function recursive(jsonData,parent,counter=0)
{
$("<li id="+parent.path+parent.name+" class=\"lib\" rel="+parent.path+" >"+parent.name+"</li>").appendTo("#test"+counter);
counter = 0;
for(a = 0; a<jsonData.length; a++)
{
if((parent.path+ parent.name) == jsonData[a].path)
{
$("<li id="+jsonData[a].path+jsonData[a].name+" class=\"lib\" rel="+jsonData[a].path+" data-jstree='{\"icon\":\"images/"+jsonData[i].type+"_small.png\"}' >"+jsonData[a].name+"</li>").appendTo("#maptree");
if(jsonData[a].type == "folder")
{
recursive(jsonData,jsonData[a],counter);
}
}
counter++;
}
}
This is an example, i'm notsure it works but it might be close enought for you to enhance it. :)
Good luck...
My jstree function is here.
I have set 'select_limit' : 3, but is not working. when I run, I am able to select more than 3 nodes, but I need to select no more than 3 nodes.
var j1 = jQuery.noConflict();
j1("#utree_activity").jstree({
"plugins": ["themes", "html_data", "ui", "crrm", "checkbox"],
"html_data": {
"ajax": {
"url": urlGlobal + "jstrees/activitytree/",
"asynchronous": "false",
"data": function (n) {
return {
id: n.attr ? n.attr("id") : 0,
default_activities: default_activities
};
},
"success": function (gb) {
},
}
},
"ui": {
"select_limit": 3,
},
"cookies": {
cookie_options: {
path: "/"
}
},
"checkbox": {
two_state: true,
real_checkboxes: false
}
});
select_limit doens't handle checkbox you must roll your own before.jstree method.
j1.bind("before.jstree", function (e, data) {
if (data.func === "check_node") {
if (j1.jstree('get_checked').length >= 1) {
e.preventDefault();
return false;
}
}
});
Note that this code if for example only, and doesn't handle child nodes
Working fiddle: http://jsfiddle.net/cfb9J/1/
There is another option missing, probably need to add the ui module, try this:
j1("#utree_activity").jstree({
"plugins" : ["html_data","ui"],
//the rest of your code
});